Three.jsのレシピ集

// Object3Dオブジェクトを作成
var object = new THREE.Object3D();

// 座標を変更
object.position.set(x, y, z); // x, y, zは座標の値です

// Object3Dオブジェクトを作成
var object = new THREE.Object3D();

// 座標を変更
object.translateX(x); // xはX軸方向に移動する量です
object.translateY(y); // yはY軸方向に移動する量です
object.translateZ(z); // zはZ軸方向に移動する量です

// Object3Dオブジェクトを作成
var object = new THREE.Object3D();

// 座標を変更
object.position.x = x; // xはX軸の座標の値です
object.position.y = y; // yはY軸の座標の値です
object.position.z = z; // zはZ軸の座標の値です

// Object3Dオブジェクトを作成
var object = new THREE.Object3D();

// 座標をワールド座標で変更
var targetPosition = new THREE.Vector3(x, y, z); // x, y, zはワールド座標の値です
object.parent.worldToLocal(targetPosition);

// objectの座標を変更
object.position.copy(targetPosition);

// TransformControlsオブジェクトを作成
var controls = new THREE.TransformControls(camera, renderer.domElement);

// シーンにTransformControlsを追加
scene.add(controls);

// モードをTranslateに設定
controls.setMode("translate");

// Translateモードで操作対象の軸を指定（"X"、"Y"、"Z"、"XY"、"YZ"、"XZ"、"XYZ"のいずれか）
controls.setAxis("X"); // X軸のみを操作対象にする

// 別の軸に指定する場合
// controls.setAxis("Y"); // Y軸のみを操作対象にする
// controls.setAxis("Z"); // Z軸のみを操作対象にする

1. TransformControlsのchangeイベントを監視します。これにより、コントロールが物体を変更したときに呼び出される関数を定義できます。
2. 物体の回転を反映させるため、物体の回転を取得し、Gizmoにも同じ回転を適用する必要があります。これには、TransformControlsのobjectプロパティを使用します。

// TransformControlsのchangeイベントを監視するための関数を定義
function onTransformChange() {
  // 物体の回転を取得
  var rotation = object.rotation.clone();

  // TransformControlsのobjectプロパティにも回転を適用
  controls.object.rotation.copy(rotation);

  // Gizmoの表示を更新するために変更イベントを発火
  controls.dispatchEvent({ type: 'change' });
}

// TransformControlsを作成
var controls = new THREE.TransformControls(camera, renderer.domElement);
controls.addEventListener('change', render); // シーンの変更時にレンダリングするためのリスナーを追加

// シーンにTransformControlsを追加
scene.add(controls);

// 物体を作成（例として立方体を使用）
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var object = new THREE.Mesh(geometry, material);

// 物体をシーンに追加
scene.add(object);

// TransformControlsの操作対象に物体を設定
controls.attach(object);

// TransformControlsのchangeイベントに関数を登録
controls.addEventListener('change', onTransformChange);

// レンダリング関数
function render() {
  renderer.render(scene, camera);
}

// マウスイベントやキーボードイベントなどでTransformControlsを制御するための関数などを記述する...

// 初回レンダリング
render();

1. レイヤーの設定が正しく行われていない：TransformControlsオブジェクトを別のレイヤーに移動するには、オブジェクトのlayersプロパティを変更する必要があります。例えば、以下のようにオブジェクトを指定のレイヤーマスクに対応するレイヤーに移動します。

controls.layers.set(1); // レイヤーマスク1を設定

2. マウスイベントが正しく設定されていない：TransformControlsは、raycasterを使用してマウスイベントを処理します。もし、マウスイベントのリスナーが正しく登録されていない場合、マウス操作が機能しない可能性があります。例えば、以下のようにマウスイベントを処理するためのリスナーを登録します。

document.addEventListener('mousedown', onDocumentMouseDown);
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', onDocumentMouseUp);

3. マウスイベントの座標変換が正しく行われていない：TransformControlsは、マウスの座標をスクリーン座標からワールド座標に変換する必要があります。もし、マウスの座標変換が正しく行われていない場合、マウス操作が機能しない可能性があります。例えば、以下のようにマウス座標を正しく変換して使用します。

var mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

// マウス座標を使用してTransformControlsを制御する処理
controls.onPointerDown(mouse);
controls.onPointerMove(mouse);
controls.onPointerUp(mouse);

object.position.set(x, y, z); // ワールド座標 (x, y, z) を設定

object.position.x = x;
object.position.y = y;
object.position.z = z;

