easy-three
Eng日本語

transformControls

オブジェクトの位置、回転、スケールをユーザが操作するための仕組みを提供します。

使用方法

まず、init() の戻り値から transformControls を取得します。

const { create, camera, controls, animate, transformControls } = init();

その後、対象のオブジェクトを引数にして attach() を呼び出すことで有効化されます。

transformControls.attach(object)

オプション引数で、モードや、操作中の OrbitControls の有効化の有無を指定することができます。

transformControls.attach(object, {
  mode: "translate", // "translate" | "rotate" | "scale"
  disableOrbitControls: true, // 操作中の OrbitControls の有効化の有無
})

戻り値のオブジェクトは、three.js のTransformControls のインスタンスです。

サンプルコード

const { camera, create, animate, controls, transformControls } = init();

camera.position.set(0, 0, 3);

controls.connect();
create.ambientLight();
create.directionalLight();

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

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

transformControls.attach(cube1)

transformControls.attach(cube2, {
  mode: "rotate"
})

animate();