すだちキャンパス

すだちキャンパス

やってみたこと、学んだことなどのメモ。

A-Frame

あけましておめでとうございます~VR年賀状~

あけましておめでとうございます。 毎年AR年賀状を作っていたのですが、マーカーARだとURL単体で完結できないため見てもらいにくいという欠点があります。そこで今年はWebVR年賀状を作りました。 マーカーレスARにチャレンジするかどうかも悩んだのですが、…

A-Frameでタップ(クリック)できるようにしてみた

こんにちは。 最近、A-FrameでUIを作ったり動画を見られるようにしたりしていますが、その中である思いが強まってきました。 普通にタップorクリックしたい・・・ 視線クリックも、VRモードでは便利なのですが普通に操作している時は少々煩わしいです。そこ…

A-Frameで動画を埋め込んでみた

こんにちは。A-Frameを使って動画を埋め込んだところ、意外と苦戦するところが多かったのでまとめておきます。 環境 基本的な動画の埋め込み方 スマホ(iPhone)で再生されない問題の解決 必ず書かなければいけない要素 クリックイベントが必要 音をON/OFFでき…

A-FrameでUI(ポップアップウィンドウ)を作ってみた

こんにちは。WebVRでポップアップウィンドウを表示させる事があったので、方法などをメモしておきます。 基本的なポップアップウィンドウの作成 A-Frame GUI を使う クリックすると文字が表示されるものを作る 画像も一緒に表示する リンクを貼る リンクのバ…

ios13以降でA-FRAMEを使う時の注意点

こんにちは。 今年も年賀状を作ろうと思い、A-FRAMEを久々に使ったところ、思わぬところで躓いたのでメモしておきます。去年のAR年賀状作成の記事はこちら↓ kabos.hatenablog.jp 発生した問題 解決策 参考 発生した問題 オブジェクトを表示させた時に画面に…

AR年賀状を作ってみた (glTFモデル表示編)

こんにちは。 前回の続きで、アニメーション付きの3DモデルをA-frame で表示するために色々やってみました。 記事の一番後ろには色々チャレンジして失敗したことをまとめました。(解決していないのでどなたか教えていただけると嬉しいです・・・) 前回の記事…

AR年賀状を作ってみた (MMDモデル表示編)

こんにちは。 AR年賀状を作りたかったので、色々やって見ました。 今回は、MMDモデルを表示させたいと思います。 A-frame を用いたAR 準備 index.html を準備する MMDモデルをダウンロードする マーカーをダウンロードする index.html を書く サーバーにアッ…