Update soonspacejs

soonspacejs · Oct 18, 2024 · 93f35b8 · 93f35b8
1 parent fe14b51
commit 93f35b8
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 3 deletions.
diff --git a/assets/img/fire.png b/assets/img/fire.png
diff --git a/demoList.js b/demoList.js
@@ -503,6 +503,10 @@ export default [
         title: '火焰烟雾',
         demoLink: './page/plugin/flameSmoke.html',
       },
+      {
+        title: '火焰烟雾2',
+        demoLink: './page/plugin/flameSmoke2.html',
+      },
       {
         title: '特效：粒子簇',
         demoLink: './page/plugin/particle.html',

diff --git a/libs/soonspacejs/index.js b/libs/soonspacejs/index.js
diff --git a/libs/soonspacejs/plugins/effect.js b/libs/soonspacejs/plugins/effect.js
diff --git a/page/plugin/flameSmoke.html b/page/plugin/flameSmoke.html
@@ -53,6 +53,7 @@
         maxSize: 80,
         maxLife: 30,
         rate: 20,
+        // colors: ['#000', '#f00'],
       });
 
       const flame = effectPlugin.createFlame({

diff --git a/page/plugin/flameSmoke2.html b/page/plugin/flameSmoke2.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SoonSpace Example</title>
+    <link rel="stylesheet" href="../../assets/css/base.css" />
+  </head>
+
+  <body>
+    <div id="view" style="width: 100vw; height: 100vh"></div>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "../../libs/three/build/three.module.js",
+          "three/examples/": "../../libs/three/examples/",
+          "three-mesh-bvh": "../../libs/three-mesh-bvh/build/index.module.js",
+          "soonspacejs": "../../libs/soonspacejs/index.js",
+          "@soonspacejs/plugin-effect": "../../libs/soonspacejs/plugins/effect.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import { AdditiveBlending } from 'three';
+      import SoonSpace from 'soonspacejs';
+      import EffectPlugin from '@soonspacejs/plugin-effect';
+
+      const ssp = (window.ssp = new SoonSpace({
+        el: '#view',
+        options: {
+          showInfo: true,
+          showGrid: true,
+        },
+        events: {
+          selectPosition(pos) {
+            console.log(pos);
+          },
+        },
+      }));
+
+      ssp.setCameraViewpoint({
+        position: {
+          x: 12.119629869927795,
+          y: 7.098982539461048,
+          z: 11.312157737446435,
+        },
+        target: {
+          x: -0.5779524714447183,
+          y: 2.576060203418034,
+          z: -0.7549461834230933,
+        },
+        zoom: 1,
+      });
+
+      const effectPlugin = ssp.registerPlugin(EffectPlugin, 'effectPlugin');
+
+      const fire2 = effectPlugin.createSmoke2({
+        id: 'fire2',
+        position: { x: 0, y: 0, z: 0 },
+        imgUrl: '../../assets/img/fire.png',
+        maxSize: 10,
+        maxLife: 2.5,
+        rate: 50,
+        colors: ['#fff', '#ff8080'],
+        blending: AdditiveBlending,
+      });
+      // fire2.scale.setScalar(2);
+
+      const smoke2 = effectPlugin.createSmoke2({
+        id: 'smoke2',
+        position: { x: 0, y: 0, z: 0 },
+        radius: 1,
+        maxSize: 10,
+        maxLife: 10,
+        // rate: 50,
+        // colors: ['#fff', '#fff'],
+        blending: AdditiveBlending,
+      });
+    </script>
+  </body>
+</html>