mi archivo main.js contiene: -
import './style.css'; import * as THREE from 'three'; //create scene const scene = new THREE.Scene(); //arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera) const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000, ); const renderer = new THREE.WebGLRenderer({ //which DOM element to use canvas: document.querySelector('.canvas'), }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth / window.innerHeight); camera.position.setZ(100); //arguments - radius, widthsegments, heightsegements const geometry = new THREE.SphereGeometry(15, 32, 16); //wireframe true to get a better look at its geometry const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true}); //torus is creating the mesh with geometry and material //mesh = geometry + material const globe = new THREE.Mesh(geometry, material); scene.add(globe); function animate(){ requestAnimationFrame(animate); //optimized rendering //rotation globe.rotateOnAxis += 0.01; renderer.render( scene, camera ); } animate(); renderer.render(scene, camera);y mi index.html :-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Gautam</title> </head> <body> <canvas id="globe">This is the canvas </canvas> <script type="module" src="./main.js"></script> </body> </html>Todo lo que aparece en mi pantalla es:- [lo que se muestra en mi navegador][1] [1]: https://i.stack.imgur.com/PQmJu.png
Verifiqué y mi archivo main.js definitivamente se está ejecutando, pero no aparece nada en la pantalla
Tienes algunos problemas.
document.querySelector('.canvas') Esto seleccionaría elementos con la clase canvas , pero su DOM no tiene ese elemento. Tiene un elemento con el tipo canvas y el globe ID , por lo que esa línea debe ser una de las siguientes:
document.querySelector('canvas') document.querySelector('#globe') document.getElementById('globe')Próximo,
renderer.setSize(window.innerWidth / window.innerHeight);Como señala @ Mugen87, esto debería ser
renderer.setSize(window.innerWidth, window.innerHeight); Tal como lo escribió, el ancho del renderizador se establece en el cociente y su altura (el segundo parámetro que falta) se establece en undefined , una situación para la que three.js no tiene control.
Y,
globe.rotateOnAxis += 0.01; rotateOnAxis es una función que toma un vector (el eje de rotación) y un escalar (el ángulo de rotación) como sus parámetros. Al asignarle +0.01, simplemente está reemplazando la función en sí, no llamando a la función. Si, por ejemplo, desea rotar alrededor del eje Y del globo, puede usar
globe.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0.01); Finalmente, la segunda llamada a renderer.render(...) (la que está fuera de la función animate() ) es innecesaria.
renderer.setSize(window.innerWidth / window.innerHeight);
Llame al método así en su lugar:
renderer.setSize(window.innerWidth, window.innerHeight); //create scene const scene = new THREE.Scene(); //arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera) const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000, ); const renderer = new THREE.WebGLRenderer({ //which DOM element to use canvas: document.querySelector('#canvas') }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); camera.position.setZ(100); //arguments - radius, widthsegments, heightsegements const geometry = new THREE.SphereGeometry(15, 32, 16); //wireframe true to get a better look at its geometry const material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); //torus is creating the mesh with geometry and material //mesh = geometry + material const globe = new THREE.Mesh(geometry, material); scene.add(globe); function animate() { requestAnimationFrame(animate); //optimized rendering //rotation globe.rotateOnAxis += 0.01; renderer.render(scene, camera); } animate(); body { margin: 0; } <script src="https://cdn.jsdelivr.net/npm/three@0.140.2/build/three.min.js"></script> <canvas id="canvas"></canvas>