From 94312ec501c155cbafd9c543065faa2bcac57876 Mon Sep 17 00:00:00 2001 From: Forrest Sun Date: Mon, 21 Oct 2024 22:04:11 -0700 Subject: [PATCH] add follow object demo to examples --- packages/three.quarks/examples/demo.js | 7 +- .../three.quarks/examples/followObjectDemo.js | 89 +++++++++++++++++++ packages/three.quarks/examples/index.html | 11 ++- .../three.quarks/examples/softParticleDemo.js | 4 - 4 files changed, 100 insertions(+), 11 deletions(-) create mode 100644 packages/three.quarks/examples/followObjectDemo.js diff --git a/packages/three.quarks/examples/demo.js b/packages/three.quarks/examples/demo.js index b83eaa5..7cfca5a 100644 --- 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 new file mode 100644 index 0000000..b5358f2 --- /dev/null +++ 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); + } +} \ No newline at end of file diff --git a/packages/three.quarks/examples/index.html b/packages/three.quarks/examples/index.html index 8621fa2..0d66579 100644 --- 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 index cb3b23f..54014d0 100644 --- 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();