diff --git a/app/assets/images/waternormals.jpg b/app/assets/images/waternormals.jpg new file mode 100644 index 0000000..9dfe03c Binary files /dev/null and b/app/assets/images/waternormals.jpg differ diff --git a/app/assets/sfx/intro.js b/app/assets/sfx/intro.js index de69014..68368f4 100644 --- a/app/assets/sfx/intro.js +++ b/app/assets/sfx/intro.js @@ -2,7 +2,7 @@ import * as THREE from 'three' import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js' import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js' import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js' - +import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' class Intro{ @@ -45,7 +45,7 @@ class Intro{ this.Xcorrection = -0.02 } - initScene(LoadersResults){ console.log('initScene') + initScene(LoadersResults){ let hdrTexture const [hdrResult, texResultP42, texResultEE] = LoadersResults if((hdrResult.status === 'fulfilled') && (texResultP42.status === 'fulfilled') && (texResultEE.status === 'fulfilled')) { @@ -56,6 +56,7 @@ class Intro{ hdrTexture.mapping = THREE.EquirectangularReflectionMapping this.backgroundTextureP42.colorSpace = THREE.SRGBColorSpace this.backgroundTextureEE.colorSpace = THREE.SRGBColorSpace + } else { console.error('Loading error:', hdrResult, texResultP42, texResultEE) return @@ -64,7 +65,8 @@ class Intro{ this.scene = new THREE.Scene() this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 100) - this.camera.position.set(0.1, 0.02, 4) + this.camera.position.set(-2, -0.5, 4) //(0.1, 0.02, 4) + this.camera.lookAt(0,0,0) this.renderer = new THREE.WebGLRenderer({ antialias: true, @@ -164,6 +166,7 @@ class Intro{ }) + // === Resize handling === window.addEventListener('resize', () => { this.camera.aspect = window.innerWidth / window.innerHeight @@ -226,24 +229,30 @@ class Intro{ this.matEE.defines.USE_UV = "" this.matEE.onBeforeCompile = shader => { shader.uniforms.uReveal = { value: 0 } + shader.uniforms.uTime = { value: 0 }; shader.fragmentShader = shader.fragmentShader .replace( `#include `, `#include - uniform float uReveal;` + uniform float uReveal; + uniform float uTime; + ` ) .replace( `#include `, `#include - if (vUv.x > uReveal) discard; + if ((uReveal-vUv.x) < (1.0-uReveal)){ + float random = fract(sin(dot(gl_FragCoord.xy + vec2(uTime) , vec2(12.9898,78.233))) * 43758.5453); + if(random > 0.1) discard; + } ` ) this.matEE.userData.shader = shader } - + this.planeEE = new THREE.Mesh(geo, this.matEE) this.planeEE.scale.set(.2, .2, 1) - this.planeEE.position.set(0, -0.8, 0) + this.planeEE.position.set(0,-0.8,.1) this.planeEE.renderOrder = 1 this.scene.add(this.planeEE) } else { @@ -255,19 +264,36 @@ class Intro{ } animate() { + TWEEN.update() + this.camera.lookAt(0,0,0) requestAnimationFrame(this.animate.bind(this)) if (this.matEE.userData.shader) { if(this.matEE.userData.shader.uniforms.uReveal.value<1){ this.matEE.userData.shader.uniforms.uReveal.value += 0.01 + this.matEE.userData.shader.uniforms.uTime.value = Math.floor(performance.now() / 200) } } if(Date.now()>this.nextAnim){ + + this.#lettersZ += .005 for(const letter of this.glassLetters){ letter.position.z += 0.005 } - if(this.#lettersZ>1.5) { + if(this.#lettersZ>0.5){ + if(!this.camTween){ + this.camTween = new TWEEN.Tween(this.camera.position) + .to({ x: 0.1, + y: 0.02, + z: 4, + }, 7000) + .easing(TWEEN.Easing.Sinusoidal.InOut) + .start() + } + } + + if(this.#lettersZ>1.5) { for(const [i, letter] of this.glassLetters.entries()){ letter.rotation.x += Math.abs(i-4)/-1000 letter.rotation.y += (i-4)/2000 diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index 5a2e9a2..46758a1 100644 --- a/app/views/editors/KeyframeView.js +++ b/app/views/editors/KeyframeView.js @@ -88,7 +88,7 @@ class KeyframeView extends WindozDomContent { this.outputs.agentsSelector.value = type await this.onChangeAgent() const defaultValues = this.getFieldsValues('div[data-output="agentProperties"]') - return(this.newAgent(type, { ...defaultValues, ...properties })) //TODO: deepMerge + return(await this.newAgent(type, { ...defaultValues, ...properties })) //TODO: deepMerge } else { throw(`Invalid agent type: ${type}`) } diff --git a/app/views/editors/modules/kfArena.module.js b/app/views/editors/modules/kfArena.module.js index 6719b3e..fdd479c 100644 --- a/app/views/editors/modules/kfArena.module.js +++ b/app/views/editors/modules/kfArena.module.js @@ -1,6 +1,6 @@ -import * as THREE from 'three' // '/app/thirdparty/Three/three.module.js' -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // '/app/thirdparty/Three/OrbitControls.module.js' -import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' //'/app/thirdparty/Three/tween.module.js' +import * as THREE from 'three' +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' +import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' export class kfArena{ @@ -161,23 +161,27 @@ export class kfArena{ } moveAgent(aid, position){ - let obj3d = this.scene.getObjectByName(aid) + const obj3d = this.scene.getObjectByName(aid) + this.clearHighlight3DObj(obj3d, this.scene) const dx = Number(position.x) - obj3d.position.x const dy = Number(position.z) - obj3d.position.y const dz = Number(position.y) - obj3d.position.z - new TWEEN.Tween(obj3d.position) + if(this.moveAgentTween) this.moveAgentTween.stop() + this.moveAgentTween = new TWEEN.Tween(obj3d.position) .to({ x: Number(position.x), y: Number(position.z), z: Number(position.y), }, 500) .easing(TWEEN.Easing.Quadratic.InOut) + .onComplete(() => { this.highlight3DObj(obj3d, this.scene) } ) .start() - obj3d = this.scene.getObjectByName(`_speed_${aid}`) - if(obj3d){ - new TWEEN.Tween(obj3d.position) - .to({ x: obj3d.position.x + dx, - y: obj3d.position.y + dy, - z: obj3d.position.z + dz, + const arrow3d = this.scene.getObjectByName(`_speed_${aid}`) + if(arrow3d){ + if(this.moveArrowTween) this.moveArrowTween.stop() + this.moveArrowTween = new TWEEN.Tween(arrow3d.position) + .to({ x: arrow3d.position.x + dx, + y: arrow3d.position.y + dy, + z: arrow3d.position.z + dz, }, 500) .easing(TWEEN.Easing.Quadratic.InOut) .start()