cheryglsljs 1.0.0 → 1.0.1

package/dist/cherry.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("chery",[],t):"object"==typeof exports?exports.chery=t():e.chery=t()}(self,(()=>(()=>{const e=new THREE.Scene,t=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),n=document.querySelector("canvas");n.width=400,n.height=400;const o=new THREE.WebGLRenderer({canvas:n});o.setSize(400,400);const r=new THREE.BoxGeometry,i=new THREE.MeshBasicMaterial({color:65280}),c=new THREE.Mesh(r,i);return e.add(c),t.position.z=2,function n(){requestAnimationFrame(n),gsap.to(c.rotation,{y:"+=0.01",duration:.1,overwrite:"auto"}),o.render(e,t)}(),{}})()));
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("chery",[],n):"object"==typeof exports?exports.chery=n():e.chery=n()}(self,(()=>(()=>{"use strict";var e={d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>r});function t(e=400,n=400){const t=new THREE.Scene,r=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),o=new THREE.WebGLRenderer({alpha:!0});return o.setSize(e,n),{Scene:t,camera:r,renderer:o}}const r={CherryWave:({container:e,image:n,speed:r=.05,strength:o=8,hover:i=!1})=>{if(!n)return void console.log("No image provided");(new THREE.TextureLoader).load(n.src,(a=>{const u={uImage:{value:a},uTime:{value:0},uStrength:{value:i?0:o}},c=t(e.clientWidth,e.clientHeight);let d;c.camera.position.z=190;new THREE.Raycaster;const s=new THREE.Vector2;function v(){const t=e.clientWidth,r=e.clientHeight,o=t/r,i=n.naturalWidth/n.naturalHeight;let a,s;o<i?(a=t,s=t/i):(s=r,a=r*i),d&&(c.Scene.remove(d),d.geometry.dispose(),d.material.dispose()),d=function(e,n){const t=new THREE.PlaneGeometry(e,n,100,100),r=new THREE.ShaderMaterial({vertexShader:"\n    varying vec2 vUv;\n    varying vec3 pos;\n    uniform float uTime;\n    uniform float uStrength;\n\n    void main() {\n    \n        vUv = uv;\n       \n        vec3 newPosition = position;\n\n        // Enhanced wave effect: move vertices in all directions\n        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);\n        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);\n        \n        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);\n\n        newPosition.x += waveX;\n        newPosition.y += waveY;\n        newPosition.z += waveZ;\n\n        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\n    }\n",fragmentShader:"\nvarying vec2 vUv;\nuniform sampler2D uImage;\nuniform float uTime;\nuniform float uStrength;\nvoid main() {\n    // Create a wave effect by modifying the y coordinate\n    vec2 uv = vUv;\n    \n  \n    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);\n    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);\n    \n    vec4 color = texture2D(uImage, uv);\n    gl_FragColor = color;\n}\n",uniforms:u});return new THREE.Mesh(t,r)}(a,s),c.mesh=d,c.Scene.add(d)}return i&&(e.addEventListener("mousemove",(function(n){const t=e.getBoundingClientRect();s.x=(n.clientX-t.left)/t.width*2-1,s.y=-(n.clientY-t.top)/t.height*2+1})),e.addEventListener("mouseenter",(()=>{gsap.to(u.uStrength,{value:o,duration:.5,ease:"power2.out"})})),e.addEventListener("mouseleave",(()=>{gsap.to(u.uStrength,{value:0,duration:.5,ease:"power2.out"})}))),e.innerHTML="",e.appendChild(c.renderer.domElement),window.addEventListener("resize",(function(){const n=e.clientWidth,t=e.clientHeight;c.renderer.setSize(n,t),c.renderer.setPixelRatio(window.devicePixelRatio),c.camera.aspect=n/t,c.camera.updateProjectionMatrix(),v()})),v(),function e(){u.uTime.value+=r,c.renderer.render(c.Scene,c.camera),requestAnimationFrame(e)}(),{mesh:c.mesh,geometry:c.geometry,renderer:c.renderer,Scene:c.Scene}}))}};return n})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheryglsljs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "\"It is threejs,glsl and gsap based js library\"",
   "main": "src/cherry.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "files": [
     "dist/",
