He pasado por preguntas similares en este sitio, y he visto todas las cosas que se recomiendan. Como el posicionamiento de la cámara (no dentro de la malla), llamando a la función de renderizado, configurando la luz (ambiental). Todas y cada una de las cosas que he encontrado hasta ahora en el foro lo he intentado, pero nada funciona.
¿Alguien puede mirar este violín y guiarme en cuanto a lo que estoy haciendo mal?
https://jsfiddle.net/4mxybs5h/1/
// HTML <main> <div id="threeContainer"> hi <canvas #canvas id="canvas"></canvas> </div> </main> // JS //this.animate(null); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); boxGeometry = new THREE.BoxGeometry(2, 2, 2); material = new THREE.MeshBasicMaterial({color: 0xff0000}); mesh = new THREE.Mesh( boxGeometry, material ); canva = document.getElementById("canvas"); renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva }); startScene(); animate(); function startScene() { //let scene = new THREE.Scene(); //let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); let light = new THREE.AmbientLight( 0xffaaff ); scene.add( mesh ); light.position.set(10,10,10) scene.add( light ); camera.position.set(500, 500, 500); mesh.castShadow = true; mesh.receiveShadow = true; //this.renderer.setClearColor('#E5E5E5') renderer.setClearColor(0xEEEEEE); //this.renderer.setSize(window.innerWidth, window.innerHeight) //this.renderer.render(this.scene, this.camera) //this.renderer.setAnimationLoop(this.animate.bind(this)) //document.body.appendChild(this.renderer.domElement) // window.addEventListener('resize', () => { // this.renderer.setSize(window.innerWidth, window.innerHeight) // this.camera.aspect = window.innerWidth / innerHeight // this.camera.updateProjectionMatrix(); // }) } function animate() { camera.aspect = window.innerWidth / innerHeight camera.updateProjectionMatrix(); requestAnimationFrame( animate ); mesh.rotation.x += 0.01; //this.mesh.rotation.y += 1; //document.body.appendChild(this.renderer.domElement) renderer.render(scene, camera); }Siento que debe ser algo pequeño u obvio, pero no puedo descifrarlo. Cualquier ayuda es apreciada.
No estás viendo nada porque estás apagando la cámara.
Dentro de la función startScene , cambie lo siguiente:
// From camera.position.set(500, 500, 500); // TO camera.position.set(0, 0, 5);Aplicando lo anterior da:
scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); boxGeometry = new THREE.BoxGeometry(2, 2, 2); material = new THREE.MeshBasicMaterial({color: 0xff0000}); mesh = new THREE.Mesh( boxGeometry, material ); canva = document.getElementById("canvas"); renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva }); startScene(); animate(); function startScene() { let light = new THREE.AmbientLight( 0xffaaff ); scene.add( mesh ); light.position.set(10,10,10) scene.add( light ); camera.position.set(0, 0, 5); mesh.castShadow = true; mesh.receiveShadow = true; renderer.setClearColor(0xEEEEEE); } function animate() { camera.aspect = window.innerWidth / innerHeight camera.updateProjectionMatrix(); requestAnimationFrame( animate ); mesh.rotation.x += 0.01; renderer.render(scene, camera); } <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <main> <div id="threeContainer"> <canvas #canvas id="canvas"></canvas> </div> </main>