javascript - 有没有办法使用三个js绘制一个只有边框的盒子？

Question

我是 threejs 的新手，我想在我的 Canvas 中围绕一个符号渲染一个框。该框应该是透明的，周围应该只有边框。框的边框宽度应该是可配置的。

目前wireframe是用来渲染一个类似shape的box的，我无法将wireframe的宽度增加到1以上。文档中也提到我们不能将wireframeLinewidth增加超过1。

https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial

目前代码实现如下

const material = new THREE.MeshBasicMaterial({
  color: feature.color,
  opacity: 0.75,
  transparent: true,
  side: THREE.DoubleSide,
  wireframe: true,
  wireframeLinewidth: 1
});

如果有办法在 threejs 中构建一个具有可配置边框宽度的透明框，如形状，请帮助

Answer 1

Please help if there a way to build a transparent box like shape with configurable border width in threejs

使用 WebGL 线基元渲染线将产生 1px 宽的线。然而，实际上有一种方法可以创建具有可配置宽度的线框。以下官方示例演示了这种方法:

https://threejs.org/examples/webgl_lines_fat_wireframe

THREE.Wireframe 类将其几何线条呈现为三 Angular 形(有时称为宽线、粗线或网格线)。只需导入类以及 LineMaterial 和 WireframeGeometry2，您就可以在您的元素中使用这种方法。

three.js R107