三 JS LineBasicMaterial 如何在 3D 轴上绘制简单的粗线？答案

【问题标题】：Three JS LineBasicMaterial how to draw simple fat line in 3D axis?三 JS LineBasicMaterial 如何在 3D 轴上绘制简单的粗线？
【发布时间】：2019-08-15 23:47:06
【问题描述】：

lineMat = new THREE.LineBasicMaterial({color, linewidth: 5});

不起作用。

我需要一个简单的 3D 方法（旋转场景）：线宽大于 1px 的 drawLine(measurement1, measure2, color)

我了解 Windows 和 Angle。我搜索并尝试解决这个问题几天（大多数找到的方法都不起作用或仅在 2D 中起作用或内部有问题）

【问题讨论】：

标签： javascript typescript three.js

【解决方案1】：

它不起作用，因为 WebGL 线图元始终呈现为 1px 宽的线。但是，three.js 提供了基于三角形渲染所谓的宽线或粗线的可能性。因此，使用 LineGeometry、LineMaterial 和 Line2 类应该可以解决您的问题。

官方示例：https://threejs.org/examples/webgl_lines_fat

three.js R107

【讨论】：

谢谢，我试过这个方法（Line2）但不成功。我已经通过 THREE.MeshLine github.com/spite/THREE.MeshLine 完成了
“不成功”是什么意思？官方的例子显然效果很好。
我从这里github.com/mrdoob/three.js/blob/master/examples/… 实施它时遇到了错误和问题。如果它是 Three 的一部分（如 THREE.FatLine ），也许它会更有用。抱歉，我只需要一个简单的方法来处理两点。

【解决方案2】：

Thanks to @Stranger in the Q

https://github.com/spite/THREE.MeshLine

import * as THREE from 'three';
import { MeshLine, MeshLineMaterial} from 'three.meshline';

  drawLine(measurement1, measurement2, color) {
    const geometry = new THREE.Geometry();
    geometry.vertices.push(
      new THREE.Vector3( measurement1.X,  measurement1.Y,  measurement1.Z ),
      new THREE.Vector3( measurement2.X,  measurement2.Y,  measurement2.Z )
    );
    const line = new MeshLine();
    line.setGeometry( geometry );
    const material = new MeshLineMaterial({color});
    const mesh = new THREE.Mesh( line.geometry, material );
    this.scene.add( mesh );
}

【讨论】：

顺便说一句：three.js 存储库中的网格线实现实际上比 THREE.MeshLine 性能更高，因为使用了实例渲染。