Webgl-three-library NPM

✨ 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;
}

dat.gui glsl-noise glslify gsap imagesloaded regenerator-runtime three

@infinitebrahmanuniverse/nolb-webg @everything-registry/sub-chunk-3127

1.0.1

2 years ago

1.0.0

2 years ago