A-Frameで雪を降らすAR

Last updated at 2022-12-07Posted at 2022-12-07

はじめに

A-Frameで雪を降らせていきまーす

開発環境

Windows 10 PC
Chrome

導入

1．こちらからクローンします

2．aframe-particle-system-component-master/examples/snow/index.htmlを下記のように編集します

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Particle System Component Example</title>
    <meta name="description" content="Hello, World!">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="../../dist/aframe-particle-system-component.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
  </head>
  <body style="margin : 0px; overflow: hidden">
    <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
      <a-entity position="0 2.25 -15" particle-system="preset: snow; particleCount: 5000"></a-entity>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

3．htmlを開いて実行してみましょう！

お疲れ様でした

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up