「HTMLで簡単実装！A-Frameで始めるWebXR開発入門 」の様子をまとめました！ togetter.com/li/2392663 #Togetter @togetter_jpより #tryAR #aframevr #webvr #webar #webxr

昨日の勉強会の様子をまとめました！資料へのリンクも掲載しています。 HTMLで簡単実装！A-Frameで始めるWebXR開発入門 togetter.com/li/2392663 #Togetter @togetter_jpより #tryAR #aframevr #webvr #webar #webxr

本日はヨシナガさんの講習に参加しました！初心者🔰でも分かりやすく皆でキターって言いながらVRとハンドトラッキングなど楽しみました!! (*≧▽≦)今日のハンズオンはこの通り⬇️⬇️⬇️ じゅんさんの投稿ありがたいです!! #tryAR #aframevr #VR https://t.co/FGdN4PMhSH x.com/jun_mh4g/statu…

今日の資料です。 #tryAR, #webar #webxr #webvr #aframevr docswell.com/s/Tks_Yoshinag…

#tryAR #aframevr 今日も無事完走('ω') 不明点は#tryARのDiscordサーバへ質問よろしくとのこと お疲れさまでした～ pic.twitter.com/OqLGj5F52T

#tryAR #aframevr まわっとる 正攻法でドキュメント読んで頑張る他に、AIの出力を読んで主要機能の書き方を学ぶ方法もあるよってお話でした pic.twitter.com/yYfQFPyzwL

おー、A-frameのコンポーネント作成をchatGPTと協働作業、これは為になります！あとで試してみよう！ 作られたソースがもしちゃんと動かなくてもここまでやってくれたら助かる〜！（自力時間削減） #tryAR #aframevr

#tryAR #aframevr できたみたい pic.twitter.com/e3R5QAjjPh

#tryAR #aframevr 出力された様子を見て学ぶべき機能の当たりをつける pic.twitter.com/2pZNipPitQ

#tryAR #aframevr aframe.io/docs/1.6.0/int… 余談パート コンポーネントを使ったオリジナル制御の書き方は公式ドキュメントにも用意されてる ただ英語を読むのもハードルが高い →AIにお願いだ☆ ・希望の機能を書く ・機能の根幹部分のコンポーネントを要望 ・コンポーネントの引数などを言っとく pic.twitter.com/J6I5DiRRzK

#tryAR #aframevr 説明資料は公開ずみ 復習などはそれをみながらでもやってくださいとのこと ８８８８８８８８ pic.twitter.com/vpDhk3IdNd

#tryAR #aframevr 動いてるよしながさんのサンプルプロジェクト（さっきのQRコードを読んだ）をスマホで見ているようす ARモードもちゃんと効いているね(*´-`) pic.twitter.com/RBNDK0Tvob

#tryAR #aframevr またa-entity つかめる属性、位置、大きさを指定して、3Dモデルを名指し 3Dモデルはアセットにあらかじめ追加してURLを取得（画像呼び出しの時と一緒） 地球からネコちゃん生えたｗｗｗ 完成☆ pic.twitter.com/HnJEPR9fSh

#tryAR #aframevr ここからはおまけ glbファイルの表示 自分で作った3Dスキャンのデータとか出せるといいよね glbはscaniverseとかで作れる 予め読んでおく→表示する　の流れが推奨されているみたい a-assetsタグ　準備として読みこみ、表示はまたその後のコードで制御　idを準備　呼び出す用 pic.twitter.com/xkf2kJLnTY

#tryAR #aframevr ここまではVRのお話であった AR対応にするための実装 xr-mode-uiコンポーネントでXRModeをxr または arと変更 hide-on-enter-arコンポーネント追加　背景画像を非表示にする QuestのブラウザでARボタンが追加されてればOK 背景がビデオパススルーで地球オブジェクトはつかめる pic.twitter.com/rNtwy8zx3Y

本日はYouTubeで観ています、A-frameは最近、触ってなかったのでプラスαのhand-tracking-grab-controlsは勉強になりました！ いろいろ便利になってますね😁 #tryAR #aframevr

#tryAR #aframevr ハンドトラッキングの詳しいドキュメントはここかな aframe.io/docs/1.6.0/com…

