0.13.0 release

major fix on intervalValue and colorRange. generalize value memorization
Alchemist0823 · Jun 16, 2024 · 39e8758 · 39e8758
1 parent 95fa92e
commit 39e8758
Show file tree

Hide file tree

Showing 57 changed files with 696 additions and 61,133 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 # Builds
 dist/
 examples/js/three.quarks.esm.js
+examples/js/three.module.js
+examples/js/examples
 
 # Logs
 logs

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## version 0.13.0
+- Fix the Rotation3dOverLife behavior doesn't work on mesh particle bug
+- Refactor function/value generator system to support memorization
+
 ## version 0.12.3
 - Fix package json exports field
 

diff --git a/examples/alphaTestDemo.js b/examples/alphaTestDemo.js
@@ -17,7 +17,7 @@ import {
 } from 'three.quarks';
 import {MeshBasicMaterial, NormalBlending, AdditiveBlending, TextureLoader, Vector4, Vector3} from 'three';
 import {Demo} from './demo.js';
-import {GLTFLoader} from './js/GLTFLoader.js';
+import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
 
 export class AlphaTestDemo extends Demo {
     name = 'AlphaTest';

diff --git a/examples/demo.js b/examples/demo.js
@@ -70,8 +70,8 @@ export class Demo {
         plane.position.set(0, -10, 0);
         plane.lookAt(new Vector3(0, 1, 0));
 
-        const light = new PointLight(0xffffff, 1000, 300);
-        light.position.set(0, 5, 0);
+        const light = new PointLight(0xffffff, 500, 1000);
+        light.position.set(0, 5, 5);
         this.scene.add(light);
         return this.scene;
     }

diff --git a/examples/emitterShapeDemo.js b/examples/emitterShapeDemo.js
@@ -8,7 +8,7 @@ import {
     AdditiveBlending,
     NormalBlending,
     TextureLoader,
-    MeshBasicMaterial,
+    MeshBasicMaterial, MeshStandardMaterial, MeshLambertMaterial,
 } from 'three';
 import {
     GridEmitter,
@@ -27,7 +27,9 @@ import {
     BatchedParticleRenderer,
     EmitterMode,
 } from 'three.quarks';
+import {TextGeometry} from 'three/examples/jsm/geometries/TextGeometry.js';
 import {Demo} from './demo.js';
+import {FontLoader} from 'three/examples/jsm/loaders/FontLoader.js';
 
 export class EmitterShapeDemo extends Demo {
     name = 'Different Emitter Shapes';
@@ -74,114 +76,179 @@ export class EmitterShapeDemo extends Demo {
         this.batchRenderer = new BatchedParticleRenderer();
         this.scene.add(this.batchRenderer);
 
-        this.texture = new TextureLoader().load('textures/texture1.png', (texture) => {
-            this.texture.name = 'textures/texture1.png';
-
-            let particles = this.initParticleSystem();
-            particles.emitterShape = new PointEmitter();
-            particles.emitter.name = 'point';
-            //particles.emitter.rotation.y = Math.PI / 2;
-            particles.emitter.position.set(-5, -5, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new SphereEmitter({
-                radius: 1,
-                thickness: 0.2,
-                arc: Math.PI * 2,
-            });
-            particles.emitter.name = 'Sphere';
-            //particles.emitter.rotation.y = Math.PI / 2;
-            particles.emitter.position.set(-5, 0, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new HemisphereEmitter({
-                radius: 1,
-                thickness: 0.2,
-                arc: Math.PI * 2,
-            });
-            particles.emitter.name = 'Hemisphere';
-            particles.emitter.rotation.x = -Math.PI / 2;
-            particles.emitter.position.set(-5, 5, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new ConeEmitter({
-                radius: 1,
-                thickness: 1,
-                arc: Math.PI * 2,
-                angle: Math.PI / 4,
-            });
-            particles.emitter.name = 'Cone';
-            particles.emitter.position.set(0, -5, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new CircleEmitter({
-                radius: 1,
-                thickness: 0.2,
-                arc: Math.PI * 2,
-            });
-            particles.emitter.name = 'Circle';
-            //particles.emitter.rotation.y = Math.PI / 2;
-            particles.emitter.position.set(0, 0, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new DonutEmitter({
-                radius: 2,
-                thickness: 1,
-                arc: Math.PI * 2,
-                donutRadius: 0.2,
-            });
-            particles.emitter.name = 'Donut';
-            //particles.emitter.rotation.y = Math.PI / 2;
-            particles.emitter.position.set(0, 5, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new ConeEmitter({
-                radius: 1,
-                thickness: 0.2,
-                arc: Math.PI * 2,
-                angle: 0,
-                mode: EmitterMode.Loop,
-                spread: 0,
-                speed: new ConstantValue(3),
-            });
-            particles.emitter.name = 'Loop';
-            //particles.emitter.rotation.y = Math.PI / 2;
-            particles.emitter.position.set(5, -5, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
-
-            particles = this.initParticleSystem();
-            particles.emitterShape = new GridEmitter({
-                width: 2,
-                height: 2,
-                rows: 10,
-                columns: 10,
+        const loader = new FontLoader();
+
+        loader.load( 'js/examples/fonts/helvetiker_regular.typeface.json', ( font ) => {
+
+            const fontConfig = {
+                font: font,
+                size: 0.4,
+                depth: 0.02,
+                curveSegments: 8,
+                bevelEnabled: true,
+                bevelThickness: 0.05,
+                bevelSize: 0.04,
+                bevelOffset: 0,
+                bevelSegments: 2
+            };
+
+            this.texture = new TextureLoader().load('textures/texture1.png', (texture) => {
+                this.texture.name = 'textures/texture1.png';
+
+                let particles = this.initParticleSystem();
+                particles.emitterShape = new PointEmitter();
+                particles.emitter.name = 'Point';
+                //particles.emitter.rotation.y = Math.PI / 2;
+                particles.emitter.position.set(-5, -5, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                let text = new Mesh(
+                    new TextGeometry('Point', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(-5, -7, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new SphereEmitter({
+                    radius: 1,
+                    thickness: 0.2,
+                    arc: Math.PI * 2,
+                });
+                particles.emitter.name = 'Sphere';
+                //particles.emitter.rotation.y = Math.PI / 2;
+                particles.emitter.position.set(-5, 0, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Sphere', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(-5, -2, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new HemisphereEmitter({
+                    radius: 1,
+                    thickness: 0.2,
+                    arc: Math.PI * 2,
+                });
+                particles.emitter.name = 'Hemisphere';
+                particles.emitter.rotation.x = -Math.PI / 2;
+                particles.emitter.position.set(-5, 5, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Hemisphere', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(-5, 3, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new ConeEmitter({
+                    radius: 1,
+                    thickness: 1,
+                    arc: Math.PI * 2,
+                    angle: Math.PI / 4,
+                });
+                particles.emitter.name = 'Cone';
+                particles.emitter.position.set(0, -5, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Cone', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(0, -7, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new CircleEmitter({
+                    radius: 1,
+                    thickness: 0.2,
+                    arc: Math.PI * 2,
+                });
+                particles.emitter.name = 'Circle';
+                //particles.emitter.rotation.y = Math.PI / 2;
+                particles.emitter.position.set(0, 0, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Circle', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(0, -2, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new DonutEmitter({
+                    radius: 2,
+                    thickness: 1,
+                    arc: Math.PI * 2,
+                    donutRadius: 0.2,
+                });
+                particles.emitter.name = 'Donut';
+                //particles.emitter.rotation.y = Math.PI / 2;
+                particles.emitter.position.set(0, 5, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Donut', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(0, 3, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new ConeEmitter({
+                    radius: 1,
+                    thickness: 0.2,
+                    arc: Math.PI * 2,
+                    angle: 0,
+                    mode: EmitterMode.Loop,
+                    spread: 0,
+                    speed: new ConstantValue(3),
+                });
+                particles.emitter.name = 'Loop';
+                //particles.emitter.rotation.y = Math.PI / 2;
+                particles.emitter.position.set(5, -5, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Loop', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(5, -7, 2);
+                this.scene.add(text);
+
+                particles = this.initParticleSystem();
+                particles.emitterShape = new GridEmitter({
+                    width: 2,
+                    height: 2,
+                    rows: 10,
+                    columns: 10,
+                });
+                particles.emitter.name = 'Grid';
+                //particles.emitter.rotation.y = Math.PI / 2;
+                particles.emitter.position.set(5, 0, 2);
+                this.batchRenderer.addSystem(particles);
+                this.scene.add(particles.emitter);
+                this.groups.push(particles.emitter);
+                text = new Mesh(
+                    new TextGeometry('Grid', fontConfig),
+                    new MeshLambertMaterial({color: new Color(0x999999)})
+                );
+                text.position.set(5, -2, 2);
+                this.scene.add(text);
             });
-            particles.emitter.name = 'Grid';
-            //particles.emitter.rotation.y = Math.PI / 2;
-            particles.emitter.position.set(5, 0, 2);
-            this.batchRenderer.addSystem(particles);
-            this.scene.add(particles.emitter);
-            this.groups.push(particles.emitter);
         });
         return this.scene;
     }

diff --git a/examples/index.html b/examples/index.html
@@ -19,7 +19,8 @@
         {
           "imports": {
             "three": "./js/three.module.js",
-            "three.quarks": "./js/three.quarks.esm.js"
+            "three.quarks": "./js/three.quarks.esm.js",
+            "three/examples/": "./js/examples/"
           }
         }
     </script>
@@ -75,7 +76,6 @@
             PerspectiveCamera,
             WebGLRenderer,
         } from "three";
-        import {OrbitControls} from "./js/OrbitControls.js";
         import Stats from "./js/Stats.min.js";
         import {
             MuzzleFlashDemo,
@@ -92,6 +92,7 @@
         import {BillboardDemo} from "./billboardDemo.js";
         import {NodeBasedVFXDemo} from "./nodeBasedVFXDemo.js";
         import {SoftParticleDemo} from "./softParticleDemo.js";
+        import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 
         const WEBGL = {
             isWebGLAvailable: function () {