💡
【Three.js】group化した特定のオブジェクトを個別に操作する
結論
- childrenを取得してindexを指定するだけ
何がしたいのか
- group化した特定のオブジェクトを個別に操作したい
- groupの中でも、このオブジェクトだけ色や座標などを変えたい、など
まとめ
let obj = new THREE.Group();
obj.add(mesh);
obj.add(mesh2);
//children取得
const children = obj.children;
//groupの中の3Dオブジェクトを取得
const mesh = children[0];
const mesh2 = children[1];
//特定のmeshだけ色を変えるなどできる
mesh.material.color=new THREE.Color("white");
mesh、mesh2は用意されてください。
調べかた
ChatGPTに聞きました。
// Assuming you have already created the 'this.obj' group
// ...
// Access the children of the group
const children = this.obj.children;
// Assuming 'mesh' is the first child and 'mesh2' is the second child
const mesh = children[0];
const mesh2 = children[1];
// Modify the materials of mesh and mesh2 individually
const materialForMesh = mesh.material;
const materialForMesh2 = mesh2.material;
// Now you can manipulate the materials as you wish
materialForMesh.color.set("red"); // Change color for mesh
materialForMesh2.color.set("blue"); // Change color for mesh2
In this example, we access the children property of the this.obj group to get references to mesh and mesh2. Then, you can modify the materials of each mesh separately by accessing their material property and making changes to them, such as changing the color as demonstrated.
Remember to replace the index numbers (0 and 1) with the actual order of your objects in the group if they are in a different order.
参考ページ
Discussion