Easy to Use
WebGi was designed from the ground up to be easily installed and used to get your website up and running quickly.
Focus on What Matters
WebGi lets you focus on your application and design, and we'll do all the graphics and maths. So you can focus on what matters.
Powered by three.js
Extend or customize your 3D applications by reusing three.js. WebGi is completely customisable and can easily be extended to fit your needs.
Model Viewer Tutorials
Get started with adding a 3D viewer on a simple HTML page and loading an model with lighting.
An overview of AssetManagementPlugin in WebGi that can be used to import, add and export different types of assets like 3d models, materials, images.
Tutorial on how to access the default camera in the viewer, setting the transform, control options and animate between different camera views/states.
Extending with three.js
An introduction of how to access and interface with the three.js primitive objects within the viewer.
An overview of the Picking Plugin bundled within WebGi to handle object selection and manage mouse interactions on 3d models and the canvas.
A tutorial and example on using the GLTFAnimationPlugin to play and manage all or selected animations parsed from a GLTF file.
Scrollable 3d websites
A tutorial and example on using the ScrollableCameraViewsPlugin to animate camera along with page scroll.
Animation and Tween
A tutorial on using the Popmotion animation library with the bundled PopmotionPlugin to tween values, and choreograph animations synced with the render loop.
Provides an overview of writing a custom Material Configurator Plugin to configure materials variants the scene, displaying them in an HTML Ui and handling serialization.
Writing Custom Plugins
An advanced overview of writing custom plugins to extend the functionality of the 3d viewer with custom features while integrating with the existing framework and other plugins.