看Threejs好玩示例，学习创新与技术(ThreePipe)

下面这个示例我觉得特别棒，我会推荐给我们的美工，以后产品的宣传图用它。比如下面这个图，不需要PS，仅需拖拽一个照片进去，它会自动铺到笔记本电脑上。完成后点击截图就可以得到高清图片，不需要摆拍和PS。大家可以从《Interactive 3D Device Showcase with Threepipe (tympanus.net)》中去体验。

1、 技术栈

示例用到了两个主要的组件。第一个是 tweakpane（GitHub - cocopon/tweakpane: :control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes），它是一个控制面板，风格比较多。

第二个组件是threepipe（ThreePipe），它是一个封装ThreeJS的SDK包集工具箱。使用它的代码相比于原生ThreeJS代码，可以会方便快捷很多。它有比较多的插件可以直接使用。比如CameraViewPlugin（视角控制）、PickingPlugin（拣选对象）、TransformAnimationPlugin（动画模拟）、CanvasSnapshotPlugin（截图）。

把图片放上去平铺到一个Mesh节点中，是一个比较简单的技术活，在此就不展开讨论。

2、threepipe有哪些新奇的玩意

具体threepipe的内容我就不列举了，就挑一些比较有用的东西跟大家说说。

2.1  Threepipe Editor

        这是一个三维模型编辑器，类似glTFViewer、ThreeJS Editor、Babylon Sandbox。但该编辑器包含了很多渲染过程管理，比如渲染流水线中的Pass、后处理过程、及选择过程中Buffer情况。你可以尝试控制每个Pass，学习到渲染流水线是如何运行的，会得到什么样的结果。在这里，你相当获得一个网页版的unity调试器。当然这些操作稍微有点卡，可以先小模型试试。

 2.2 其他特征

在2.1 其实初步介绍了该软件的特点，即帮助开发者降低一些渲染流水线效果的实现的逻辑。除了多种文件格式的加载，它在渲染效果方面也有很多案例。比如珠宝的展示。在示例文档中，包含了具体的实现逻辑和效果，在需要的时候可以直接用。

写在最后，本文没有从技术使用和技术实现角度展开分析ThreePipe，后面会在使用过程中分析具体的一两个点，敬请期待。