如何使用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。

BTW：我建议你在动画开始时禁用控件，在动画结束时再次启用。可以使用onComplete()来检测动画的结束。