メッシュ（物体）をグループ化 ～Webサイトで3Dコンテンツ(Three.js)デザイン

• ホーム
• JavascriptのWebGLコンテキストで3Dコンテンツを作る(three.jsを使用)
• メッシュ（物体）をグループ化 ～Webサイトで3Dコンテンツ(Three.js)デザイン

Three.jsで3Dオブジェクトをグループ化（まとめて管理）する(Three.js[r145]を使用)

マウス左ドラッグで回転、右ドラッグで移動、ホイールで拡大縮小できます。

グループを作って、100個のメッシュをグループに追加しています。
グループのスケールを変更すると、100個のメッシュに適用されます。
グループを回転すると、100個のメッシュも回転します。

//グループの作成
group=new THREE.Group;

//メッシュ100個の作成
let mesh=[];
for(let i=0;i<100;i++){
  mesh[i]=new THREE.Mesh(sphereGeometry,material[Math.floor(Math.random()*material.length)]);
  mesh[i].castShadow=true;
  mesh[i].receiveShadow=true;
  //なるべく外側に偏らせる処理
  let r=Math.sqrt(Math.sqrt(Math.random()))*40+10;
  let x=Math.random()*r;
  if(Math.random()<0.5){x=-x;}
  let y=Math.random()*Math.sqrt(r*r-x*x);
  if(Math.random()<0.5){y=-y;}
  let z=Math.sqrt(r*r-x*x-y*y);
  if(Math.random()<0.5){z=-z;}
  mesh[i].position.set(x,y,z);
  //メッシュをグループに追加
  group.add(mesh[i]);
}