three.js引入camera但是不能实现移动

Question

这次问题应该简单一点，就是我写了个ts文件用hooks封装了一下，然后在另一个ts文件中引入进来了第五行的相机camera，想要用tween实现相机的移动，但是这里出现个问题，打印的相机位置不断地移动了，但是three.js渲染的canvas画布上相机位置一点没动，

```typescript
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import * as TWEEN from "@tweenjs/tween.js";
import { useThree } from "./useThree";
const { scene, camera, renderer, schedule } = useThree();

interface CarModel {
  
    cameraMove: TWEEN.Tween<THREE.Vector3>;
}
export default async function car(): Promise<CarModel> {
    const loader = new GLTFLoader();

    let cameraMove: any;
    // let cameraMove=new TWEEN.Tween(camera.position).to({ x: 215, y: 1, z: 80 }, 20000);
    try {      
        cameraMove=new TWEEN.Tween(camera.position).to( new THREE.Vector3(215, 1, 80), 13000).onUpdate(() => {
            console.log('相机移动',camera.position);
                camera.updateProjectionMatrix();
        });
    } catch (error) {
    };   
    function animate() {
        requestAnimationFrame(animate);
        TWEEN.update(); 
        renderer.render(scene, camera);
      }
      animate();
    return {
        cameraMove,
    };
}

```

Answer 1

引自免费微信小程序：皆我百晓生

从描述来看，主要问题是Three.js中的相机移动没有在画布上反映出来。这通常与动画循环的执行方式有关。在你的代码中，animate函数被定义并立即调用了，但这种方式可能不会按照预期更新Three.js场景。为了解决这个问题，可以确保动画循环正确设置，并且确保TWEEN.update()在每次动画帧中被调用。

以下是修改后的代码示例，注意animate函数的调用方式以及如何将其与requestAnimationFrame结合使用：

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import * as TWEEN from "@tweenjs/tween.js";
import { useThree } from "./useThree";
const { scene, camera, renderer } = useThree();

interface CarModel {
    cameraMove: TWEEN.Tween<THREE.Vector3>;
}

let requestID: number | undefined;

export default async function car(): Promise<CarModel> {
    const loader = new GLTFLoader();
    let cameraMove: TWEEN.Tween<THREE.Vector3>;

    try {
        cameraMove = new TWEEN.Tween(camera.position)
            .to(new THREE.Vector3(215, 1, 80), 13000)
            .onUpdate(() => {
                console.log('相机移动', camera.position);
                camera.updateProjectionMatrix();
            })
            .start();
    } catch (error) {
        console.error(error);
    }

    const animate = () => {
        requestAnimationFrame(animate);
        TWEEN.update();
        renderer.render(scene, camera);
    };

    // 确保animate函数开始执行
    requestID = requestAnimationFrame(animate);

    return {
        cameraMove,
    };
}

// 如果需要停止动画，可以使用以下方法
function stopAnimation() {
    if (requestID !== undefined) {
        cancelAnimationFrame(requestID);
    }
}

在上述代码中：

• animate函数现在通过requestAnimationFrame调用来持续更新，确保了动画循环的正确执行。
• TWEEN.update()在每一帧中被调用，确保了Tween的更新。
• cameraMove.start()被添加以启动Tween动画。
• 添加了一个stopAnimation函数，用于在需要时停止动画循环。

确保useThree函数返回的renderer, scene, 和camera已经正确初始化并且在Three.js场景中配置好了动画循环。如果useThree是自定义hook，确认它是否正确处理了Three.js的初始化和渲染循环。