如何使用threejs为相机设置动画以指向gltf模型的一部分

Question

我使用了一个 gltf 加载器来加载一个模型并为其添加了一个点击功能。当点击模型的一部分时，它应该改变相机的位置和旋转以专注于点击的部分。目前，相机会改变位置和旋转。但它非常突然。如何为位置变化而不是突然变化设置动画。

var loader = new THREE.GLTFLoader();
loader.load('perseverance.gltf', function(gltf){
  scene.add(gltf.scene);

  box_model = gltf.scene.getObjectByName( "box" )
  mast_cams = gltf.scene.getObjectByName( "Mastcam_Z_cams" )
  console.log(mast_cams);

    domEvents.addEventListener(mast_cams, 'click', function(event){

        if(!mast_cams_clicked){
            console.log("mast_cams clicked")
            camera.position.set(-1.340 ,2.6 , 2.180);
            camera.rotation.set(-13, -18.40, -3.20);
            controls.update();
            mast_cams_clicked = true;
        }else{
            console.log("Reset")
            controls.reset();
            mast_cams_clicked = false;
        }
        
    })
//   animate();
});

Answer 1

我建议您为此任务使用 GSAP 之类的动画库。这是一个完整的例子：

let renderer, scene, camera;

init();
animate();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );
    camera.lookAt( scene.position );

    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    const light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    scene.add( new THREE.AxesHelper( 20 ) );

    const geometry = new THREE.SphereGeometry( 5, 12, 8 );
    const material = new THREE.MeshPhongMaterial( {
        color: 0x00ffff, 
        flatShading: true,
        transparent: true,
        opacity: 0.7,
    } );
    
    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
        
    gsap.to( camera.position, {
        duration: 1,
        y: 10,
        onUpdate: () => {
                
            camera.lookAt( scene.position );

        }
    } );
    
}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>

请注意相机在更新时如何查看目标位置。不要使用scene.position，而是使用光线投射的目标位置。

顺便说一句：我建议您在动画开始时禁用控件，并在动画结束时再次启用它。您可以使用onComplete() 来检测动画的结束。