easy-three
Eng日本語

create.group

create.group(props : Object) : Group

props - 設定オブジェクト。
  • position (Array) : 位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : 回転 (デフォルト : [0, 0, 0])。
  • children (Array<Object3D>) : 子要素の配列 (デフォルト : [])
  • autoAdd (Boolean) : 自動でシーンに追加 (デフォルト : true)。

グループを作成してシーンに追加します。
引数で最初に追加する子要素を指定できます。

グループを使うことで、複数のオブジェクトをまとめて操作することができます。
特に、オブジェクト間の相対的な位置を保ったまま移動させる場合や、 オブジェクトをその原点以外を中心に回転させる場合に便利です。

オブジェクトをグループに追加する場合、 そのオブジェクト自身はシーンに追加する必要がありません。
グループをシーンに追加した時点でそのグループに含まれる全てのオブジェクトがシーンに追加されます。
グループに含まれるオブジェクトは autoAdd オプションを false に設定してください (下の例を参照)。

コードの例

既存オブジェクトのグループへの追加

children に追加するオブジェクトを指定してグループを作成します。

const { camera, create, animate } = init()
camera.position.set(0, 2, 2);
create.ambientLight();
create.directionalLight();

const cube1 = create.cube({
  position: [-1, 0, 0],
  autoAdd: false,
});
const cube2 = create.cube({
  position: [1, 0, 0],
  autoAdd: false,
});

const group = create.group({
  children: [cube1, cube2],
})

animate(({ delta }) => {
  group.rotation.y += delta;
});

グループに直接追加

グループ作成時に children 部分で直接オブジェクトを作成しつつ追加することもできます。

const { camera, create, animate } = init()
camera.position.set(0, 2, 2);
create.ambientLight();
create.directionalLight();

const group = create.group({
  children: [
    create.cube({
      position: [-1, 0, 0],
      autoAdd: false,
    }),
    create.cube({
      position: [1, 0, 0],
      autoAdd: false,
    }),
  ],
});

animate(({ delta }) => {
  group.rotation.y += delta;
});

既存のグループへの追加

グループを作成した後にオブジェクトを追加することもできます。
create.group の戻り値は Three.js の Group オブジェクトです。

const { camera, create, animate } = init()
camera.position.set(0, 2, 2);
create.ambientLight();
create.directionalLight();

const group = create.group();

const cube1 = create.cube({
  position: [-1, 0, 0],
  autoAdd: false,
});
const cube2 = create.cube({
  position: [1, 0, 0],
  autoAdd: false,
});

group.add(cube1, cube2);

animate(({ delta }) => {
  group.rotation.y += delta;
});