ThreePipe

A new way to work with three.js, 3D models and rendering on the web.

ThreePipe — Github — Examples — Docs — WebGi

ThreePipe is a 3D framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.

Key features include:

• Simple, intuitive API for creating 3D model viewers/configurators/editors on web pages, with many built-in presets for common workflows and use-cases.
• Companion editor to create, edit and configure 3D scenes in the browser.
• Modular architecture that allows you to easily extend the viewer, scene objects, materials, shaders, rendering, post-processing and serialization with custom functionality.
• Simple plugin system along with a rich library of built-in plugins that allows you to easily add new features to the viewer.
• uiconfig compatibility to automatically generate configuration UIs in the browser.
• Modular rendering pipeline with built-in deferred rendering, post-processing, RGBM HDR rendering, etc.
• Material extension framework to modify/inject/build custom shader code into existing materials at runtime from plugins.
• Extendable asset import, export and management pipeline with built-in support for gltf, glb, obj+mtl, fbx, materials(pmat/bmat), json, zip, png, jpeg, svg, webp, ktx2, ply, 3dm and many more.
• Automatic serialization of all viewer and plugin settings in GLB(with custom extensions) and JSON formats.
• Automatic disposal of all three.js resources with built-in reference management.

Installation

npm install threepipe

Getting Started

First, create a canvas element in your HTML page:

<canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>

Then, import the viewer and create a new instance:

import {ThreeViewer} from 'threepipe'
import {IObject3D} from './IObject'
// Create a viewer
const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas') as HTMLCanvasElement})

// Load an environment map
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

// Load a model
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
    autoCenter: true,
    autoScale: true,
})

That’s it! You should now see a 3D model on your page.

The viewer initializes with a Scene, Camera, Camera controls(orbit controls), several importers, exporters and a default rendering pipeline. Additional functionality can be added with plugins.

Check out the GLTF Load example to see it in action or to check the JS equivalent code: https://threepipe.org/examples/gltf-load/

License

The core framework(src, dist, examples folders) and any plugins without a separate license are licensed under the MIT license.

Some plugins(in the plugins folder) might have different licenses. Check the individual plugin documentation and the source folder/files for more details.

Examples

Check out all the examples here: https://threepipe.org/examples/

Status

The project is in alpha stage and under active development. Many features will be added but the core API will not change significantly in future releases.

Check out WebGi for a production ready solution for e-commerce and jewelry applications.

Documentation

Check the list of all functions, classes and types in the API documentation.

WebGi

Check out WebGi - Premium Photo-realistic 3D rendering framework and tools for web applications and online commerce: Homepage — Docs

Contributing

Contributions to ThreePipe are welcome and encouraged! Feel free to open issues and pull requests on the GitHub repository.