A-Frame
以前アップした「WebARラジコンヘリコプター」のジョイスティックボールに関するスクリプト部分にバグが見つかったので 「WebVRプラネット」ではその部分を修正しています なのでジョイスティックボールのスクリプトとあと自転・公転のスクリプトを残してお…
以前A-Frameで作ったジョイスティックボールと everydayisagoodday.hatenadiary.com くじらがグルグルするの everydayisagoodday.hatenadiary.com この２つを応用してVRプラネットを作ってみました ジョイスティックボールで空間を移動でき 「公転スタート」…
ARでやってみたかったことの一つにポータルホールがあります ネットには「どこでもドア」のような完成度の高いポータルホールのサンプル動画が上がっていますが これはなかなかの難易度 もっと簡単にできないものかとアレコレ試してみたら こんなポータルホ…
前回の「WebARラジコンヘリコプター」のコードです まだまだ未熟で最善なやり方ではないと思いますが やり方は１つではありません いろんなやり方があっていいんだよっていう意味でつたないコードをアップしておきます <html> <head> <meta charset="utf-8" /> <title>radio-control helicopter for web</title></meta></head></html>…
ネットでたまたま見つけたARのラジコンカー これをどうしても再現したくて 試行錯誤してみました ただ平面認識はできる気がしなかったので車ではなくヘリコプターに 着陸はただ下に下がるだけです もしかしたら空中で止まることになるかもしれませんが そこ…
今回も『WebARでシューティングゲーム』で使っているやり方ですが 自分用覚書きです ARに必要不可欠 背面カメラの映像を取得する方法です <html> <head> <style> .v-case { left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 100%; } .v-cover { position: relativ</head></html>…
前回 『WebARでシューティングゲーム』で行った球と球の当たり判定をアップしましたが 他にも数学の力を借りて計算している部分がありまして それは 弾をカメラの向いていた方向に移動させるところです Unityなら transformCamera.forwardで表される方向に時…
前回の『WebARでシューティングゲーム』のコードをいつものようにアップしようと思ったのですが 未熟なため全体がダラダラと長く やり方が分からなくて古典的な方法を使ったりしている箇所があって これは良くないぞと… 具体例としては当たり判定です Unity…
以前 ARのシューティングゲームを誰でも簡単にWeb上でできないかということを模索しておりまして everydayisagoodday.hatenadiary.com そこでたどり着いたのがA-Frame コツコツと勉強を続けようやくUnityで作ったものと同様のARシューティングゲームが完成し…
前にアップした『WebVRで「1から25まで順番にタップする」ゲーム』のコードです そんなに難しいことはしていません もっと効率的なやり方があるかもしれませんがちょっとずつ勉強した成果です <html> <head> <meta charset="utf-8" /> <title>Tach the number for web VR</title> <meta name="description" content="Tach the number for web VR" /> </meta></meta></head></html>
『A-Frame』の勉強続けています 手探り状態ですが分かってきたこともいろいろあって 忘れないうちにメモっときますシーン内にBoxを作成する const scene = document.querySelector("a-scene"); let box = document.createElement("a-box"); box.setAttribute…
昨日の投稿した『WebARでアクアリウム的な感じ』のコードを残しておきます 今のところ これだけが私のA-Frameの経験値なので <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> </meta></meta></head></html>
最近『A-Frame』にハマっておりまして 日々勉強中です これまで勉強したAndroid StudioやUnityは 簡単なサンプルをコピーして実際に動かしてみて そのうちサンプル１とサンプル２を組み合わせたらこんなことができるかもと だんだんできることが増えていった…
ARの勉強をサボっている間もたまに情報収集はしておりまして 「WebAR」というものが良さそうな感じです WebARはA-FrameとAR.jsというライブラリを使うことで簡単にできるらしく まずはこちらの動画を参考にしながらWebARに初挑戦 www.youtube.com aframe.io …
