下面这个示例我觉得特别棒,我会推荐给我们的美工,以后产品的宣传图用它。比如下面这个图,不需要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,后面会在使用过程中分析具体的一两个点,敬请期待。