I have been exploring ways to create a series of clickable cubes that can be highlighted, allowing for color changes, texture additions, or other manipulations. After reviewing the source code of various interactive examples on , I noticed that each example uses different methods to create and select objects within the scene. Since I am new to JavaScript, I might be overlooking something simple.
To achieve this, I decided to utilize an Object3D class called "blocks" to store all the cubes:
blocks = new THREE.Object3D()
Using a nested loop, I aimed to generate a 9x9 array of cubes starting at coordinates (0,0,0) with slight spacing between them. These cubes are then added to the "blocks" object and subsequently added to the scene:
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);
When running this code, I successfully render the cubes. However, when utilizing raycasting to interact with the cubes and attempting to select individual objects, I encounter difficulties due to all children having the same ID as the first object created:
var intersects = raycaster.intersectObjects(blocks.children, true);
I have experimented with alternative approaches such as storing objects in regular arrays or dynamically creating unique variables for each element, but these methods still present challenges in selecting and manipulating individual objects.
My main question is: How can I efficiently create multiple Mesh objects in a manner that allows for individual selection and manipulation without treating them as a collective group?