ボタンを押したときとかにスマホの振動できるのかな～と気になった。 簡単にできた！ if (typeof navigator !== "undefined" && "vibrate" in navigator) { navigator.vibrate(200); } ただブーっていう感じの振動の長さを変えられるだけで、mixi2みたいなポ…

マウスオーバー R3Fのオブジェクトなどにマウスオーバーしたときに、ちょっと大きくしたり反応させたい。 XR空間ではInteractiveタグで囲って <Interactive onSelect={handleClick} onHover={() => setHover(true)} onBlur={() => setHover(false)} > みたいにしたら反応する。というのはこの記事でやった。 bib</interactive>…

ReactThreeFiberとxrのライブラリを使ったQuest3とかで入れるWebVRを作っている. 空間の中にパネルとしてちょっと込み入った2DのUIを表示したい。ボタンとかも欲しい。 HTML要素を空間に置くにはdreiのHTMLタグが使われているが、あれは没入型では表示されな…

Next.jsを使っているReactのWebアプリ内からとあることをしたときに、特定のSlackに通知を飛ばしたい。Incoming Webhooksを使うらしい。 Incoming Webhooks 静的エクスポートじゃなければうまくいきそうなServerAction方式 buildできない api方式 その他 Inc…

夏の自由研究でReact使って何か作ろうと思って少しやったが、つまづいてそのまま放置して夏END Versel Mac環境準備 Claudeで作ったものを載せる プッシュしても反映されない Versel Verselというのを使えばS3とかなくても簡単にデプロイできるらしいのでやっ…

iOSでWebXR Depth APIを使ったARは動かないものだと思ってたが、サポート表を見るとWebXR Viewerというアプリを使えば動くらしい。 https://immersiveweb.dev/#supporttable 実際このアプリ内ブラウザで開いたらAR動いた。 WebXR Viewer Mozilla ユーティリ…

react three fiberのxrのライブラリがv6になってた。 github.com ドキュメントページも前なかった気がするけどある。 docs.pmnd.rs ただv5の情報が見たい・・・ ブランチをold-masterにしたらいつも見てたページ！ github.com 今回何でもいいけどQuestのWebV…

自作のWebページでLookingGlassに表示できるものを作れるライブラリがある。 lookingglassfactory.com docs.lookingglassfactory.com reactのr3fでできるかな？ 公式ではサポートされてない。 と思ったらr3fのページあった docs.lookingglassfactory.com と…

状態管理 スクロールエリア r3fでネームプレート LookAt VRMにアニメーション 余白 ant designの上書き フォントを変える ARHitTest ホームに追加したときのアイコン GLTFファイルのS3からの読み込み 状態管理 zustandがいいらしい qiita.com zustand-demo.p…

前回WebAR/VRと2DUIを置くのをやった bibinbaleo.hatenablog.com 今回はVRM置いたり、ジョイスティック移動してみたりする。 VRM Drei ジョイスティック すりガラスエフェクト モバイル判定 ライセンス表記 S3アップロード 404ページ ファビコン 画像挿入 VR…

入門編に続いて同じ人のステップアップ講座を受ける www.udemy.com 前回のメモ bibinbaleo.hatenablog.com ↑のを受けた後UI実装ちょっとした。 bibinbaleo.hatenablog.com コンポーネント作るとかpropsでコンポーネントに値を渡すとかはできたがページ遷移と…

今までUdemyではcodesandboxとか会社で用意されてたstorybook上でやっていたけど、自分で１からローカルに環境作る。 環境構築 編集 ページ遷移 ボタン押したらページ遷移 AntDesign使う 最後に npm run build 環境構築 どれもnpmをつかってるけどyarnでやっ…

Three.jsのWebARをやったとき、画面に2DのUIを置けるのか。 vroid hub仮名に使っているかわからないが、WebARモードでは戻るボタンもない。 Googleのやつみたいにいろいろボタンを置けるのか ReactThreeFiberのXR 2DUIを出す EnterARボタンカスタム 寄り道：…

UIKitはAntDesignを使うことにした。Figmaで一通りAntDesignのFigmaのパーツを使いつつデザインした。 bibinbaleo.hatenablog.com 別途ReactのUdemyは受けているが、なんとなくReactでのAntDesignの使い方がわかったので軽く実装も並走しながらやっていく bi…

講座 これ受ける。本当はUI実装だけできればいいからこんなに深くやらなくてもいい気はするけど・・・ www.udemy.com HTML/CSSもそんなにわからないからこれから受けたほうがいいのかも・・・ www.udemy.com 直近はstorybookを使うからこれを受けてもいいか…