Javascript 如何在Three.js中通过鼠标拖动更改相机位置？

我制作了一个劳力士立方体，每层之间的“Z轴”不同。现在我想改变相机的位置，这样我就可以检查几何体，这正是我所期望的。我的问题是如何在拖动窗口时更改相机位置，并且应该能够根据鼠标事件操纵每个圆锥体的旋转

以下是我的JSFIDLE链接：

示例代码，但请确保访问JSFIDLE以了解我的问题的详细信息：

for ( var i = 0; i <nSize; i++)
{
    var k = i%10,
        j = (i-k)/10;

    j = j*2 - 10;
    k = k*2 - 10;

    var cone1 = lc_relationship.sensor1[i].Geometry; 
    scene.add(cone1);
    var cone2 = lc_relationship.sensor2[i].Geometry;
    scene.add(cone2);
    var cone3 = lc_relationship.sensor3[i].Geometry;
    scene.add(cone3);
    cone1.position.set(j, k, lc_relationship.sensor1[i].z_cordinate);
    cone2.position.set(j, k, lc_relationship.sensor2[i].z_cordinate);
    cone3.position.set(j, k, lc_relationship.sensor3[i].z_cordinate);
}

for（var i=0；i我使用空（null）网格来添加对象，而不是场景：网格

mesh = new THREE.Mesh(new THREE.Geometry());
scene.add(mesh);
/*[...]*/
mesh.add(cone1);
/*[...]*/
mesh.add(cone2);
/*[...]*/
mesh.add(cone3);
/*[...]*/

并添加此选项以旋转此网格：

var screenW = window.innerWidth;
var screenH = window.innerHeight; /*SCREEN*/
var spdx = 0, spdy = 0; mouseX = 0, mouseY = 0, mouseDown = false; /*MOUSE*/
document.addEventListener('mousemove', function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
}, false);
document.body.addEventListener("mousedown", function(event) {
    mouseDown = true
}, false);
document.body.addEventListener("mouseup", function(event) {
    mouseDown = false
}, false);
function animate() {    
    spdy =  (screenH / 2 - mouseY) / 40;
    spdx =  (screenW / 2 - mouseX) / 40;
    if (mouseDown){
        mesh.rotation.x = spdy;
        mesh.rotation.y = spdx;
    }
}

测试：
我使用空（空）网格来添加对象，而不是场景：网格

mesh = new THREE.Mesh(new THREE.Geometry());
scene.add(mesh);
/*[...]*/
mesh.add(cone1);
/*[...]*/
mesh.add(cone2);
/*[...]*/
mesh.add(cone3);
/*[...]*/

并添加此选项以旋转此网格：

var screenW = window.innerWidth;
var screenH = window.innerHeight; /*SCREEN*/
var spdx = 0, spdy = 0; mouseX = 0, mouseY = 0, mouseDown = false; /*MOUSE*/
document.addEventListener('mousemove', function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
}, false);
document.body.addEventListener("mousedown", function(event) {
    mouseDown = true
}, false);
document.body.addEventListener("mouseup", function(event) {
    mouseDown = false
}, false);
function animate() {    
    spdy =  (screenH / 2 - mouseY) / 40;
    spdx =  (screenW / 2 - mouseX) / 40;
    if (mouseDown){
        mesh.rotation.x = spdy;
        mesh.rotation.y = spdx;
    }
}

测试：
你的回答太好了，我很高兴回复你。你能帮我整理一下，如何根据JSON中的ID（这里是java对象）同时选择和旋转层上的单个圆锥体及其子或父圆锥体。提前谢谢。Tnxs！将它们放在数组中，ej:/var miCones=[]；mesh.add（cone1）；miCones.push（cone1）；mesh.add（cone2）；miCones2.push（cone2）；[…]这正是我的意图，我想选择单个圆锥体和它的子对象作为单个选择。例如：如果我选择第1层上的圆锥体1并旋转，它在第2层上的子对象和它在第3层上的子对象应该被选择并一次旋转。如果我选择第2层上的圆锥体，如果它在第1层上有父对象，它也会被选择应选择ected及其在第3层中的子对象进行旋转。与wise一样，第3层上的圆锥体必须与其在前一层上的父对象一起进行旋转。这些选择取决于JSON[javascript object here]。我希望你明白我的意思。可能：mesh.add（cone1）；cone1.add（cone2）；cone2.add（cone3）？我没听懂你的话，伙计，你是在问我还是在建议我？如果你看过Javascript对象，你会知道锥体之间的关系如何。我尽了最大努力，但运气不佳：（你的回答太好了，我很高兴回复你。你能帮我整理一下，如何根据JSON中的ID（这里是java对象）同时选择和旋转层上的单个圆锥体及其子或父圆锥体。提前谢谢。Tnxs！，将它们放在数组中，ej:/var miCones=[]；mesh.add（cone1）；miCones.push（cone1）；mesh.add（cone2）；miCones2.push（cone2）；[…]这正是我的意图，我想选择单个圆锥体和它的子对象作为单个选择。例如：如果我选择第1层上的圆锥体1并旋转，它在第2层上的子对象和它在第3层上的子对象应该被选择并一次旋转。如果我选择第2层上的圆锥体，如果它在第1层上有父对象，它也会被选择应选择ected及其在第3层中的子对象进行旋转。与wise一样，第3层上的圆锥体必须与其在前一层上的父对象一起进行旋转。这些选择取决于JSON[javascript object here]。我希望你明白我的意思。可能：mesh.add（cone1）；cone1.add（cone2）；cone2.add（cone3）？我没听懂你的话，伙计，你是在问我还是在建议我？如果你看过Javascript对象，你会知道锥体之间的关系如何。我尽了最大努力，但运气不佳：(