前回WebAR/VRと2DUIを置くのをやった
今回はVRM置いたり、ジョイスティック移動してみたりする。
VRM
pixivが出しているpixiv/three-vrmを使うらしい
基本的にこちらの記事通りにやった。
一点、import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader"の部分がないといわれるが、ちゃんとthreeは入れている。
import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader.js"
と最後に.jsを付けたら治ると教えてもらって治った！
あとは同じ！
<gridHelper />でグリッドが出て、
<OrbitControls
enableZoom={true}
enablePan={true}
enableDamping={false}
/>
で拡大縮小や回転などの操作ができるようになった！
位置を変更するには
tmpGltf.scene.position.set(-1, 0, -1);
Drei
キューブとかテキストとかを出せるDrei。思いのほか出せるものにいろいろ種類があった
前回出したHTMLのテキストと普通のTextの違いは、HTMLのほうのテキストは選択できるし、LookAtされるし常に手前に出る
あと、スマホやPCで見たときは分からなかったが、QuestのVRで見たらHTMLのほうは空間になくブラウザの画面にくっついてた。
アバターのネームプレートに使おうかと思ったが、VRでそうなるなら使えなさそう・・・
ジョイスティック
これを使うとよさそう。r3f関係なかった。
できた。
<Joystick
size={props.size || 84}
stickSize={props.size || 50}
sticky={props.sticky || false}
baseColor={props.baseColor || "rgba(0, 0, 0, 0.4)"}
stickColor={props.stickColor || "#FFFBF6"}
move={handleMove}
stop={handleStop}
></Joystick>
デザインもいろいろ変更できる
すりガラスエフェクト
これもr3fと全く関係ないがすりガラスエフェクトめっちゃ簡単にできてむかつく（Unity民の嫉妬）
backgroundColor: "rgba(255, 255, 255, 0.25)",
backdropFilter: "blur(10px)",
borderRadius: "100px",
//boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
textAlign: "center",
ジョイスティックもガラスエフェクトにできた。iOS標準のジョイスティックっぽい
<div style={{ backdropFilter: "blur(10px)", borderRadius: "100px" }}>
<Joystick
size={props.size || 84}
stickSize={props.size || 50}
sticky={props.sticky || false}
baseColor={props.baseColor || "rgba(0, 0, 0, 0.4)"}
stickColor={props.stickColor || "#FFFBF6"}
move={handleMove}
stop={handleStop}
></Joystick>
</div>
Weekend experiment: Mario in AR. Built with the incredible libsm64* atop Metal and ARKit. Also uses the very neat GCVirtualController (ht @natbro!)
— Warren Moore (@warrenm) 2022年4月4日
* https://t.co/LjnF8o7gBo pic.twitter.com/fmkhljXcam
ビルドしてスマホで動かしたら、iOSではすりガラスにならなかった。
WebkitBackdropFilter: "blur(3px)",
backdropFilter: "blur(3px)",
のようにWebkitを付けた版も書くといいらしい。
モバイル判定
ARはPCでは表示する必要がないので、モバイル判定してボタンのだし分けをしてみる
これ使うといいのかな？
ほかにもいろいろあるっぽいが何がメジャーなのだろう
とりあえずreact-device-detectを使った。
こんな感じで使えた。
import { isMobile } from "react-device-detect";
{isMobile && (
<ARButton
style={{
position: "fixed",
right: 80,
bottom: 45,
backgroundColor: "white",
color: "black",
padding: 10,
borderRadius: 30,
}}
></ARButton>
)}
QuestはPC判定だった。QuestはARもVRもできるので別途判定が必要そう。調べたけどよくわからない。そもそもWebVRやWebARに対応しているかで判定したほうがいいのかも？
ライセンス表記
JoystickのプラグインはMITライセンスだった。ほかにもライセンス表記いるのでは。
package.jsonに載っているものを軽く調べたら、やはりMITライセンスが多い。
かなりパッケージ多いのでツール使ってみる。
上の記事で紹介されていたものを使ったが500件ぐらい出てきて使い物にならない├─ MIT: 489
├─ ISC: 36
├─ Apache-2.0: 17
├─ BSD-2-Clause: 9
├─ BSD-3-Clause: 7
├─ BlueOak-1.0.0: 2
├─ 0BSD: 2
├─ Python-2.0: 1
├─ MPL-2.0: 1
├─ CC-BY-4.0: 1
├─ CC0-1.0: 1
├─ UNLICENSED: 1
├─ (MIT OR CC0-1.0): 1
└─ MIT*: 1
Githubのライセンス文をコピペして貼り付けるには<pre>というタグを使うといいらしい
S3アップロード
WebARなどはhttpsの環境でないと試せない。
S3にアップする
npm run buildで静的サイト用のアウトプットフォルダができる。
だがエラーが出た
Type error: Type 'OmitWithTag<typeof import
page.tsxでexportを２重に行っていたせいらしいです。
末尾に
export default XXX;
とつけているのに、上のほうでもexportしていたので、これを消す
あとは記事通りにできた。
S3の静的ウェブサイトホスティングのURLからだとhttpsになっていないので、index.htmlのオブジェクトのURLからたどる。
ただしそのURLだと各ページに直接URLをたたくと怒られる・・・
404ページ
デザインされた404ページがデフォルトで用意されていた。
どこに元があるのだろうか？
よくわからないがオリジナルデザインにする場合は、用意されているものをいじるのではなく自分でnot-found.tsxファイルを作るみたいだ。
できた
ファビコン
ファビコンも変えたい。appの中にあったファビコン画像を置き換えても変わらなかった・・・
この方法簡単そう
これだとnpm run buildでエラーが出た；；
こちらの方法でうまくできた！appフォルダの中にicon.icoを置く。
いろいろなプラットフォームで対応させるのは以下の記事がよさそう
画像挿入
この時うまくいかなかったAntDesignのボタンにこちらが用意したsvgのアイコンを置くのもできた。
基本この通り
next.config.mjsにimages: {unoptimized: true,を追加
ボタンがデフォルトだと右にずれたのでこうした。画像はpublicに置く。
<FloatButton
icon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Image
src="/view_in_ar.svg"
width={24}
height={24}
alt="view_in_ar"
/>
</div>
}
