three.js raycaster.intersectObjectを使用してObject3Dの子を選択

Question

私はそれらをハイライトするためにクリックできる一連のキューブを作ろうとしています。これにより、色を変更したり、テクスチャを追加したり、何らかの方法で操作したりすることができます。すべてのインタラクティブな例のソースコードをhttps://threejs.org/examples/に見てきましたが、各例ではシーン内でオブジェクトを作成して選択する方法が少しずつ異なるようです。私はJavaScriptを使用することに慣れていないので、多分私は単純なものを欠いている。

は私は（0,0,0）から始まる立方体の9×9アレイを作成するforループと連携使用してい

blocks = new THREE.Object3D() 

立方体の全てを格納するという名前のブロックObject3Dクラスを作成しますそれらの間にわずかな隙間があり、それらをブロックに追加（）し、シーンにブロックを追加します。例：（キューブサイズ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) 

このコードを実行すると、レンダリングされたことがわかります。私はオブジェクトの配列を必要とする.intersectObjects（）にraycasterを使用します。ここでは、ただ1つのオブジェクトを選択するという問題に直面しています。

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（）しようとすると、動作しません。

私は、各要素を生成し、それらを保持するオブジェクト配列を作成する代わりに反復的にシーンに追加しようとしましたが、それでも同様の効果があります。私は定期的な配列でそれらを格納しようとし、再帰的に.intersectObject（）配列を検索するために真のパラメータを使用して、それをクリックしたときにすべてのオブジェクトを選択します。

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

私は各要素を保持するための81個のユニークな変数を作成し、静的81個の変数の配列（必死オプション）を入力すると考えられてきたが、私は動的にループが保持するための変数名を作成するための安全な方法を見つけることができませんオブジェクト。この方法は、異なる名前付き変数を作成するためのソリューションとしてstackoverflowに投稿されましたが、変数を作成するようなことはありません。

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

主な質問：どのように私は繰り返し、私はそれらを選択し、グループとして個別にではなく、それらを操作することができ、制御可能な方法で複数のメッシュの（静的無分別られる各変数を入力するに十分な）を作成することができますか？

Answer 1

私はあなたがこの問題に会った理由は、あなたのMeshを構築するMaterialを同じ参照だと思う、あなたはblocks.childrenで単一のオブジェクトと交差していますが、材料の他のいくつかのプロパティを変更したときに材料があまりにも変わってしまう使う人メッシュんでした。

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; 
    } 
} 

私のために働きます。