概要
筆者が開発しているWebサイト、「3D Aerospace Museum」は最近(4か月くらいかけて)実装をRazor + Three.jsからReact + react-three/fiberに移行したのですが、その際にAnnotation(注釈)機能をある程度変更したので、覚書で記録します。
(本記事での)Annotationとは
↓の絵の、矢印 +テキストボックスで説明をしている部分のこと
元々の実装
当初は、こちらの記事を参考に実装をしていました。
簡単に言うと、Three jsの絵にHTML要素を重ねることでAnnotationを実装するという作りです。
赤い矢印まではThree jsの絵ですが、テキストボックスの部分はthree jsのキャンバス上に乗っていますがcssで重畳を許す設定にしたHTML要素です。
3D空間上の表示したい座標をキャンバス上の2D座標に変換し、更にその位置を現在表示しているWEBページの絶対位置に変換し、その位置にdiv要素を表示しています。
比較的簡単に実装出来て便利ですが、サイト全体のスタイル設定次第でズレが発生するリスクがあることと、react-three/fiber実装する場合のやり方が調べても良く分からなかったことから、せっかくなのでもっと良い実装がないか調査しました。
変更後の実装
結論から言うと、React Three DreiのHTML表示機能を使用することで実装することにしました。
具体的には、こちらのReact Three/Fiberのサンプルページに乗っている、「HTML annotations」というサンプルを小改造した内容です。
公式のサンプルは、↑のサンプルページからも飛べますが、ここからも飛べます。(CodeSandboxのページ)
サンプルの図
このままだと矢印機能が備わっていないので、Allowhelperで矢印を付けました。
変更したコードはこちらです。
(元サンプルをフォーク+ヘルパー追加、位置・cssなどを微修正)
システムへの組み込み
移行後はこちらです。
テキストボックスの色も元サイトと同じにすることもできますが、気分転換も兼ねてr3f(react-three/fiberの略称)のサンプルとスタイルを合わせています。
