在我的代码中，相机可以在点击时旋转，但它会立即将旋转设置为 90 度，我怎样才能让它成为一个平滑的过渡

Question

我想创建一个应用程序，我可以在其中旋转相机以查看特定实体，但我的相机会瞬间旋转，如何才能使其平滑过渡

我尝试将动画组件附加到相机，但由于外观控制组件，旋转被覆盖了

Answer 1

因为外观控件会覆盖相机上的旋转组件，所以您无法直接设置或设置旋转动画。

一种解决方案是禁用外观控件（或可能删除它），然后在旋转时执行动画。然后当它完成时，启用（或重新添加）外观控件组件。

另一种解决方案是使用 THREEjs 相机控件来设置相机并为其设置动画。动画组件仅适用于其他组件属性。因此，您需要制作一个自定义组件，并为该组件的模式属性设置动画。然后在组件内部，在 update() 中，根据模式属性设置相机的 threejs 旋转。

AFRAME.registerComponent('camcontrol',{
        schema: {
            rot: { type: 'vec3'} ,
            animactive: { type: 'boolean', default: false } },
        init: function(){
            let self = this;
            this.el.addEventListener('loaded', function(){
                self.cam3d = self.el.object3D.children[0];
                self.cam3d.name = "camera"
                console.log('cam3d', self.cam3d);
                // Clone the camera, used for looking at new targets
                self.dummyCam3d = self.cam3d.clone();
                self.el.object3D.add(self.dummyCam3d);
                // Create a new group. make it a child of the dummyCam
                self.dummyUp = new THREE.Object3D();
                self.dummyCam3d.add(self.dummyUp);
                self.dummyUp.translateY(1.0);
                console.log('dummyCam3d', self.dummyCam3d);
                self.loaded = true;
            });
            this.el.addEventListener('animationcomplete__look', function(){
                self.data.animactive = false;
                console.log('anim complete. rotation: ', self.cam3d.rotation);
            });
        },
        update: function(){
            if (this.data.animactive){
                let rot = this.data.rot;
                // console.log('update: rot ', rot);
                let euler = new THREE.Euler( rot.x, rot.y, rot.z, 'ZXY');
                this.cam3d.setRotationFromEuler(euler);
            }

        },
        lookAnimation: function(pos){
            console.log('camcontrol.lookAnimation', pos);
            let camRot = this.cam3d.rotation;
            let camWP = new THREE.Vector3();            
            this.cam3d.getWorldPosition(camWP);

            this.dummyCam3d.position = camWP;
            // this.dummyCam3d.up = new THREE.Vector3(0,1,0);
            this.dummyCam3d.lookAt(pos.x, pos.y, pos.z);

            let dumCamRot = this.dummyCam3d.rotation;

            console.log("dumCamRot", dumCamRot );
            this.data.animactive = true;    
            this.el.setAttribute('animation__look', { from: {x: camRot.x, y: camRot.y, z: camRot.z}, to:{x: dumCamRot.x, y:  dumCamRot.y, z: 0} });
            this.el.emit('camlook');
        }
    });

<a-scene>
        <a-entity id="button1" geometry="primitive: box" position="1 0 -5" class="clickable" material="color: tomato" button3d></a-entity>
        <a-entity  id="button2" geometry="primitive: octahedron; radius: 0.2" position="-4 0 -3" class="clickable" material="color: #4466BB" button3d></a-entity> 
        <a-entity  id="button3" geometry="primitive: sphere; radius: 0.2" position="2 0 -2" class="clickable" material="color: green" button3d></a-entity> 
        <a-entity  id="button4" geometry="primitive: cone; radius: 0.2" position="-3 0 -8" class="clickable" material="color: purple" button3d></a-entity>
        <a-entity  id="button5" geometry="primitive: icosahedron; radius: 0.2" position="0 0 0" class="clickable" material="color: blue" button3d></a-entity> 

        <a-sky color="#bbddff"></a-sky>

        <a-entity id="camrig" position="0 0 0" ></a-entity>
            <a-entity id="camera" position="0 0 0" fov="100" camera look-controls camcontrol
            animation__look="property: camcontrol.rot; startEvents: camlook; dur:500"></a-entity>
        </a-entity>

        <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .clickable"></a-entity>
    </a-scene>

故障here

在我的代码中，相机可以在点击时旋转，但它会立即将旋转设置为 90 度，我怎样才能让它成为一个平滑的过渡

In my code the camera can rotate on click but it instantaneously sets the rotation to 90 degree how can i make it to be a smooth transition

javascript

three.js

aframe