✨ WEBGL LIBRARY ✨

npm install webgl-three-library

• src
  • Utils
    • Time.js
    • Size.js
    • MouseTracking.js
    • index.js
    • DOMImages.js
    • Ressources.js
    • Scroll.js
  • effects
    • Effect
      • shaders
        • fragment.glsl
        • vertex.glsl
      • effect.js
    • ...
    • Camera.js
    • Experience.js
    • Renderer.js

1. Instanciate main class

Create <canvas class="webgl"></canvas> on your html. Instantiate the Experience class which gathers all the classes of the library.

new Experience(document.querySelector('canvas.webgl'), { parameters });

It takes different parameters :

| Parameter | Value | | Description | | ----------- | ----------- | ----------- | ----------- | | activeOrbitControls | bool | required | Active Three.js OrbitControls | | planeOptions.widthSegments | number | required | Refer to threejs documentation | | planeOptions.heightSegments | number | required | Refer to threejs documentation | | uniformsOptions | object | not required | For add uniforms. Refer to threejs documentation | | shaderOptions.vertexShader | vertex.glsl | required | Can import the vertex shader from effects folder | | shaderOptions.fragmentShader | fragment.glsl | required | Can import the fragment shader from effects folder | | cameraOptions.fov | number | required | Refer to threejs documentation | | cameraOptions.instance.x | number | not required | Refer to threejs documentation | | cameraOptions.instance.y | number | not required | Refer to threejs documentation | | cameraOptions.instance.z | number | not required | Refer to threejs documentation | | cameraOptions.lookat | Threejs instance| not required | Refer to threejs documentation. By default can put new THREE.Vector3() | | rendererOptions | object | not required | Refer to threejs documentation. | | actions.onEnter | func | required | Function executed when the mouse enter the planes. The intersect parameter allows to access the intersected plane | | actions.onLeave | func | required | Function executed when the mouse leave the planes. The intersect parameter allows to access the intersected plane | | actions.onMove | func | required | Function executed when the mouse moves on the window | | actions.onScroll | func | required | Function executed on scroll | | loaderState.startLoader | func | required | Function executed on html images start loading | | loaderState.stopLoader | func | required | Function executed on html images finish loading |

2. Insert images

Create ./static folder for all images

uMouse: {
  value: this.mousePosition // get mouse coordinates in 3D renderer (x, y)
},
uTime: {
  value: 0.0 // get time
},
uHover: {
  value: new THREE.Vector2(0.5, 0.5) // get hover centered position
},
uHoverState: {
  value: 1.0 // 1 if is not hovered and 0 if is hovered
}

How to implement effect ?

To use each effect, use fragments shader and vertex shader from the effects/effect.js :

import { shadersOptions } from '../src/Experience/effects/wavesEffect/wavesEffect';

shaderOptions: {
  vertexShader: shadersOptions.vertex,
  fragmentShader: shadersOptions.fragment,
}

To recreate effect can retrieve in demo library, this is the default options and functions :

Effects default setup

Waves & interaction effect

Default animation :

// plane options
planeOptions: {
  widthSegments: 8,
  heightSegments: 8,
},

// camera otpions
cameraOptions: {
  fov: 70,
  instance: {
    x: 1,
    y: 1,
    z: 600,
  },
  lookAt: new THREE.Vector3(),
},

// actions
function onEnter(intersect) {
  intersect.object.material.uniforms.uHover.value = intersect.uv;
  intersect.object.material.uniformsNeedUpdate = true;
}

function onLeave(intersect) {
  intersect.object.material.uniforms.uTime.value = 0.0;
  intersect.object.material.uniformsNeedUpdate = true;
}

function onTimeRunning() {
  experience.DOMImages.imageParameters;
  if(experience.DOMImages.imageParameters) {
    experience.DOMImages.imageParameters.forEach(imageParameter => {
      imageParameter.mesh.material.uniforms.uTime.value = experience.time.elapsed * 0.002;
    });
  }
}

Ripple rgb effect

Default animation :

// plane options
planeOptions: {
  widthSegments: 16,
  heightSegments: 16,
}

// camera options
cameraOptions: {
  fov: 70,
  instance: {
    x: 1,
    y: 1,
    z: 600,
  },
  lookAt: new THREE.Vector3(),
}

// actions
function onEnter(intersect) {
  intersect.object.material.uniforms.uHover.value = intersect.uv;
  intersect.object.material.uniforms.uTime.value = experience.time.elapsed * 0.001;
  intersect.object.material.uniformsNeedUpdate = true;
}

function onLeave(intersect) {
  intersect.object.material.uniforms.uTime.value = 0.0;
  intersect.object.material.uniformsNeedUpdate = true;
}