ThreejsのTransformControlsのサイズ固定

yosi2024/08/07 10:11

ThreejsのTransformControlsにおいて、カメラを移動したときにGizmoのサイズを固定することはできますか。

Answerer AIPowered by gpt-3.5-turbo

はい、Three.jsのTransformControlsでは、カメラを移動させたときにGizmoのサイズを固定することができます。具体的には、Gizmoのサイズをカメラの距離に比例させることができます。この場合、カメラからの距離が近づくとGizmoも小さくなり、離れると大きくなります。この機能を実現するためには、TransformControlsのupdate()メソッドを使用して、Gizmoのスケールをカメラの位置に合わせて更新する必要があります。これにより、カメラの移動に応じてGizmoのサイズを適切に調整することができます。

yosi2024/08/07 10:12

仮面上でのサイズを固定するのではなく、オブジェクトとのサイズ比率が変わらないようにしたいです。

Answerer AIPowered by gpt-3.5-turbo

申し訳ありませんが、Three.jsのTransformControlsでは、カメラを移動したときにGizmoのサイズ比率を固定する機能はデフォルトで提供されていません。Gizmoのサイズは、カメラの位置や距離によって変動する仕様となっています。しかし、カスタムコードを使用して独自のロジックを実装することで、オブジェクトとのサイズ比率を保つことができるかもしれません。具体的な実装方法については、Three.jsのドキュメントやフォーラムを参照するか、Three.jsのコミュニティに質問することをおすすめします。

yosi2024/08/07 10:20

PerspectiveCameraの設定やカメラからGizmoの距離などに応じてGizmoのサイズを変更するコードを作成してください。Gizmoのサイズが他のオブジェクトと比較して変わらないようにしてください。

Answerer AIPowered by gpt-3.5-turbo

以下に、PerspectiveCameraの設定とカメラからの距離に応じてGizmoのサイズを変更するコード例を示します。このコードでは、カメラからGizmoまでの距離を計算し、そこからカメラの視野角やオブジェクトとの相対サイズを考慮してGizmoのスケールを調整します。これにより、Gizmoのサイズが他のオブジェクトと比較して変わらないようになります。

// Gizmoの初期サイズ
var gizmoSize = 100;

// Gizmoのスケールをカメラからの距離と視野角に応じて調整する関数
function updateGizmoSize(camera, gizmo) {
  // カメラからGizmoまでの距離を計算する
  var distance = camera.position.distanceTo(gizmo.position);

  // カメラの視野角を取得する
  var fov = (camera.fov * Math.PI) / 180;

  // Gizmoのスケールを調整する
  gizmo.scale.set(gizmoSize * Math.tan(fov / 2) * distance, gizmoSize * Math.tan(fov / 2) * distance, gizmoSize * distance);
}

// カメラを作成する
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 任意の位置にGizmoを作成する
var gizmo = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
scene.add(gizmo);

// カメラを移動させたりパースペクティブを変更したりした場合にGizmoのサイズを更新する
function onCameraChange() {
  updateGizmoSize(camera, gizmo);
}

// 初期描画時にGizmoのサイズを更新する
updateGizmoSize(camera, gizmo);

// カメラのイベントリスナーを登録する
camera.addEventListener('change', onCameraChange);

このコードを使用して、カメラの移動やパースペクティブの変更に応じてGizmoのサイズを自動的に調整することができます。ただし、Gizmoの初期サイズやカメラの設定に合わせて調整が必要な場合がありますので、適宜変更してください。

yosi2024/08/07 10:41

上記コードは意図した動作をしない。

最終的に以下のコードを毎フレーム実行することで実現した。

    const updateGizmoSize = (
      camera: THREE.PerspectiveCamera,
      transformControls: TransformControls,
      transformControlsPosition: THREE.Vector3,
      baseSize: number,
    ) => {
      var distance = camera.position.distanceTo(transformControlsPosition)
      var fov = (camera.fov * Math.PI) / 180
      transformControls.setSize(baseSize / (Math.tan(fov / 2) * distance))
    }
    updateGizmoSize(
      this.context.main.camera,
      this.mainTransformControls,
      this.center.position,
      0.3,
    )

コメントするにはログインが必要です

yosi