I recently followed a tutorial on using the THREE.js library to create a solar system. However, I am encountering an issue where the result is not displaying in the browser window. Can someone please assist me in identifying any errors in the code?
Below is the code snippet:
<!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>
For reference, here is the link to the video tutorial: https://www.youtube.com/watch?v=kzwEZjVMdkA&list=LLSn1erQiQ7lWhWY9IMOEGTw&index=5