Menu
I was watching the tutorial of creating a solar system using the THREE.js library. However I could not see the result in the browser's window. Could you, please, help me finding an error in the code?
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar System - Intro (1)</title>
<script src="three.min.js"></script>
</head>
<body>
<script>
var scene, camera, render, container, W, H;
W = parseInt(document.body.clientWidth);
H = parseInt(document.body.clientHeight);
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, W / H, 1, 10000);
camera.position.z = 4300;
scene = new THREE.Scene();
// Sun
var sun, sun_geom, sun_mat;
sun_geom = new THREE.SphereGeometry(430, 30, 30);
sun_mat = new THREE.MeshNormalMaterial();
sun = new THREE.Mesh(sun_geom, sun_mat);
scene.add(sun);
render = new THREE.CanvasRenderer();
render.setSize(W, H);
container.appendChild(render.domElement);
animate();
function animate() {
requestAnimationFrame(animate);
render.render(scene, camera);
}
</script>
</body>
</html>
link to the video: https://www.youtube.com/watch?v=kzwEZjVMdkA&list=LLSn1erQiQ7lWhWY9IMOEGTw&index=5
327
The issue with your code is that the document.body.clientHeight is 0. Use these lines instead:
W = parseInt(window.innerWidth);
H = parseInt(window.innerHeight);
In addition THREE.CanvasRenderer has been moved to examples/js/renderers/CanvasRenderer.js so you need to include that, if you want to use the CanvasRenderer()
But you can use the WebGLRenderer():
render = new THREE.WebGLRenderer();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
