Three.js
Selected Norio sections mount a WebGL canvas with the Three.js npm package. Official docs: https://threejs.org/
Where it is used
| Effect | Mount | Source |
|---|---|---|
| Fluid simulation | Hero 1 canvas | hero-fluid.js → fluid/FluidSimulation.js |
| Glass refraction | .glass-texture |
glass-texture.js → glass-texture/GlassTexture.js |
| Grid deformation | .grid-deform |
grid-deform.js → grid-deform/GridDeform.js |
Each module looks for its host element and returns immediately when the section is not on the page. GLSL lives next to the class files in shaders.js — treat those as implementation details, not something to paste into HTML.
Notes
- In the ThemeForest HTML package, Three.js ships as a classic vendor script under
assets/js/vendors/together with the app bundle. - WebGL canvases sit inside the section
.container(or a designed full-bleed child inside it). Do not inject a canvas with inline script. - Reduced-motion users should keep a static fallback already present in the markup.
- WebGL textures need a normal browser origin. Prefer a local HTTP server; on
file://use Chrome/Edge. See Local Preview.