three.js wählt Kinder von Object3D unter Verwendung von racaster.intersectObject

Question

Ich versuche, eine Reihe von Cubes zu machen, die angeklickt werden können, um sie hervorzuheben. Dadurch kann ich ihre Farbe ändern oder eine Textur hinzufügen oder sie manipulieren. Ich habe den Quellcode aller interaktiven Beispiele unter https://threejs.org/examples/ durchgesehen und es scheint, dass jedes Beispiel eine etwas andere Art zum Erzeugen und Auswählen von Objekten in der Szene verwendet. Ich bin nicht gewohnt, JavaScript zu verwenden, also vermisse ich vielleicht etwas Einfaches.

I schaffen eine Klasse mit dem Namen Object3D Blöcke alle Würfel zu speichern

blocks = new THREE.Object3D() 

I eine for-Schleife bin mit einem 9 x 9 Matrix von Kuben ab (0,0,0) zu schaffen, koordiniert mit eine kleine Lücke zwischen ihnen, und add() sie zu Blöcken und Add() - Blöcke zur Szene. Beispiel: (Würfelgröße 2,2,2)

Wenn ich diesen Code ausführen, kann ich sie gerendert sehen. Ich benutze racycaster zu .intersectObjects(), das ein Array von Objekten benötigt. Hier stoße ich auf das Problem, nur ein Objekt auszuwählen.

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 
    { 

Dadurch werden alle Kinder anklickbar, aber sie haben die gleiche .id wie das erste Objekt erstellt. Wenn ich also versuche, .getObjectById() zu ändern, funktioniert das nicht.

Ich habe versucht, jedes Element zu generieren und sie der Szene iterativ hinzuzufügen, anstatt ein Objekt-Array zu erstellen, um sie zu halten, und es hat immer noch einen ähnlichen Effekt. Ich habe versucht, sie in einem regulären Array zu speichern und dann True-Parameter zu verwenden, um das Array .intersectObject() rekursiv zu durchsuchen, aber es wählt alle Objekte aus, wenn ich darauf klicke.

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

Ich habe als 81 einzigartige Variablen zu schaffen, jedes Element zu halten und zu statisch ein Array von 81 Variablen (verzweifelt Option) eingeben, aber ich kann nicht einen sicheren Weg, um dynamisch zu erstellen Variablennamen in dem for-Schleife finden zu halten Die Objekte. Dieser Weg wurde im Stackoverflow als eine Lösung zum Erstellen anderer benannter Variablen veröffentlicht, aber es scheint überhaupt keine Variablen zu erstellen.

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

Haupt Frage: Wie kann ich mehrere MESH (genug, um das wäre statisch jede Variable eingeben unklugen) iterativ schaffen eine steuerbare Art und Weise, dass ich sie auswählen und manipulieren sie einzeln und nicht als Gruppe?

Answer 1

Ich denke, der Grund, warum Sie dieses Problem erfüllt ist, dass Sie Material gleichen Bezugs Ihre Mesh zu bauen, haben Sie ein einzelnes Objekt in blocks.children schneiden, aber wenn Sie einige Eigenschaften des Materials andere ändern Netz, die das Material verwenden ändern würde .

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

es funktioniert für mich.