在将更改应用于轨道控件后进行缩放时,相机会自行更改位置

时间:2018-07-16 13:44:21

标签: javascript three.js 3d

我最近发布了类似的问题,现在也面临类似的问题。

我按照以下方式根据摄像机目标计算旋转度:

if (cameraTarget !== null) {
   const distance: number = new THREE.Vector3().subVectors(this.camera.position, cameraTarget).length();                              
   const normal: Vector3 = new THREE.Vector3(0,0,-1).applyQuaternion(this.camera.quaternion);
   this.orbitControls.target = new THREE.Vector3().add(this.camera.position).add(normal.setLength(distance));
}

但是,当我在没有设置相机目标的情况下再次更改旋转角度时,在变焦时相机的位置也会发生变化。这是进行旋转的代码:

public tweenCameraTo(position: THREE.Vector3, rotation: THREE.Vector3, cameraTarget: THREE.Vector3 = null, duration: number = null): void {

        if (this.currentTween) {
            this.currentTween.stop();
        }

        const cam = this.camera;
        const currentPos = cam.position.clone();
        const currentRot = cam.rotation.clone();

        const epsilon = {
            px: currentPos.x,
            py: currentPos.y,
            pz: currentPos.z,
            rx: currentRot.x,
            ry: currentRot.y,
            rz: currentRot.z,
            z: cam.zoom
        };

        const target = {
            px: position.x,
            py: position.y,
            pz: position.z,
            rx: rotation.x,
            ry: rotation.y,
            rz: rotation.z,
            z: 1
        };

        if (duration == null) {
            duration = APP_CONFIG.surface_anim_duration;
        }

        this.currentTween = new TWEEN.Tween(epsilon)
                .to(target, duration)
                .onUpdate(() => {
                    cam.position.set(epsilon.px, epsilon.py, epsilon.pz);
                    cam.rotation.set(epsilon.rx, epsilon.ry, epsilon.rz);
                    this.orbitControls.dispatchEvent({type: 'change', target: null});

                    if (cameraTarget == null) {
                        cam.translateZ(-2.8);
                        this.orbitControls.target = cam.position.clone();
                        cam.translateZ(2.8);
                    } else {
                        this.orbitControls.target.copy(cameraTarget);
                    }

                    cam.zoom = epsilon.z;

                    cam.updateProjectionMatrix();

                    this.orbitControls.dispatchEvent({type: 'change', target: null});

                    this.orbitControls.enabled = false;
                })
                .onComplete(() => {
                    this.orbitControls.enabled = true;
                    this.currentTween = null;
                    // as done in https://stackoverflow.com/questions/51211900/calculate-camera-target-for-orbit-controls-from-given-rotation-and-position-of-c/51214533#51214533
                    if (cameraTarget !== null) {
                        const distance: number = new THREE.Vector3().subVectors(this.camera.position, cameraTarget).length();
                        const normal: Vector3 = new THREE.Vector3(0,0,-1).applyQuaternion(this.camera.quaternion);
                        this.orbitControls.target = new THREE.Vector3().add(this.camera.position).add(normal.setLength(distance));
                    }
                    // cam.lookAt(new THREE.Vector3(1,1,1));

                })
                .easing(TWEEN.Easing.Quadratic.InOut);
        this.currentTween.start();
    }

0 个答案:

没有答案