# ThreePipe
A new way to work with three.js, 3D models and rendering on the web.
[ThreePipe](https://threepipe.org/) —
[Github](https://github.com/repalash/threepipe) —
[Examples](https://threepipe.org/examples/) —
[Docs](https://threepipe.org/docs/) —
[WebGi](https://webgi.xyz/docs/)
[](https://opensource.org/licenses/MIT)
[](https://discord.gg/apzU8rUWxY)
[](https://www.npmjs.com/package/threepipe)
[](https://twitter.com/repalash)
ThreePipe is a 3D framework built on top of [three.js](https://threejs.org/) 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](TODO) 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](https://github.com/repalash/uiconfig.js) 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
```bash
npm install threepipe
```
## Getting Started
First, create a canvas element in your HTML page:
```html
```
Then, import the viewer and create a new instance:
```typescript
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('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](./src), [dist](./dist), [examples](./examples) folders) and any [plugins](./plugins) without a separate license are licensed under the [MIT license](./LICENSE).
Some plugins(in the [plugins](./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](https://webgi.xyz/) 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](https://threepipe.org/docs/).
## WebGi
Check out WebGi - Premium Photo-realistic 3D rendering framework and tools for web applications and online commerce: [Homepage](https://webgi.xyz/) — [Docs](https://webgi.xyz/docs/)
[](https://twitter.com/pixotronics)
## Contributing
Contributions to ThreePipe are welcome and encouraged! Feel free to open issues and pull requests on the GitHub repository.