以前、こんなものをつくりました。
本人よりも先に踊り出す影。 pic.twitter.com/mo29EZ19lY
— 君塚史高 (@ki_230) 2020年6月18日
この時は、Unityをつかって影とスポットライトをつくっていたのですが、three.jsやA-Frameをつかうことにハマっている今となっては、Unityを使うまでもないでしょう。
というわけで、A-Frameをつかって影とスポットライトをつくってみました。
HTML
<a-scene arjs="debugUIEnabled: false" vr-mode-ui="enabled: false"> <a-assets> <a-asset-item id="shadow" src="shadow.glb"></a-asset-item> </a-assets> <a-cylinder color="#fff" radius="2" height=".1" position="0 1.6 -3" rotation="90 0 0" ></a-cylinder> <a-entity gltf-model="#shadow" position="0 .7 -1.6" scale="1 1 1" animation-mixer ></a-entity> <a-sky color="#000"></a-sky> </a-scene>
ソースとしてはこれだけです。
3Dモデルはいつも通り、mixamoをつかってアニメーションをつけた後にBlenderでテクスチャを調整して使いました。
DEMO
develop.kimizuka.org
この程度であればUnityよりもすばやく作れました。
わざわざ3Dでつくるまでもないアウトプットなのですが、モーションの付け替えなどを行う可能性を考えると、3Dでつくっておいた方が楽といえば楽です。
そして今回は、これとARを組み合わせることで影のあるARを実現してみます。
ARにプロジェクションで影をつけることで、存在感のあるARを作りました。 pic.twitter.com/iAm9tRBPEj
— 君塚史高 (@ki_230) 2020年11月10日
やってみての気づきとしては、ARで表示されるCGはプロジェクタの光の影響を受けないので、すごく影っぽく見えるということ。
何かに使えそうな気がしました。