数字孪生开发之 Three.js 插件资源库（8）

欢迎关注公众号：【sky的数孪技术】

本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。对于之前分享的插件，可以关注公众号，后台回复相关信息（如“threejs加载3dtiles的插件”）即可获取相应信息。

本期整理出关于轮廓渲染的插件库。

webgl-outlines

在 ThreeJS 和 PlayCanvas 中实现后期处理轮廓着色器。通过后处理着色器，结合深度缓冲区和表面法线缓冲区，可以渲染出轮廓效果。

GitHub源码地址：https://github.com/OmarShehata/webgl-outlines

在线示例地址：https://threejs-outlines-postprocess.glitch.me

基础使用方式：

// 初始化RenderPass.
const composer = new EffectComposer(renderer, renderTarget);
const pass = new RenderPass(scene, camera);
composer.addPass(pass);

// 外轮廓pass.
const customOutline = new CustomOutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  scene,
  camera
);
composer.addPass(customOutline);

three-line-outline

这是一个用于three.js的几何轮廓实现，但是它是运行在顶点着色器中，而不是像素着色器。当一个相邻面背向相机而另一个面朝向时，它会显示或隐藏几何线条。这在渲染机械零件的CAD查看器时非常有用。

GitHub源码地址：https://github.com/pailhead/three-line-outline

在线示例地址：https://dusanbosnjak.com/test/outline/

基础使用方式：

const myMesh = new Mesh(new CylinderGeometry)
const myOutline = new OutlineMesh(myMesh)

outline-effect

使用 threejs 的后处理库制作的轮廓效果，它使用 sobel 边缘检测来验证场景的深度和法线纹理中的边缘。

GitHub源码地址：https://github.com/roombawulf/outline-effect

在线示例地址：https://outline-effect.vercel.app/