Three.js-围绕点旋转相机

时间:2020-08-21 11:31:23

标签: javascript three.js 3d rotation trackball

我有与轨迹球类似的自定义导航控件,但具有其他功能。 我要实现的功能之一是指定相机的旋转中心,当我们平移相机时,旋转将保持在指定点附近。

这是我的update()函数的代码:

update(): this {
    const camera = this.camera
    if (this._enabled && camera && this._isInvalid) {
        const cameraObject = camera.object
        // validate all navigation changes
        {
            const {
                offset,
                panOffset,
                axis,
                tempVector3,
                tempSpherical,
                deltaRotation,
                deltaPan,
                quaternion
            } = this.computeHelpers

            // offset vector from eye to target
            offset.subVectors(this._eye, this._target)

            // apply rotation
            if (deltaRotation.isInvalid) {
                const { x: theta, y: phi } = deltaRotation.get()
                // rotate around screen-space y-axis
                if (theta) {
                    axis.set(0, 1, 0).applyQuaternion(cameraObject.quaternion)
                    quaternion.setFromAxisAngle(axis, theta)
                    offset.applyQuaternion(quaternion)
                    this._up.applyQuaternion(quaternion)
                }
                // rotate around screen-space x-axis
                if (phi) {
                    axis.set(1, 0, 0).applyQuaternion(cameraObject.quaternion)
                    quaternion.setFromAxisAngle(axis, phi)
                    offset.applyQuaternion(quaternion)
                    this._up.applyQuaternion(quaternion)
                }
                // mark compute objects as valid
                deltaRotation.set({ x: 0, y: 0 })
                deltaRotation.isInvalid = false
            }

            // apply panning
            if (deltaPan.isInvalid) {
                cameraObject.updateMatrix()
                const matrix = cameraObject.matrix
                const { x: deltaPanX, y: deltaPanY } = deltaPan.get()

                // pan screen space x-direction
                {
                    tempVector3
                        // get x-column of local transform matrix
                        .setFromMatrixColumn(matrix, 0)
                        .multiplyScalar(deltaPanX)
                    panOffset.add(tempVector3)
                }
                // pan screen space y-direction
                {
                    tempVector3
                        // get y-column of local transform matrix
                        .setFromMatrixColumn(matrix, 1)
                        .multiplyScalar(-deltaPanY)
                    panOffset.add(tempVector3)
                }
                this._target.add(panOffset)

                // mark compute objects as valid
                panOffset.set(0, 0, 0)
                deltaPan.set({ x: 0, y: 0 })
                deltaPan.isInvalid = false
            }

            // assemble new eye (camera) position
            this._eye.addVectors(offset, this._target)
            this._eyeSpherical.setFromVector3(this._eye)
            this._direction.copy(this._eye).normalize()
        }

        // update camera position
        cameraObject.position.copy(this._eye)
        cameraObject.up.copy(this._up)
        cameraObject.lookAt(this._target)

        // mark the controller as valid
        this._isInvalid = false
    }
    return this
}

如何申请翻译?

预期结果: enter image description here

非常感谢

0 个答案:

没有答案