Three.jsのオブジェクトをカメラからの方向を保ったまま距離を操作する方法

概要

Three.jsのObject3Dをカメラからの方向を保ったまま前後に距離を操作する方法を備忘録として残します。

サンプル

以下の関数を使うといい感じにカメラからの方向を保ったまま前後に移動させることができるかと思います。

/**
   * Three空間上の任意のオブジェクトをカメラに対して方向を保ったまま指定した距離分、移動する関数
   * @param {THREE.Camera} camera
   * @param {THREE.Object3D} object 任意の移動させたいオブジェクト
   * @param {number} changeDistance 移動させたい距離
   */
  const changeObjectDistanceToCamera = (
    camera: THREE.Camera,
    object: THREE.Object3D,
    changeDistance: number
  ) => {
    const cameraPosition = camera.position
    const modelPosition = object.position
    // カメラとオブジェクトの位置からなる方向(単位)ベクトルを取得する
    const frontVector = cameraPosition.clone().sub(modelPosition).normalize()　
    // 上記の方向ベクトルをもとに任意の移動させたい距離分のベクトルをオブジェクトのpositionから引く
    object.position.sub(frontVector.multiplyScalar(changeDistance))
  }

使い方

• カメラからの方向を保ったままカメラ側に近づけたい時

const camera = THREE.Camera()
const object = THREE.Object3D()
const changeDistance = -10
changeObjectDistanceToCamera(camera, object, changeDistance)

• カメラからの方向を保ったままカメラ側から離したい時

const camera = THREE.Camera()
const object = THREE.Object3D()
const changeDistance = -10
changeObjectDistanceToCamera(camera, object, changeDistance)