Question

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

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

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

立方体还可以。来自obj文件的对象一次性改变它的颜色（但它们不应该，这是我当前的问题）。（正确检测对象的所有点击。检查调试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);

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

1 个答案: