Merge pull request #4 from 42Benefit/develop

activeWater()

package.json

@@ -11,6 +11,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.5.0",
+		"@types/three": "^0.152.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
 		"typescript": "^4.9.3",

src/lib/three/Factory/Water.svelte

@@ -4,7 +4,7 @@
   import { Water } from "three/examples/jsm/objects/Water.js";
 
   export const WaterFactory = (scene) => {
-    const waterGeometry = new THREE.PlaneGeometry(5000, 5000);
+    const waterGeometry = new THREE.PlaneGeometry(1000, 1000, 500, 500);
     const waterMaterial = {
       textureWidth: 512,
       textureHeight: 512,
@@ -22,12 +22,32 @@
       fog: scene.fog !== undefined,
     };
     const water = new Water(waterGeometry, waterMaterial);
+    water.name = "ocean"
     water.rotation.x = -Math.PI / 2;
 
     water.wave = () => {
       water.material.uniforms["time"].value += 1.0 / 60.0;
     };
     
+    water.activeWave = (hitPoint, hitTime) => {
+      const deltaTime = performance.now() * 0.01;
+      if (deltaTime - hitTime > 50) {
+        return ;
+      }
+      const position = water.geometry.attributes.position;
+        for (let i = 0; i < position.count; i++) {
+          const vector = new THREE.Vector3();
+          const height = Math.exp(-((deltaTime - hitTime) * 0.1));
+          vector.fromBufferAttribute(position, i);
+          const distance = vector.distanceTo(hitPoint);
+          const effectedDistance = 10;
+          const wave = Math.cos(deltaTime + distance / 2);
+          vector.z = height * Math.max(effectedDistance - (distance / 2), 0) * wave;
+          position.setXYZ(i, vector.x, vector.y, vector.z);
+        }
+        position.needsUpdate = true;
+    };
+    
     return water;
   };
 </script>

src/lib/three/scene.svelte

@@ -25,6 +25,9 @@
   export const sun = new SunFactory(scene, sky, water, new THREE.PMREMGenerator(renderer));
 
   let mouse = new THREE.Vector2();
+  let hitPoint = new THREE.Vector3();
+  let hitTime = performance.now() * 0.01;
+
   const controls = new OrbitControls(camera, renderer.domElement);
 
   loader.load(
@@ -51,6 +54,7 @@
     
     requestAnimationFrame(animate);
     water.wave();
+    water.activeWave(hitPoint, hitTime);
     controlCamera();
     resize(renderer, camera);
     renderer.render(scene, camera);
@@ -92,6 +96,11 @@
     let ray = new THREE.Raycaster();
     ray.setFromCamera(mouse, camera);
     let intersects = ray.intersectObjects(scene.children);
+    if (intersects[0].object.isWater === true)
+    {
+      hitPoint = new THREE.Vector3(water.geometry.parameters.width * (intersects[0].uv.x - 0.5), water.geometry.parameters.height * (intersects[0].uv.y - 0.5), 0);
+      hitTime = performance.now() * 0.01;
+    }
     if (
       intersects.length > 0 &&
       intersects[0].object.name === "defaultMaterial_1"
@@ -127,7 +136,8 @@
   export const createScene = () => {
     document.querySelector(".app").append(renderer.domElement);
     resize(renderer, camera);
-    sun.darken();
+    // sun.darken();
+    sun.lighten();
     animate();
   };