future.png
珠玑技术随笔
联系/Contact:
future.png

ThreeJS ExtrudeBufferGeometry 出现连线失真问题的优化方法

2021年08月10日

Hsu

2分钟

背景

在画一个管道形状的几何体中,这个几何体是用一个自定义的 Shape 作为断面,使用 ExtrudeBufferGeometry 画出来的。
画出来后,几何体出现连线失真的小问题,可以用 MeshBasicMaterial 的 side 和 depthFunc 两个属性优化它。

参考

https://stackoverflow.com/questions/31940273/rendering-transparent-mesh-with-overlapping-triangles-in-three-js

const extrudeSettings = {
  steps: 50,
  depth: 30,
  bevelEnabled: false,
  bevelThickness: 5,
  bevelSize: 1,
  bevelOffset: 0,
  bevelSegments: 25,
};

const sGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
const sMat = new THREE.MeshBasicMaterial({
  color: "#818181",
  transparent: true,
  opacity: 0,
  side: THREE.DoubleSide,
  depthFunc: THREE.LessDepth,
});
const item = new THREE.Mesh(sGeom, sMat);
scene.add(item);