😎

positionが(0,0,0)でない3DObjectをCameraに向ける

2024/05/16に公開

3DObjectで lookAt(camera.position) すると常にカメラに向いてくれますが、3DObjectのpositionが(0, 0, 0)以外の場合に上から見た時に余計な回転をしてました。
(以下のGIFではゴミ箱がShapeGeometryのMesh)

どうすれば解決するかと少しハマりましたが、以下で解決できました。

// 以下の処理をpointerMoveなどに入れる
scene.traverse((object) => {
  const cameraPosition = camera.position.clone();
  if (object instanceof THREE.Mesh) {
      // objectはここではゴミ箱のShapeGeometryと思って下さい
      object.lookAt(cameraPosition.add(object.position));
    }
  });
};

TrackballControlsを使ってる場合(OrbitControlsのようにcamera.up固定でないもの)は、lookAt前に object.up.copy(camera.up).normalize() もした方が良いかもです

Discussion