javascript - Three.js 使用 raycaster.intersectObject 选择 Object3D 的子级

Question

我正在尝试制作一系列可以单击以突出显示它们的立方体。这将使我能够改变它们的颜色或添加纹理或以某种方式操纵它们。我已经浏览了https://threejs.org/examples/中所有交互式示例的源代码。似乎每个示例都使用略有不同的方式来创建和选择场景中的对象。不过我不习惯使用 javascript，所以也许我错过了一些简单的东西。

我创建一个名为blocks的Object3D类来存储所有的立方体

blocks = new THREE.Object3D()

我使用 for 循环创建一个 9 x 9 的立方体数组，从 (0,0,0) 坐标开始，它们之间有轻微的间隙，然后将它们添加到 block 中，并将 block 添加到场景中。示例:(立方体大小 2,2,2)

   function stack(mx,my,mz){
        for (var i = 0; i < 9; i++){
          line(mx,my,mz);
          mz += 3;
        }
    }

    function line(mx,my,mz){
        for (var i = 0;i<9;i++){
          var block = new THREE.Mesh( Geometry, Material);
          block.position.x = mx;
          block.position.y = my;
          block.position.z = mz;

          blocks.add(block);
          mx+=3;
        }
    }
    stack(mx,my,mz) 
    scene.add(blocks)

当我运行此代码时，我可以看到它们呈现。我使用 raycaster 来 .intersectObjects() ，它需要一个对象数组。这就是我遇到仅选择一个对象的问题的地方。

function onDocumentMouseDown(event) {

    var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    **var intersects = raycaster.intersectObjects(blocks.children, true);**

    if (intersects.length > 0) {
        intersects[0].object.material.transparent = true;
        other code stuff blah blah blah
    {

这将使所有子项都可单击，但它们与创建的第一个对象具有相同的 .id。因此，如果我尝试 .getObjectById() 来更改某些内容，它将不起作用。

我尝试生成每个元素并将它们迭代地添加到场景中，而不是创建一个对象数组来保存它们，它仍然具有类似的效果。我尝试将它们存储在常规数组中，然后使用 true 参数递归搜索 .intersectObject() 数组，但当我单击它时它会选择所有对象。

var intersects = raycaster.intersectObjects(blocks, true);

我考虑过创建 81 个唯一变量来保存每个元素，并静态键入 81 个变量的数组(绝望的选项)，但我找不到一种安全的方法来在 for 循环中动态创建变量名来保存对象。这种方法作为创建不同命名变量的解决方案发布在 stackoverflow 上，但它似乎根本不创建变量。

for (var i=0, i<9, i++){
    var window["cube" + i] = new THREE.Mesh( Geometry, Material)
    {

主要问题:如何以可控的方式迭代创建多个网格(足以静态键入每个变量是不明智的)，以便我可以选择它们并单独而不是作为一个组来操作它们？

Answer 1

我认为您遇到此问题的原因是您引用相同的Material来构建Mesh，您确实在blocks.children<中与单个对象相交，但是当您更改 Material 的某些属性时，使用该 Material 的其他网格也会发生变化。

function line(mx,my,mz){
    for (var i = 0;i<9;i++){
      material = new THREE.MeshLambertMaterial({color: 0xffffff});
      var block = new THREE.Mesh( Geometry, material);
      block.position.x = mx;
      block.position.y = my;
      block.position.z = mz;

      blocks.add(block);
      mx+=3;
    }
}

它对我有用。