add follow object demo to examples

Alchemist0823 · Oct 22, 2024 · 94312ec · 94312ec
1 parent 07cf342
commit 94312ec
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 11 deletions.
diff --git a/packages/three.quarks/examples/demo.js b/packages/three.quarks/examples/demo.js
@@ -21,15 +21,20 @@ export class Demo {
     texture;
     camera;
     renderer;
+    controls;
+    enableControls = true;
 
     name = 'Unname';
 
-    constructor(camera, renderer) {
+    constructor(camera, renderer, controls) {
+        camera.position.set(0, 10, 10);
         this.camera = camera;
         this.renderer = renderer;
+        this.controls = controls;
     }
 
     render(delta) {
+        if (this.enableControls) this.controls.update();
         this.groups.forEach((group) =>
             group.traverse((object) => {
                 if (object.userData && object.userData.func) {

diff --git a/packages/three.quarks/examples/followObjectDemo.js b/packages/three.quarks/examples/followObjectDemo.js
@@ -0,0 +1,89 @@
+import {
+    BatchedParticleRenderer, Bezier, IntervalValue, ParticleSystem, PiecewiseBezier, ConeEmitter,
+    QuarksLoader,
+    QuarksUtil, RenderMode, SpeedOverLife,
+} from 'three.quarks';
+import {Demo} from './demo.js';
+import {
+    Mesh,
+    BoxGeometry,
+    MeshBasicMaterial,
+    Vector3,
+    TextureLoader,
+    NormalBlending,
+    AdditiveBlending,
+    DoubleSide, Group,
+} from 'three';
+import {ConstantColor, ConstantValue, Vector4} from 'quarks.core';
+
+export class FollowObjectDemo extends Demo {
+    name = 'Following Moving Objects';
+    loadedEffect = null;
+    movingObject = null;
+    refreshTime = 10;
+
+    initScene() {
+        super.initScene();
+
+        this.batchRenderer = new BatchedParticleRenderer();
+        this.scene.add(this.batchRenderer);
+
+        // Create a moving object
+        const geometry = new BoxGeometry(1, 1, 1);
+        const material = new MeshBasicMaterial({color: 0x00ff00});
+        this.movingObject = new Mesh(geometry, material);
+        this.scene.add(this.movingObject);
+
+        const texture = new TextureLoader().load('textures/particle_default.png');
+        const config = {
+            duration: 5,
+            looping: true,
+            //instancingGeometry: new PlaneGeometry(1, 1),//.rotateX((-90 / 180) * Math.PI),
+            startLife: new IntervalValue(2, 3),
+            startSpeed: new ConstantValue(20),
+            startSize: new IntervalValue(1, 2),
+            //startRotation: new EulerGenerator(new ConstantValue(0), new ConstantValue(0), new ConstantValue(0)),
+            startColor: new ConstantColor(new Vector4(1, 1, 1, 1)),
+            worldSpace: false,
+            maxParticle: 100,
+            emissionOverTime: new ConstantValue(10),
+            emissionBursts: [],
+            shape: new ConeEmitter({
+                radius: 0.1,
+                angle: 0.1,
+            }),
+            material: new MeshBasicMaterial({
+                blending: AdditiveBlending,
+                transparent: true,
+                map: texture,
+                side: DoubleSide,
+            }),
+            startTileIndex: new ConstantValue(0),
+            uTileCount: 1,
+            vTileCount: 1,
+            renderOrder: 0,
+            renderMode: RenderMode.BillBoard,
+        };
+
+        let billboard1 = new ParticleSystem(config);
+        billboard1.addBehavior(new SpeedOverLife(new PiecewiseBezier([[new Bezier(1, 0.75, 0.5, 0), 0]])));
+        billboard1.emitter.name = 'billboard'
+        let anotherObj = new Group();
+        anotherObj.add(billboard1.emitter);
+        this.movingObject.add(anotherObj);
+        this.batchRenderer.addSystem(billboard1);
+
+        this.enableControls = false;
+
+        return this.scene;
+    }
+
+    movingTime = 0;
+    render(delta) {
+        // Move the object in a circular path
+        this.movingTime += delta;
+        this.movingObject.position.set(Math.sin(this.movingTime) * 50, 0, Math.cos(this.movingTime) * 50);
+        this.camera.position.set(Math.sin(this.movingTime) * 50, 10, Math.cos(this.movingTime) * 50 + 10);
+        super.render(delta);
+    }
+}
diff --git a/packages/three.quarks/examples/index.html b/packages/three.quarks/examples/index.html
@@ -93,6 +93,7 @@
         import {BillboardDemo} from "./billboardDemo.js";
         import {SoftParticleDemo} from "./softParticleDemo.js";
         import {CustomBlendingDemo} from "./customBlendingDemo.js";
+        import {FollowObjectDemo} from "./followObjectDemo.js";
         import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 
         const WEBGL = {
@@ -157,7 +158,7 @@
         let scene;
         let demo;
 
-        let demos = [MuzzleFlashDemo, ExplosionDemo, EmitterShapeDemo, TrailDemo, SequencerDemo, MeshMaterialDemo, SubEmitterDemo, TurbulenceDemo, AlphaTestDemo, CustomPluginDemo, BillboardDemo, SoftParticleDemo, CustomBlendingDemo];
+        let demos = [MuzzleFlashDemo, ExplosionDemo, EmitterShapeDemo, TrailDemo, SequencerDemo, MeshMaterialDemo, SubEmitterDemo, TurbulenceDemo, AlphaTestDemo, CustomPluginDemo, BillboardDemo, SoftParticleDemo, CustomBlendingDemo, FollowObjectDemo];
         let demoIndex = 0;
 
         function init() {
@@ -176,7 +177,6 @@
             clock = new Clock();
 
             camera = new PerspectiveCamera(60, width / height, 1, 1000);
-            camera.position.set(0, 10, 10);
 
             controls = new OrbitControls(camera, renderer.domElement);
             //controls.target = new Vector3(0, 0, 10);
@@ -209,7 +209,7 @@
                     }
                 }
             }
-            demo = new demos[demoIndex](camera, renderer);
+            demo = new demos[demoIndex](camera, renderer, controls);
             document.querySelector("#demo-name").innerText = demo.name;
             scene = demo.initScene();
 
@@ -235,7 +235,6 @@
         }
 
         function render() {
-            controls.update();
             let delta = clock.getDelta();
             demo.render(delta);
             renderer.render(scene, camera);
@@ -251,7 +250,7 @@
             if (demo && demo.deinitScene) {
                 demo.deinitScene();
             }
-            demo = new demos[demoIndex](camera, renderer);
+            demo = new demos[demoIndex](camera, renderer, controls);
             document.querySelector("#demo-name").innerText = demo.name;
             scene = demo.initScene();
         }
@@ -264,7 +263,7 @@
             if (demo && demo.deinitScene) {
                 demo.deinitScene();
             }
-            demo = new demos[demoIndex](camera, renderer);
+            demo = new demos[demoIndex](camera, renderer, controls);
             document.querySelector("#demo-name").innerText = demo.name;
             scene = demo.initScene();
         }

diff --git a/packages/three.quarks/examples/softParticleDemo.js b/packages/three.quarks/examples/softParticleDemo.js
@@ -30,10 +30,6 @@ export class SoftParticleDemo extends Demo {
     name = 'Soft Particle & Blend Tiles Demo';
     refreshTime = 2;
 
-    constructor(camera, renderer) {
-        super(camera, renderer);
-    }
-
     initScene() {
         super.initScene();