Question

lineMat =新的三个。 LineBasicMaterial （{颜色，线宽：5}）；

不起作用。

我需要一种简单的3D（旋转场景）方法：线宽大于1px的drawLine（measurement1，measure22，color）

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

Answer 1

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

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

three.js R107

Answer 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 );
}

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

2 个答案: