みかづきブログ・カスタム

基本的にはちょちょいのほいです。

A-Frame

A-FrameでCanvasをテクスチャーに設定して動的に更新する 🎥

以前、Three.jsでCanvasをテクスチャーに設定した場合、material.map.needsUpdateをtrueに設定すれば動的に更新できることを調べました。blog.kimizuka.org今回は、それのA-Frame版です。 A-Frameも内部はThree.jsを使っているので、material.map.needsUpdat…

A-FrameでARマーカーが回転したことを検知する 🔁

ARマーカーの回転検知。 pic.twitter.com/W6ukDJorN8— 君塚史高 (@ki_230) 2020年11月19日 以前は、マーカーのpositionを取得する方法を使ったデモを作りましたが、今回はマーカーの回転を検知してみます。blog.kimizuka.org JavaScript let timer; let last…

A-FrameでARマーカーが動いたことを検知する 🚗

A-Frameを色々試していたところ、marker.getAttribute('position')でマーカーの座標が取得できることがわかったので、 Webカメラを定点で固定 0.1秒間隔でマーカーの座標を取得 1個前の座標と現在の座標を結んだでベクトル化 ベクトルの大きさが一定以上であ…

A-FrameでARマーカーを認識した時、認識が切れた時にコールバックイベントを設定する 💣

この投稿をInstagramで見る 片付けが捗るように、3秒以上物を置きっぱなしにすると爆発音がする机を作りました。名付けて「かたづくえ」です。 #音楽 #家 #音楽家 #ミュージックハウス #片付け #机 音楽+家=音楽家(ミュージックハウス)(@ongaku.ie)がシ…

A-Frameを使ってobjファイルをARで表示する 🐄

己との戦いAR。 pic.twitter.com/1bHUuSggc0— 君塚史高 (@ki_230) 2020年11月2日 これまではglbファイルを読み込んでいたので、Blenderを使ってファイルを変換していました。が。A-Frameのドキュメントを読んでいると、objファイルが読み込めそうな気配が。 …

A-Frameをつかって影とスポットライトをつくる 🔦

以前、こんなものをつくりました。本人よりも先に踊り出す影。 pic.twitter.com/mo29EZ19lY— 君塚史高 (@ki_230) 2020年6月18日 この時は、Unityをつかって影とスポットライトをつくっていたのですが、three.jsやA-Frameをつかうことにハマっている今となっ…

A-Frameを使って、ARでボクセルのモデルを表示する 📦

昨日つくったボクセルをA-Frameを使ってARで表示してみました。blog.kimizuka.orgA-Frameも内部はThree.jsを使っているので、もっと色々できそうな気がします。 あと、3Dモデルを確認するインターフェイスとして、マーカー型ARは非常に優秀な手段かもしれな…

A-Frameを使って爆速でつくったWebARにアニメーションを付ける 🥊

blog.kimizuka.orgの記事の続編です。分身の術。 pic.twitter.com/ATedQVtJXn— 君塚史高 (@ki_230) 2020年10月27日 前回は、実寸代のARで分身の術を作ってみた次第ですが、分身(3Dモデル)はピクリとも動いていませんでした。なので、今回は3Dモデルにアニ…

A-Frameを使って爆速でWebARをつくる 💻

分身の術。 pic.twitter.com/ATedQVtJXn— 君塚史高 (@ki_230) 2020年10月27日 A-Frameを使ってWebARを作ってみました。 ソースはこんな感じです。 HTML <html"> <head> <meta charset="UTF-8" /> <title>AR DEMO</title> </meta></head></html">

壁に穴を開けるARをつくって隣の部屋からの音漏れをポジティブに楽しむ 🕳

隣の部屋からの音漏れをポジティブにするWebARをつくりました。壁に穴を開け、隣人がUnityちゃんだと思い込むことで、音漏れに対するイライラを和らげます。ダンスを練習してるなら仕方ないな、と。 #ウソ穴 #バーチャルお隣りさんhttps://t.co/K6VrOOmmH5 p…