Zenn
💭

AR.jsでWebARしてみる(6) Particle Effects

2020/10/11に公開
HTML
aframe
WebAR
AR.js
tech

はじめに

WebARで分かったことメモしていく

参考

※Particle Effects (particles.html)を勉強する

デモ

  • 以下の環境で動作を確認
    • iOS 13.7 Safari
    • Android 9 Chrome
    • Windows10 Firefox 81.0.1

ソース

参考で紹介したサイトのParticle Effects (particles.html)のソース

<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<script src="js/aframe-particle-system-component.js"></script>
<body style="margin: 0px; overflow: hidden;">

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <!-- 
    for more info, see: https://aframe.io/docs/1.0.0/components/animation.html 
    for more examples:  https://stemkoski.github.io/A-Frame-Examples/animation.html
    -->
    <a-marker type="pattern" url="data/hiro.patt">
        <a-entity 
            position="0 0 0" 
            particle-system="
                texture: images/particles/star.png;
                color: #FF0000, #FFFF00; 
                size: 1, 0;
                velocityValue: 0.001 0.001 0.001;
                velocitySpread: 0.5 0 0.5; 
                accelerationValue: 0.001 0.001 0.001;
                accelerationSpread: 0.001 0.001 0.001;
                rotationAngle: 0; 
                blending: 1;
                particleCount: 200;
                maxAge: 5; ">
        </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

確認したこと

Particle

ここaframe-particle-system-componentを読むと色々わかるっぽい。

  • texture: images/particles/star.png;
    • パーティクルの要素になる画像
    • ↓ 画像(star.png)はこれ。見えないけどある
    • 星型の図形は白色、それ以外は透過の設定
  • color: #FF0000, #FFFF00;
    • 最初と最後の色。徐々に色が変わっていく
  • size: 1, 0;
    • 最初と最後の大きさ。徐々に大きさが変わっていく
  • velocityValue: 0.001 0.001 0.001;
    • 拡散する方向の設定 (x,y,z)
    • yの値を大きくするとARマーカに対し垂直方向に広がる
  • velocitySpread: 0.5 0 0.5;
    • 速度の設定(x,y,z)
    • xの値を大きくするとARマーカに対し横方向に移動する速度が早くなる
  • accelerationValue: 0.001 0.001 0.001;
    • よーわからん
  • accelerationSpread: 0.001 0.001 0.001;
    • よーわからん
  • rotationAngle: 0;
  • blending: 1;
    • 0 (no blending), 1 (normal), 2 (additive), 3 (subtractive), 4 (multiply)
    • 0 は図形の透過が無い
    • 1 は図形の透過がある(オススメ)
    • 2 は図形が重なったところのエフェクトが変わった
    • 3,4 はわからない
  • particleCount: 200;
    • 同時に表示する個数
  • maxAge: 5;
    • 消えるまでの時間(秒)

Discussion