-    "src/cherry.js"
+    "src/"
   ],
   "devDependencies": {
     "css-loader": "^6.8.1",

package/src/effects/waveEffect/Effect.js

@@ -0,0 +1,124 @@
+import createWaveAssets from '../../utils/init.js';
+import { fragmentShader } from './FragementShader.glsl.js';
+import vertexShader from './Vertexshader.glsl.js';
+
+const CherryWave = ({ container, image, speed = 0.05, strength = 8, hover = false }) => {
+  if (!image) {
+    console.log("No image provided");
+    return;
+  }
+
+  const textureLoader = new THREE.TextureLoader();
+  textureLoader.load(image.src, (texture) => {
+    const uniforms = {
+      uImage: { value: texture },
+      uTime: { value: 0.0 },
+      uStrength: { value: hover ? 0 : strength }
+    };
+
+    const waveassets = createWaveAssets(container.clientWidth, container.clientHeight);
+    waveassets.camera.position.z = 190;
+
+    let mesh;
+    const raycaster = new THREE.Raycaster();
+    const mouse = new THREE.Vector2();
+    let isHovering = false;
+
+    function createMesh(width, height) {
+      const geometry = new THREE.PlaneGeometry(width, height, 100, 100);
+      const material = new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms
+      });
+      return new THREE.Mesh(geometry, material);
+    }
+
+    function addMesh() {
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const containerAspect = containerWidth / containerHeight;
+      const imageAspect = image.naturalWidth / image.naturalHeight;
+
+      let scaleWidth, scaleHeight;
+      if (containerAspect < imageAspect) {
+        scaleWidth = containerWidth;
+        scaleHeight = containerWidth / imageAspect;
+      } else {
+        scaleHeight = containerHeight;
+        scaleWidth = containerHeight * imageAspect;
+      }
+
+      if (mesh) {
+        waveassets.Scene.remove(mesh);
+        mesh.geometry.dispose();
+        mesh.material.dispose();
+      }
+
+      mesh = createMesh(scaleWidth, scaleHeight);
+      waveassets.mesh = mesh;
+      waveassets.Scene.add(mesh);
+    }
+
+    function onResize() {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+
+      waveassets.renderer.setSize(width, height);
+      waveassets.renderer.setPixelRatio(window.devicePixelRatio);
+
+      waveassets.camera.aspect = width / height;
+      waveassets.camera.updateProjectionMatrix();
+
+      addMesh();
+    }
+
+    function onMouseMove(event) {
+      const bounds = container.getBoundingClientRect();
+      mouse.x = ((event.clientX - bounds.left) / bounds.width) * 2 - 1;
+      mouse.y = -((event.clientY - bounds.top) / bounds.height) * 2 + 1;
+    }
+
+    if (hover) {
+      container.addEventListener('mousemove', onMouseMove);
+
+      container.addEventListener('mouseenter', () => {
+        gsap.to(uniforms.uStrength, {
+          value: strength,
+          duration: 0.5,
+          ease: 'power2.out'
+        });
+      });
+
+      container.addEventListener('mouseleave', () => {
+        gsap.to(uniforms.uStrength, {
+          value: 0,
+          duration: 0.5,
+          ease: 'power2.out'
+        });
+      });
+    }
+
+    container.innerHTML = '';
+    container.appendChild(waveassets.renderer.domElement);
+    window.addEventListener('resize', onResize);
+    addMesh();
+
+    function animate() {
+      uniforms.uTime.value += speed;
+      waveassets.renderer.render(waveassets.Scene, waveassets.camera);
+      requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    return {
+      mesh: waveassets.mesh,
+      geometry: waveassets.geometry,
+      renderer: waveassets.renderer,
+      Scene: waveassets.Scene
+    };
+  });
+};
+
+export default CherryWave;

package/src/effects/waveEffect/FragementShader.glsl.js

@@ -0,0 +1,17 @@
+export const fragmentShader = `
+varying vec2 vUv;
+uniform sampler2D uImage;
+uniform float uTime;
+uniform float uStrength;
+void main() {
+    // Create a wave effect by modifying the y coordinate
+    vec2 uv = vUv;
+    
+  
+    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);
+    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);
+    
+    vec4 color = texture2D(uImage, uv);
+    gl_FragColor = color;
+}
+`;

package/src/effects/waveEffect/Vertexshader.glsl.js

@@ -0,0 +1,28 @@
+const vertexShader = `
+    varying vec2 vUv;
+    varying vec3 pos;
+    uniform float uTime;
+    uniform float uStrength;
+
+    void main() {
+    
+        vUv = uv;
+       
+        vec3 newPosition = position;
+
+        // Enhanced wave effect: move vertices in all directions
+        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);
+        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);
+        
+        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);
+
+        newPosition.x += waveX;
+        newPosition.y += waveY;
+        newPosition.z += waveZ;
+
+        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+    }
+`;
+
+export default vertexShader;

package/src/utils/init.js

@@ -0,0 +1,21 @@
+// src/utils/init.js
+const Scene = () => new THREE.Scene();
+const camera = () => new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+);
+const renderer = () => new THREE.WebGLRenderer({alpha:true});
+
+export default function createWaveAssets(width = 400, height = 400) {
+    const SceneInstance = Scene();
+    const cameraInstance = camera();
+    const rendererInstance = renderer();
+    rendererInstance.setSize(width, height);
+    return {
+        Scene: SceneInstance,
+        camera: cameraInstance,
+        renderer: rendererInstance,
+    };
+}