Threejs：从 .obj 上传场景和对象操作

Question

我有一个场景。 https://dl.dropboxusercontent.com/u/8913924/test2/index.html

大多数对象都是从单个 .obj 文件加载的。 加上 2 个手工制作的立方体。

点击对象 - 它应该改变它的颜色。

立方体没问题。 来自 obj 文件的对象一次更改其颜色（但它们不应该，这是我当前的问题）。 （对象上的所有点击都被正确检测到。检查 debug concole。）

需要您的帮助和建议。

添加 2 个手工制作的红色方块：

var geometry = new THREE.CubeGeometry(10,10,10);
            var material = new THREE.MeshBasicMaterial({color: 0xff0000});

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

            mesh.position.z = 125;
            mesh.name = 'cube1';

            scene.add(mesh);

            geometry = new THREE.CubeGeometry(10,10,10);
            material = new THREE.MeshBasicMaterial({color: 0xff0000});

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

            mesh.position.z = 175;
            mesh.name = 'cube2';

            scene.add(mesh);

从 .obj 加载对象：

    var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
    var object = event.content;

    // cubes are already here   
    scene.add(object);
}); loader.load( 'qwerty.obj', 'qwerty.mtl' );

更改适当对象的颜色：

var intersects = raycaster.intersectObjects( scene.__objects );
if (intersects.length > 0) {
    // got the correct object with proper id
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
}

Answer 1

看起来您正在将整个 .obj 场景添加为一个对象 (scene.add(object))。那么，当您与场景对象相交时，intersects[0].object 就是您的整个 .obj，因为这是您添加到场景中的内容。

我不熟悉 OBJMTLLoader，但您的第一个回调中的 event.content 似乎有一个 children 属性。尝试这样做：

var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;

// cubes are already here
for(var i = 0; i < object.children.length; i++)   
    scene.add(object.children[i]);
}); loader.load( 'qwerty.obj', 'qwerty.mtl' );

编辑：

使用它并通过克隆材料使其工作。基本上，加载网格时，它们都共享相同的材质定义（这很好，因为它可以节省资源）。但是，如果要独立更改材料属性，则需要替换：

intersects[0].object.material.color.setHex(Math.random() * 0xffffff);

通过这个：

if(!intersects[0].object.ownMaterial) intersects[0].object.material = intersects[0].object.material.clone();
intersects[0].object.ownMaterial = true;
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);