在 Threejs 中将鼠标移动转换为相机移动

Question

我正在尝试实现鼠标抓取对象并移动它。所以我将鼠标 x 和 y 偏移量转换为 threejs 相机 x 和 z 位置，如下所示：

this.moveCamera = function (x, y) {
    // horizontal movement
    if (x != 0 && y == 0) {
        var move = x / 1000 * camera.position.y
        camera.position.x += move
        camera.position.z += move
    }

    // vertical movement
    if (x == 0 && y != 0) {
        var move = y / 500 * camera.position.y
        camera.position.x += -move
        camera.position.z += +move
    }
}

其中 x 是旧的 x 鼠标位置减去新的 x 鼠标位置（和 y 相同）：

if (dragStart) {
    var dragEnd = PickerGame.getPoint(event)
    GameScene.moveCamera(dragStart.x - dragEnd.x, dragStart.y - dragEnd.y)
    dragStart = dragEnd
}

问题是水平和垂直移动很容易，但我不知道如何实现对角线类型的移动。我应该怎么做才能将对角鼠标移动转换为相机对角移动？

这是相机初始化代码：

cameraY = 24,
initCamera = function (w, h) {
    var viewAngle = 22,
        near = 1,
        far = 1000

    camera = new THREE.PerspectiveCamera(viewAngle, w / h, near, far)
    camera.rotation.order = 'YXZ'
    camera.rotation.y = -Math.PI / 4
    camera.rotation.x = Math.atan(-1 / Math.sqrt(2))
    camera.position.y = cameraY
    camera.scale.addScalar(1)
    scene.add(camera)
    scene.add(new THREE.AmbientLight(0x777777))
}

这是工作 jsfiddle 示例：https://jsfiddle.net/brbfdLo5/1/

Answer 1

这个

    radiansX = 2 * Math.PI + Math.atan(-1 / Math.sqrt(2)),
    radiansY = 2 * Math.PI - Math.PI / 4,
    degreesX = radiansX * (180 / Math.PI),
    degreesY = radiansY * (180 / Math.PI),
    initCamera = function (w, h) {
        var viewAngle = 22,
            near = 1,
            far = 1000

        camera = new THREE.PerspectiveCamera(viewAngle, w / h, near, far)
        camera.rotation.order = 'YXZ'
        camera.rotation.y = radiansY
        camera.rotation.x = radiansX

        console.log(degreesX)
        console.log(degreesY)

        camera.position.y = cameraY
        camera.scale.addScalar(1)
        scene.add(camera)
        scene.add(new THREE.AmbientLight(0x777777))
    }

还有这个

this.moveCamera = function (x, y) {
    x = -x
    y = -y * 2

    var angleX = degreesX,
        angleY = degreesY


    var vector = new THREE.Vector3(x, 0, y),
        mRx = new THREE.Matrix3(),
        mRy = new THREE.Matrix3(),
        cosX = Math.cos(angleX),
        sinX = Math.sin(angleX),
        cosY = Math.cos(angleY),
        sinY = Math.sin(angleY)

    mRx.set(
        1, 0, 0,
        0, cosX, -sinX,
        0, sinX, cosX
    )

    mRy.set(
        cosY, 0, sinY,
        0, 1, 0,
        -sinY, 0, cosY
    )

    vector.applyMatrix3(mRx)
    vector.applyMatrix3(mRy)

    camera.position.x -= vector.x * camera.position.y / 1000
    camera.position.z += vector.z * camera.position.y / 1000
}

成功了

Answer 2

这应该可以解决问题。我已经删除了* camera.position.y，因为当你在场景中变得更高时，这最终会使相机移动得更快，然后当你在场景中击中较低的负值时，它会朝着与预期相反的方向移动。

this.moveCamera = function (x, y) {
    var xmove = x / 32;// * camera.position.y
    var ymove = y / 32;// * camera.position.y

    camera.position.x += xmove;
    camera.position.y -= ymove;
}

jsFiddle: https://jsfiddle.net/elindie/4xu49sLv/4/