object.position.copy(worldPosition); // 指定したワールド座標に変更
object.position.applyMatrix4(parentObject.matrixWorld); // 親オブジェクトのワールド行列を考慮

const vector1 = new THREE.Vector3(x1, y1, z1); // ベクトル1の座標
const vector2 = new THREE.Vector3(x2, y2, z2); // ベクトル2の座標

const angle = vector1.angleTo(vector2); // ベクトル1とベクトル2の間の角度（ラジアン）を取得

// ラジアンを度に変換
const angleDegrees = THREE.MathUtils.radToDeg(angle); // ベクトル1とベクトル2の間の角度（度）を取得

vector1.normalize();
vector2.normalize();

const angle = vector1.angleTo(vector2);

1. THREE.Vector3オブジェクトを使用してベクトルAとベクトルBを作成します。

const vectorA = new THREE.Vector3(xA, yA, zA); // ベクトルAの座標
const vectorB = new THREE.Vector3(xB, yB, zB); // ベクトルBの座標

2. THREE.QuaternionオブジェクトのsetFromUnitVectors()メソッドを使用して、ベクトルAからベクトルBへの回転を表すQuaternionを求めます。

const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(vectorA.normalize(), vectorB.normalize());

object.quaternion.copy(quaternion); // オブジェクトにQuaternionを適用

1. THREE.Quaternionオブジェクトを使用して回転を表すQuaternionを作成します。

const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle(axis, angle); // axis: 回転軸のベクトル, angle: 回転角度（ラジアン）

2. 回転させたいオブジェクトのquaternionプロパティに、作成したQuaternionを設定します。

object.quaternion.copy(quaternion); // オブジェクトにQuaternionを適用

• axisは回転軸を表す単位ベクトルである必要があります。また、回転軸の方向によって回転の向きも変わります。
• angleは回転角度をラジアンで指定します。デグリーからラジアンに変換する場合は、THREE.MathUtils.degToRad()を使用してください。

const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2); // X軸周りに90度回転

object.quaternion.copy(quaternion); // オブジェクトにQuaternionを適用

1. THREE.Quaternionオブジェクトを使用して、追加の回転を表すQuaternionを作成します。

const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle(axis, angle); // axis: 回転軸のベクトル, angle: 回転角度（ラジアン）

2. オブジェクトの現在の回転を表すQuaternionを取得します。

const currentQuaternion = object.quaternion.clone(); // 現在の回転を表すQuaternionのコピーを取得

3. 現在の回転に追加の回転を適用するために、2つのQuaternionを合成します。

currentQuaternion.multiply(quaternion); // 現在の回転に追加の回転を合成

• 回転の順序は重要です。Quaternionの乗算は順序によって結果が変わるため、必要に応じて回転の順序を調整してください。
• 追加の回転を適用する際に、オブジェクトの回転をクリアせずに、現在の回転に追加することを意図している場合は、先に3Dオブジェクトの姿勢に基づいた回転行列を作成し、それを使ってQuaternionを作成する方法もあります。

// 追加回転を表すQuaternionを作成
const additionalQuaternion = new THREE.Quaternion();
additionalQuaternion.setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 4); // X軸周りに45度回転

// オブジェクトの現在の回転を表すQuaternionを取得
const currentQuaternion = object.quaternion.clone();

// 現在の回転に追加の回転を合成
currentQuaternion.multiply(additionalQuaternion);

// オブジェクトに結果のQuaternionを設定
object.quaternion.copy(currentQuaternion);

// オブジェクトのQuaternionを取得
const quaternion = object.quaternion.clone();

// Quaternionをオイラー角に変換
const euler = new THREE.Euler().setFromQuaternion(quaternion);

// オイラー角から角度を取得（ラジアンから度に変換）
const rotationX = THREE.MathUtils.radToDeg(euler.x);
const rotationY = THREE.MathUtils.radToDeg(euler.y);
const rotationZ = THREE.MathUtils.radToDeg(euler.z);

// オブジェクトのQuaternionを取得
const quaternion = object.quaternion.clone();

// Quaternionをオイラー角に変換
const euler = new THREE.Euler().setFromQuaternion(quaternion);

// オイラー角から角度を取得（ラジアンから度に変換）
const rotationX = THREE.MathUtils.radToDeg(euler.x);
const rotationY = THREE.MathUtils.radToDeg(euler.y);
const rotationZ = THREE.MathUtils.radToDeg(euler.z);

console.log('回転角度(X軸):', rotationX);
console.log('回転角度(Y軸):', rotationY);
console.log('回転角度(Z軸):', rotationZ);