將鼠標移動到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/