3d 将鼠标移动转换为相机移动，三次移动

我试图实现鼠标抓取对象并移动它。所以我将鼠标的x和y偏移量转换为3JS相机的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相同）：

问题是水平和垂直运动很容易，但我不知道如何实现对角线式的运动。我应该如何将鼠标的对角移动转化为相机的对角移动

这是摄像头初始化代码：

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))
}

---

下面是一个正在工作的JSFIDLE示例：

这应该可以做到这一点。我已经删除了

*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： 这个

    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
}

---

让它工作起来

什么是“xMove”和“zMove”？你需要“移动”做什么？我已经将第一个移动更改为xMove，第二个移动更改为zMove，但它并没有正常工作：我已经更新了我的答案并编辑了你的小提琴，希望这不会真的有帮助。Y摄影机位置定义摄影机所在的高度。正如你们在书中看到的，JSFIDLE相机并没有跟随鼠标移动。若要更改对象上的摄影机位置，必须更改x和z。看看我问题中的JSFIDLE（我编辑了它）。在JSFIDLE中，当您将鼠标向右移动时，您正在缩小，对象正在变小。

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
}