Question

我试图抓住对象并移动它。因此，我将鼠标x和y偏移转换为三个相机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

这应该可以解决问题。我删除了* 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/

Answer 2

此

    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
}

让它发挥作用

在Threejs中将鼠标移动到相机移动

2 个答案: