I was making a sphere using three.js but the output is just a black screen as shown.
The code I used is:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src=""></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.SphereGeometry( 15, 32, 16 ); const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 5; function animate() { requestAnimationFrame( animate ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </html> I couldn't explain why the code was unable to render the sphere. What went wrong?
1 Answer
Your camera is inside the sphere. Move it a bit further away from the origin like in the following live example:
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 50; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.SphereGeometry(15, 32, 16); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); function animate() { requestAnimationFrame(animate); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render(scene, camera); }; animate();body { margin: 0; }<script src="[email protected]/build/three.min.js"></script>
