0
590
Views¿Cómo crear una Esfera usando three.js?
Estaba haciendo una esfera usando three.js pero la salida es solo una pantalla negra como se muestra.
El código que usé es:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></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>No pude explicar por qué el código no pudo representar la esfera. ¿Qué salió mal?
·
Juan Pablo Isaza
1 answers
Answer question0
Tu cámara está dentro de la esfera. Muévelo un poco más lejos del origen como en el siguiente ejemplo en vivo:
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="https://cdn.jsdelivr.net/npm/three@0.143/build/three.min.js"></script>
·
Juan Pablo Isaza
Report
Answer question