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

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

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

以前、こんなものをつくりました。

この時は、Unityをつかって影とスポットライトをつくっていたのですが、three.jsA-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でテクスチャを調整して使いました。

blog.kimizuka.org

DEMO


develop.kimizuka.org

f:id:kimizuka:20201110220527g:plain

この程度であればUnityよりもすばやく作れました。
わざわざ3Dでつくるまでもないアウトプットなのですが、モーションの付け替えなどを行う可能性を考えると、3Dでつくっておいた方が楽といえば楽です。
そして今回は、これとARを組み合わせることで影のあるARを実現してみます。



やってみての気づきとしては、ARで表示されるCGはプロジェクタの光の影響を受けないので、すごく影っぽく見えるということ。
何かに使えそうな気がしました。