【aframe】ランダム（position, rotation, scale, color）にオブジェクトを配置する【randomizer】
画像引用：https://ngokevin.github.io/kframe/components/randomizer/examples/basic/
こちらの記事ではaframeにてランダムの値を適用してくれるライブラリを紹介します。
randomizerコンポーネント使い方
githubはこちら
以下がサンプルコードです。
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js"></script>
</head>
<body>
<a-scene>
<a-entity geometry="primitive: box"
random-position random-rotation random-scale></a-entity>
</a-scene>
</body>
上のサンプルコードではposition, rotation, scaleが全てランダム。
あとなんとcolorもランダムにできました。
それでは応用して色々いじってみましょう。
範囲を指定する
例えばposition="-5 -5 -5"から"5 5 5"の間に表示させるように範囲を指定してみます。
<a-entity geometry="primitive: box" random-position="min: -5 -5 -5; max: 5 5 5" random-rotation scale="1 1 1"></a-entity>
このようにすれば"min: -5 -5 -5; max: 5 5 5"の間でランダムな位置に自動生成されます。
他のオブジェクトや3Dモデルに変更する
もちろんですが、box以外のいろんなオブジェクトにも適用できます。
<a-entity geometry="primitive: sphere" random-position="min: -5 -5 -5; max: 5 5 5" random-rotation scale="1 1 1"></a-entity>
3Dモデルを表示させたいときは、まず大前提としてこんな風にa-asset内で呼び出しておいて
<body>
<a-assets>
<a-asset-item id="3dmodel-obj" src="model.obj"></a-asset-item>
<a-asset-item id="3dmodel-mtl" src="model.mtl"></a-asset-item>
</a-assets>
<a-scene>
</a-scene>
</body>
a-scene内でこんな感じ
<a-scene>
<a-entity random-position="min: -5 -5 -5; max: 5 5 5" random-rotation scale="1 1 1">
<a-obj-model src="#3dmodel-obj" mtl="#3dmodel-mtl"></a-obj-model>
<!-- アニメーションなどもここに -->
</a-entity>
</a-scene>
応用してこんな感じのものが作れました
こちらはカーソルを合わせて数秒待つとオブジェクトが消える簡単なシューティングゲームですが
今回のrandomizerコンポーネントを利用してpositionを
random-position="min: -9 1 -6; max: 9 5 -10"として、常にプレイヤーの前面にランダムに出現するようにしてみました。
シューティングなんかはランダム配置した方が、ロードするたびに新鮮でより良いですよね。
