В моем коде камера может поворачиваться при щелчке, но она мгновенно устанавливает поворот на 90 градусов, как я могу сделать его плавным переходом - PullRequest
Новая
       43

В моем коде камера может поворачиваться при щелчке, но она мгновенно устанавливает поворот на 90 градусов, как я могу сделать его плавным переходом

0 голосов
/ 09 октября 2019

Я хочу создать приложение, в котором я могу поворачивать камеру для просмотра конкретной сущности, но моя камера вращается мгновенно, как мне сделать плавный переход

Я пытался прикрепить компонент анимации к камере, но из-за внешнего видаКомпонент -controls вращение отменяется

( нажмите здесь ), чтобы увидеть код

1 Ответ

0 голосов
/ 10 октября 2019

Поскольку элементы управления Look переопределяют компонент вращения на камере, вы не можете устанавливать или анимировать вращение напрямую.

Одним из решений было бы отключить элементы управления Look (или, возможно, удалить их), а затем выполнить анимациюна вращение. Затем, когда он завершится, включите (или добавьте обратно) компонент элементов управления внешним видом.

Другое решение заключается в использовании управления камерой THREEjs для настройки и анимации камеры. Компонент анимации работает только с другими свойствами компонента. Поэтому вам нужно создать пользовательский компонент и анимировать свойство схемы этого компонента. Затем внутри компонента в update () вы устанавливаете поворот камеры на три шага из свойства схемы. 

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>

глюк здесь

...