Three.jsのWebARをやったとき、画面に2DのUIを置けるのか。
vroid hub仮名に使っているかわからないが、WebARモードでは戻るボタンもない。
Googleのやつみたいにいろいろボタンを置けるのか
ReactThreeFiberのXR
素じゃなくてreact three fiber経由でthree.jsを使う。
yarn add three @react-three/fiber @react-three/drei
yarn add -D @types/three
でインポート。下のほうはめっちゃ時間かかった。
VRやARにはこれも必要
@react-three/xr"
意外とシンプルなARをやっているサンプルが見当たらない・・・
とりあえずこちらのコードを試した。ButtonのVR部分をARにしたらWebARになった。
localのビルドではHTTPS neededとボタンに出て動作確認できない。
ちゃんとインターネットにupしたら表示されてARもVRもできた。
ARから抜けるときはExitARを押す
VRのほうもQuestで見れた。真っ黒な空間に真っ黒なSphere
2DUIを出す
copilotに聞いた
これを提示してきた
positionってある時点で絶対違うだろうと思いつつビルド。
やっぱり空間に表示された。
zennの記事をまねしてCanvasの外に<h1>WebARテスト</h1>と書いた。
そしたら普通にAR時も描画された。あ、そうなんだ・・・
AntDesignも置けた。
でもEnterARと被るな～
EnterARボタンカスタム
Enter ARというボタンを変えたい。
入るときはvroid hubのやつみたいにアイコンだけのボタンにしたい。でもお前の端末ではつかえないよという表示するには文字部分いるのかな・・・使えないなら最初から表示しないという風にすればいいのかな・・・
最初のzennにも、公式githubにも元の形を保ちながらデザインを変える方法は書いてある。
zennの記事にあったものをそのまま使ったら普通の素のHTMLのボタンみたいなのが画面の左下の隅っこに表示された。
Copilotに聞いたらtailwindを使っているらしい。本当か？
とりあえず普通のCSS？の書き方でデザインを変更してもらった。
これでデザイン変わったし場所も変わった～
ただ、入るときと出るときで様式を変えたり、アイコン使ったりはどうしたらいいのだろう。
寄り道：ARで平面検出(できてない)
ARは平面検出するには、useHitTestというのを使うらしい。
GitHub - pmndrs/react-xr: 🤳 VR/AR with react-three-fiber
これをどこに書いてどう使えばいいんだ！！
reactと関係ない元のAPIのページのサンプル見てもわからない
XRFrame: getHitTestResults() method - Web APIs | MDN
ver5.0でのいいサンプルがないよ！って聞いているスレッドがあった
これをまねする。
そしたらVSCodeでははエラーは出ないが、yarn build-allしたときにエラーが出て、それをcopilotに伝えて直してもらったらそれはvscodeでエラーが出て・・・わからない
びっくりしたのが
と書いてあるとこの記述がコメントアウトなのに意味があるということ。消したらエラーが出る。どういう仕組みなんだろう・・・
ちなみに平面認識は以下のブラウザで動くみたい
最後に
react-threeやっている人思ったより少なそう
<XRButton mode="AR"/>っていう書き方もできるのか