#tryAR #aframevr 実演タイム 初期位置の変更も確認できる 手 表示されない時はいったんコンテンツから抜けてブラウザ側リロードを再びやる pic.twitter.com/QlPuP3OlR5

#tryAR #aframevr Quest3で確認したい時はページの内容を再読み込みする必要があるのでブラウザでリロード 没入モードに移行したら地球をつかめる手が表示できるようになる pic.twitter.com/SEoOKSGdY2

#tryAR #aframevr またでたa-entity hand-tracking-grab-controls=以降を指定するとできる ハンドトラッキング掴む操作する　 つかまれる属性のオブジェクト(grabbable)と、 つかめる属性の手をセットにする pic.twitter.com/idiV1mzbGx

#tryAR #aframevr 動作確認タイム終了 ここまでは以前のハンズオンでもやったこと ここからハンド操作の実装 pic.twitter.com/Xr7ubNICo1

#tryAR #aframevr 平面ブラウザ上のVRボタンを押すと没入モードに入れる 戻る時はメタボタン→Quit pic.twitter.com/jF1F6Hykb5

#tryAR #aframevr 右上の三点ボタンをおしてCopy Linkを押したらURL取得 メモ帳に貼ったりして確認できる Quest3で見る方法 便利な方法 PC側で oculus.com/open_url/?url=さっきのURL　にすると（要ログイン）、強制ひらかせ画面に進むことができる Quest3かぶったままURLにアクセスできる pic.twitter.com/mWYpTh3uaH

#tryAR #aframevr QuestとかVR端末のブラウザでコンテンツにアクセスする方法 ・もともとGlitch上で作業始めた時から英単語の組み合わせで発行されている（長い） ・Settingsの中から編集できる 　Edit Project Details から好みの名前を入力　 　早い者勝ち 変えた pic.twitter.com/DJ4qQcDn3r

#tryAR #aframevr 360°画像持ってたら自分のオリジナルコンテンツがサクッとつくれちゃう　べんり

#tryAR #aframevr 星空の画像を背景に差し替える作業 できた pic.twitter.com/AHyEpQQN03

#tryAR #aframevr ツイッターアイコンを貼ったらミスった人 pic.twitter.com/q4oqbvTnnS

#tryAR #aframevr ソースを書き換えて色→画像にする 地球になった pic.twitter.com/adCDicbzU4

#tryAR #aframevr 参照用のURLを取得する Assetsの画像をクリックして情報が出てきたらCopy URL pic.twitter.com/mlsWn078Va

#tryAR #aframevr 配布サンプルのフォルダに入ってたearth.jpgを追加する pic.twitter.com/aVe8jn4mAT

#tryAR #aframevr 不要オブジェクトの削除 球と背景色だけに。 単色の球に模様をはりつけたい 画像を用意　Assetsのタブに移動 pic.twitter.com/DVktUHoFrx

#tryAR #aframevr 最初のソースを再取り込み　操作の復習である りふれっしゅ pic.twitter.com/NNrwg2ozOP

3人でトライ中 #tryAR #aframevr pic.twitter.com/FrnjwB46KW

カメラの位置は（0 1.6 0）。 #tryAR #aframevr camera – A-Frame (aframe.io) pic.twitter.com/uDe2ZB19NX

#tryAR #aframevr タブを閉じる なんてこった！('ω') pic.twitter.com/zPj2gZwrGy

#tryAR #aframevr 再開

Unitytで、空のオブジェクトにプリセットで用意されていないコンポーネントを追加するように、何の機能も持っていないもの（a-entity）に属性を追加して独自のオブジェクトを作ることができるらしい。 a-textとa-entityの使い方の違い。 #tryAR #aframevr pic.twitter.com/3PpEMaPlgg

休憩 #tryAR #aframevr 2:55から再開 ようやく昼ご飯をたべるぜ！ pic.twitter.com/teCFRL39Tp

#tryAR #aframevr くわしくは公式をみるとよい aframe.io/docs/1.6.0/cor… pic.twitter.com/oAR5ko8U1r

#tryAR #aframevr なんにでもなれるa-entity 状態や制御を追加していけそう pic.twitter.com/ShYyYjQFoi