摘要：ThreePipe 是一个建立在 three.js 之上的 3D 框架，使用 TypeScript 开发，专注于渲染质量、模块化和可扩展性。

ThreePipe 是一个建立在 three.js 之上的 3D 框架，使用 TypeScript 开发，专注于渲染质量、模块化和可扩展性。

主要特点包括：

- 简单直观的 API，用于在网页上创建 3D 模型查看器/配置器/编辑器，内置许多预设以适应常见的工作流程和用例。

- 配套编辑器，用于在浏览器中创建、编辑和配置 3D 场景。

- 模块化架构，允许你轻松扩展查看器、场景对象、材质、着色器、渲染、后处理和序列化功能。

- 插件系统以及丰富的内置插件库，让你可以轻松地为查看器添加新功能。

- 与 uiconfig 兼容，自动在浏览器中生成配置 UI。

- 模块化渲染管线，内置延迟渲染、后处理、RGBM HDR 渲染等。

- 材质扩展框架，允许从插件中在运行时修改/注入/构建自定义着色器代码到现有材质。

- 可扩展的资产导入、导出和管理管线，内置支持 gltf、glb、obj+mtl、fbx、材质(pmat/bmat)、json、zip、png、jpeg、svg、webp、ktx2、ply、3dm 等格式。

- 自动将所有查看器和插件设置序列化为 GLB（带自定义扩展）和 JSON 格式。

- 自动处理所有 three.js 资源的内置引用管理。

import {ThreeViewer, DepthBufferPlugin} from 'http://threepipe.org/dist/index.mjs'

const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas')})

// Add some plugins

viewer.addPluginSync(new DepthBufferPlugin)

// Load an environment map

const envPromise = viewer.setEnvironmentMap('http://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

const modelPromise = viewer.load('http://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {

autoCenter: true,

autoScale: true,

})

Promise.all([envPromise, modelPromise]).then(([env, model]) => {

console.log('Loaded', model, env, viewer)

})

来源：小雨科技频道