Threejs旋转多个对象与鼠标移动事件

我想旋转多个对象，但只有一个对象都可以旋转。 这里是我的代码：Threejs旋转多个对象与鼠标移动事件

1.creatgeo乐趣

function createScene(geometry, scale, material) { 

geometry.computeTangents(); 

creatgeo = new THREE.Mesh(geometry, material); 

creatgeo.scale.x = creatgeo.scale.y = creatgeo.scale.z = scale; 

scene.add(creatgeo);

}

在功能上的init（）函数

var jgdframe = new THREE.JSONLoader(); 
jgdframe.load("obj/jgd/GALD-JGD-frame.json", function(geometry) { createScene(geometry, 1, framemat) }); 
var jgdlogo = new THREE.JSONLoader(); 
jgdlogo.load("obj/jgd/GALD-JGD-logo.json", function(geometry) { createScene(geometry, 1, logomat) }); 
var jgdlight = new THREE.JSONLoader(); 
jgdlight.load("obj/jgd/GALD-JGD-light.json", function(geometry) { createScene(geometry, 1, lightmat) });

3.添加事件2.使用JSON装载机的init（）

document.addEventListener('mousemove', onDocumentMouseMove, false);

4.to渲染功能渲染（）

function render() { 

var ry = mouseX * 0.0003, rx = mouseY * 0.0003; 

if(creatgeo) { 

    creatgeo.rotation.y = ry; 
    creatgeo.rotation.x = rx; 

}; 


camera.lookAt(scene.position); 

renderer.render(scene, camera); 

}

我在SENCE放置三个对象，但只有一个对象都可以旋转。如何修复它。谢谢大家！通过您的代码样本

来源

2015-06-19 laishi

寻找我可以指出一些更正：

命名为creatgeo变量不是预先初始化。如果每次调用函数createScene()时它都会在全局范围内泄漏。这就是为什么只有最后加载的对象是动画。
你应该给予任何价值，他们之前声明任何变量：var creatgeo;。这使变量仅在函数的本地范围内可用。虽然这不足以解决您的问题。您需要声明一个Array或一个Object，以便缓存由jsonLoader加载的所有模型。

像这样的东西应该工作：

var objects = []; // I suggest renaming "creatgeo" to "objects" 

function updateScene(id, geometry, scale, material) { 
    geometry.computeTangents(); 
    objects[id]= new THREE.Mesh(geometry, material); 
    objects[id].scale.x = objects[id].scale.y = objects[id].scale.z = scale; 
    scene.add(objects[id]); 
}

还注意到，你不需要每次加载对象时创建一个装载机，这是低效和减缓浏览器在加载时，还需要更多的内存分配。
注意，您可以使用由出口商工具在你的JSON对象定义的自定义材料。如果您的模型有材料定义，请使用装载器材料。如果不是这样的话。

实施例：

var jsonLoader = new THREE.JSONLoader(); 

jsonLoader.load( 
    "obj/jgd/GALD-JGD-frame.json", 
    function(geometry, material) { 
     createScene(0, geometry, 1, framemat) 
    }); 

jsonLoader.load( 
    "obj/jgd/GALD-JGD-logo.json", 
    function(geometry, material) { 
     createScene(1, geometry, 1, logomat) 
    }); 

jsonLoader.load( 
    "obj/jgd/GALD-JGD-light.json", 
    function(geometry, material) { 
     createScene(2, geometry, 1, lightmat) 
    });

可以进一步通过增加ID的使用循环和从阵列检索路径字符串借此。
观察IIFE（立即调用函数表达式）。这在这种构造中是绝对必要的。 IIFE创建一个闭包，以便在当前迭代中保留id。否则，所有的加载器都会收到代码乱码的最后一个值。

例子：

var jsonLoader = new THREE.JSONLoader(), 
    paths = [ 
     "obj/jgd/GALD-JGD-frame.json", 
     "obj/jgd/GALD-JGD-logo.json", 
     "obj/jgd/GALD-JGD-light.json" 
    ], 
    objNum = paths.length; // Cache obects.length 


for (var id = 0; id < paths.length; id++) { 
    (function(){ // IIFE start 

     // Basic loader 
     jsonLoader.load(paths[id], 
      function(geometry, material) { 
       createScene(id, geometry, 1, material) 
      } 
     ); 

    })(); // IIFE end 
}

最后，您需要动画的每个对象。

这又在渲染循环：

for (var id = 0; id < objNum; id++) { 
    if(objects[id]) { 
     objects[id].position.set(x, y, z); 
     objects[id].rotation.set(rx, ry, rz); 
    } 
}

来源

2015-06-19 16:40:35

Threejs旋转多个对象与鼠标移动事件

回答

相关问题