【Three.js】オブジェクトを画面固定（カメラ固定）にする

概要

こんにちは、株式会社palanのxR事業部でWebAR/VRの開発などしていますdamiと申します。
この記事ではThree.jsでオブジェクトを画面固定（カメラ固定） にしたい場合の方法を書きます。
通常のThree.jsではあまり必要ないかもですが、DeviceOrientationControlsを使用するWebAR/VR空間を作る際に、常に画面に表示したいものがある場合には活用できます。

解決策

通常、オブジェクトはシーンに追加しますが、その代わりにカメラオブジェクトに追加する（カメラの子要素とする） と常に画面固定にすることができます。

// positionはカメラに対するlocal座標を入れます
this.object.position.set(0, 0, -5);
// camera.add() します
this.camera.add(this.object);

ちなみにこの方法では、カメラオブジェクトを明示的にシーンに追加する必要がありますのでご注意ください。

this.scene.add(this.camera);

これで完了。

余談 - A-Frameでの画面固定

Three.jsを継承しているライブラリ「A-Frame」でも同じように<a-entity camera>の子要素にオブジェクトを入れると画面固定にできます。