Tengo conocimientos muy básicos de JS. Siguiendo los documentos de three.js Cargando modelos 3D, he renderizado con éxito el objeto 3D y lo he centrado:
const loader = new GLTFLoader(); loader.load( 'Duck.gltf', function ( duck ) { const model = duck.scene const box = new THREE.Box3().setFromObject( model ); const center = new THREE.Vector3(); box.getCenter( center ); model.position.sub( center ); // center the model scene.add( model ); }, undefined, function ( error ) { console.error( error ); } );Me gustaría animarlo ahora, comenzando con una rotación simple:
/** * Animate */ const clock = new THREE.Clock() const tick = () => { const elapsedTime = clock.getElapsedTime() // Update objects model.rotation.y = .5 * elapsedTime // Update Orbital Controls // controls.update() // Render renderer.render(scene, camera) // Call tick again on the next frame window.requestAnimationFrame(tick) } tick()Pero el problema es que la consola devuelve:
ReferenceError: Can't find variable: modelHa declarado la variable del modelo dentro del alcance funcional, intente declararla fuera
const loader = new GLTFLoader(); let model, box, center; loader.load( 'Duck.gltf', function ( duck ) { model = duck.scene box = new THREE.Box3().setFromObject( model ); center = new THREE.Vector3(); box.getCenter( center ); model.position.sub( center ); // center the model scene.add( model ); }, undefined, function ( error ) { console.error( error ); } );¡Con suerte, esto funcionará!
editado
como sugirió @prisoner849 en los comentarios
const clock = new THREE.Clock() const tick = () => { const elapsedTime = clock.getElapsedTime() // Update objects if (model) { model.rotation.y = .5 * elapsedTime } // Update Orbital Controls // controls.update() // Render renderer.render(scene, camera) // Call tick again on the next frame window.requestAnimationFrame(tick) } tick()