diff --git a/src/components/InteractiveObjects/PuzzleGame1.js b/src/components/InteractiveObjects/PuzzleGame1.js index 644863a..ae85ca5 100644 --- a/src/components/InteractiveObjects/PuzzleGame1.js +++ b/src/components/InteractiveObjects/PuzzleGame1.js @@ -1,5 +1,4 @@ import { BoxGeometry, Mesh, MeshStandardMaterial, Group, EventDispatcher } from 'three'; -import { MotionEngine } from '../../lib/MotionEngine'; import { centerOrigin } from '@/lib/MeshUtils'; class PuzzleGame1 extends EventDispatcher { @@ -9,7 +8,7 @@ class PuzzleGame1 extends EventDispatcher { return new Promise(async (resolve, reject)=>{ let w = data.w, h = data.h, wh = w*h; let container = new Group(); - const aq = new MotionEngine(); + const aq = engine.motionQueue; const pr = [[0, 2], [0, -1], [0, 1], [1, 0], [-1, 0], [0, 0]]; let d = 1.2; @@ -76,7 +75,8 @@ class PuzzleGame1 extends EventDispatcher { aq.add({ o: i.object, a: { rotation: { x: pr[i.object._ri][0] * Math.PI / 2, y: pr[i.object._ri][1] * Math.PI / 2 } }, - t: .5 + t: .5, + s: 'PG2' }); } }; @@ -86,8 +86,7 @@ class PuzzleGame1 extends EventDispatcher { }); this.update = () => { - aq.update(); - if (aq.isIdle() && !this.done && check()) { + if (aq.isIdle('PG2') && !this.done && check()) { this.done = true; container.children.forEach((c, i) => { aq.add({ @@ -96,7 +95,8 @@ class PuzzleGame1 extends EventDispatcher { t: 1, f: i == 0 ? ()=>{ this.dispatchEvent({type:'finish'}) - } : undefined + } : undefined, + s: 'PG2' }); }); //engine.dashboard.addPoints(10); diff --git a/src/components/InteractiveObjects/PuzzleGame2.js b/src/components/InteractiveObjects/PuzzleGame2.js index 2c97450..91bb692 100644 --- a/src/components/InteractiveObjects/PuzzleGame2.js +++ b/src/components/InteractiveObjects/PuzzleGame2.js @@ -1,5 +1,4 @@ import { BoxGeometry, Mesh, MeshBasicMaterial, Group, EventDispatcher } from 'three'; -import { MotionEngine } from '../../lib/MotionEngine'; import { centerOrigin } from '@/lib/MeshUtils'; class PuzzleGame2 extends EventDispatcher { @@ -12,7 +11,7 @@ class PuzzleGame2 extends EventDispatcher { const material = new MeshBasicMaterial({ map: texture }); - const aq = new MotionEngine(); + const aq = engine.motionQueue; const m2 = new MeshBasicMaterial({ map: texture, transparent: true, @@ -113,12 +112,14 @@ class PuzzleGame2 extends EventDispatcher { o: i.object, a: { position: { x: (xl - xc) * d, y: (yl - yc) * d } }, t: .3, - m: 'offset' + m: 'offset', + s: 'PG2' },{ o: last, a: { position: { x: (xc - xl) * d, y: (yc - yl) * d } }, t: .3, - m: 'offset' + m: 'offset', + s: 'PG2' }]); xch(idx, lidx); } @@ -130,8 +131,7 @@ class PuzzleGame2 extends EventDispatcher { }); this.update = () => { - aq.update(); - if (aq.isIdle() && !this.done && check()) { + if (aq.isIdle('PG2') && !this.done && check()) { this.done = true; container.children.forEach((c, i) => { last.material = material; @@ -141,7 +141,8 @@ class PuzzleGame2 extends EventDispatcher { t: 1, f: i == 0 ? ()=>{ this.dispatchEvent({type:'finish'}) - } : undefined + } : undefined, + s: 'PG2' }); }); //engine.dashboard.addPoints(10); diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js index 9742d9a..f248dc4 100644 --- a/src/lib/GameEngine.js +++ b/src/lib/GameEngine.js @@ -28,7 +28,7 @@ class GameEngine extends THREE.EventDispatcher{ this.opts = opts; const gameEngine = this; - this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.01, 200); + this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.1, 100); this.raycaster = new THREE.Raycaster(); this.perspectiveCamera.position.set(0, 0, 10); @@ -139,12 +139,12 @@ class GameEngine extends THREE.EventDispatcher{ function animate(time) { let delta = clock.getDelta(); - gameEngine.hero?.update(); + gameEngine.hero?.update(delta); gameEngine.physics?.step(); gameEngine.mixers.forEach(m => m.update(delta)); gameEngine.handleXrAction(gameEngine, delta) gameEngine.dispatchEvent({type: 'beforeRender'}) - this.motionQueue.update(); + this.motionQueue.update(delta); gameEngine.render(scene, gameEngine.camera); if (!renderer.xr.isPresenting) { @@ -415,7 +415,7 @@ class GameEngine extends THREE.EventDispatcher{ if (object.material.map) object.material.map.colorSpace = THREE.SRGBColorSpace; //object.material.metalness = 0; } - object.frustumCulled = false; + //object.frustumCulled = false; object.castShadow = true; object.receiveShadow = true; }); diff --git a/src/lib/Hero.js b/src/lib/Hero.js index 1066f4c..147c7e3 100644 --- a/src/lib/Hero.js +++ b/src/lib/Hero.js @@ -1,4 +1,4 @@ -import { AnimationMixer, Vector3, Clock } from 'three'; +import { AnimationMixer, Vector3 } from 'three'; import { PointerControls } from './PointerControls'; import { getBoundingBox, getBoundingBoxCenterPoint, getBoundingBoxSize, centerOrigin } from './MeshUtils'; import { QueryFilterFlags } from '@dimforge/rapier3d'; @@ -77,8 +77,6 @@ class Hero{ this.actionStart = 0; this.cameraDelta = 0; this.cameraIdleDelta = 0; - - this.clock = new Clock() this.ready = true; } @@ -86,13 +84,13 @@ class Hero{ this.pointerControls.controls.lock(); } - update(){ + update(delta){ if (this.gameEngine.renderer.xr.isPresenting) return; if (this.ready && !this.disableInput) { let pc = this.pointerControls; pc.update(); - this.updateCharacterControls(this.clock.getDelta(), pc) + this.updateCharacterControls(delta, pc) } } diff --git a/src/lib/MotionEngine.js b/src/lib/MotionEngine.js index 4990f2e..5b804b4 100644 --- a/src/lib/MotionEngine.js +++ b/src/lib/MotionEngine.js @@ -1,9 +1,6 @@ -import { Clock } from 'three'; - class MotionEngine { constructor() { const aq = []; - const clock = new Clock(); this.animationQueue = aq; function calcValues(target, values, initial, k = 1, mode = 'offset') { @@ -30,7 +27,7 @@ class MotionEngine { } // a = {o-object, a-attributes, t-time, f-finish event, d-delay, m-mode, r-repeat, - // rd-repeat the delay, rf-reset on finish, u-on update} + // rd-repeat the delay, rf-reset on finish, u-on update, s-scope} this.add = function (a) { a = Array.isArray(a) ? a : [a]; a.forEach(e => { @@ -65,10 +62,9 @@ class MotionEngine { } }; - this.update = () => { - let t = clock.getDelta(); + this.update = (delta) => { if (aq.length) { - aq.forEach(e => this.animate(e, t)); + aq.forEach(e => this.animate(e, delta)); this.clear(); } }; @@ -105,8 +101,9 @@ class MotionEngine { return aq.find(e => e.o == object); }; - this.isIdle = function () { - return aq.length == 0; + this.isIdle = function (scope) { + if (!scope) return aq.length == 0; + return aq.filter(e => e.s == scope).length == 0 }; } } diff --git a/src/lib/PointerControls.js b/src/lib/PointerControls.js index 53aa121..fbfbc53 100644 --- a/src/lib/PointerControls.js +++ b/src/lib/PointerControls.js @@ -1,7 +1,4 @@ -import { - Clock, - Vector3 -} from 'three'; +import { Vector3 } from 'three'; import { PointerLockControls } from 'three/examples/jsm/Addons.js'; @@ -18,7 +15,6 @@ class PointerControls { this.camera = camera; this.hero = hero; - this.clock = new Clock(); this.click = false; this.controls = new PointerLockControls(camera, domElement); @@ -61,40 +57,7 @@ class PointerControls { this.controls.isLocked && this.onpointer && this.onpointer('end'); }); - this.update = () => { - // const delta = this.clock.getDelta() * 10; - // if (this.gp) { - // this.gp = navigator.getGamepads()[this.gp.index]; - // this.gp.pressed = this.gp.buttons[4].pressed || this.gp.buttons[5].pressed || this.gp.buttons[6].pressed || this.gp.buttons[7].pressed || this.gp.buttons[9].pressed; - // if (!this.click && this.gp.pressed) { - // this.click = true; - // this.clicked?.(); - // //console.log(this.gp.buttons.map((b,i)=>[i, b.pressed])); - // } - // if (this.click && !this.gp.pressed) this.click = false; - // } - // //this.velocity.x -= this.velocity.x * 5.0 * delta; - // this.velocity.z -= this.velocity.z * 5.0 * delta; - // this.rvelo -= this.rvelo * 5 * delta; - // // this.velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass - // this.direction.z = Number(this.moveForward) - Number(this.moveBackward) - Math.floor((this.gp && this.gp.axes[1] || 0) * 100) / 100 + (this.touchControls && this.touchControls.move || 0); - // this.rotationY = Number(this.rotateLeft) - Number(this.rotateRight) - Math.floor((this.gp && this.gp.axes[0] || 0) * 100) / 110 + (this.touchControls && this.touchControls.rotate || 0); - // //this.direction.x = Number( this.moveRight ) - Number( this.moveLeft ); - // //this.direction.normalize(); // this ensures consistent movements in all directions - // if (this.direction.z) this.velocity.z -= this.direction.z * 5.0 * delta; - // //if ( this.moveLeft || this.moveRight ) this.velocity.x -= this.direction.x * 5.0 * delta; - // if (this.rotationY) this.rvelo -= this.rotationY * 8 * delta; - - //this.velocity.x && this.controls.moveRight( - this.velocity.x * delta ); - // if (this.velocity.z) { - // this.controls.moveForward(-this.velocity.z * delta); - // this.hero.position.z += -this.velocity.z * delta; - // } - // this.controls.moveRight( this.direction.x * delta ); - // this.controls.moveForward( this.direction.z * delta ); - // this.hero.position.y += (Number(this.moveUp) - Number(this.moveDown)) * delta; - // this.hero.rotation.y += -this.rvelo * delta; - }; + this.update = () => { }; }