Three.js 基础 – 找不到变量 – GLTFLoader 动画

Question

我对 JS 有非常基本的了解。按照 three.js 文档 Loading 3D models 我已经成功渲染了 3D 对象并将其居中：

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 );

} );

我现在想制作动画，从简单的旋转开始：

/**
 * 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()

但问题是控制台returns:

ReferenceError: Can't find variable: model

Answer 1

您已在功能范围内声明模型变量，请尝试在外部声明它

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 );
} );

希望这会奏效！

已编辑

@prisoner849 在评论中建议

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()

Three.js 基础 – 找不到变量 – GLTFLoader 动画

Three.js basics – Can't find variable – GLTFLoader animation

javascript

animation

three.js

gltf