HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > WebGL

three.jsでカメラ位置に無関係に表示する方法

文責:遠藤 理平 (2017年2月15日) カテゴリ:WebGL(41)

three.jsで文字列を利用する方法」では、canvas要素に描画した文字列を平面オブジェクトにテクスチャマッピングすることで、3次元空間内に任意の文字列を表示する事ができることを示しました。本項では、メインの3次元グラフィックス上に、正投影カメラによるレンダリングを重ね合わせることで、メインのカメラ位置に依存しない文字列表示の方法を示します。

カメラ位置に無関係な文字列表示

ちなみに上記は「three.jsで文字列を利用する方法」で定義した「TextBoardObjectクラス」を用いて実装しています。


参考図書

3次元グラフィックス関連

three.jsによるHTML5グラフィックス上 【改定版】
three.jsによるHTML5グラフィックス下 【改定版】
three.jsによるHTML5 3Dグラフィックス 【新機能と応用】

物理シミュレーション関連

HTML5による物理シミュレーション
HTML5による物理シミュレーション【拡散・波動編】
HTML5による物理シミュレーション 【剛体編1】
HTML5による物理シミュレーション 【剛体編2】



▲このページのトップNPO法人 natural science トップ

▲このページのトップNPO法人 natural science トップ