javascript - Three JS LineBasicMaterial how to draw simple fat line in 3D axis? - Stack Overflow

admin管理员组

文章数量:1418400

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

doesn't work.

I need a simple method for 3D (rotating scene): drawLine(measurement1, measurement2, color) with linewidth more then 1px

I know about Windows & Angle. I searched & try to solve this problem a few days (most of the found methods not worked or work only in 2D or have problems inside)

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

doesn't work.

I need a simple method for 3D (rotating scene): drawLine(measurement1, measurement2, color) with linewidth more then 1px

I know about Windows & Angle. I searched & try to solve this problem a few days (most of the found methods not worked or work only in 2D or have problems inside)

• javascript
• typescript
• three.js

Share Improve this question Follow edited Aug 15, 2019 at 12:54 xalex asked Aug 15, 2019 at 12:46 xalexxalex 4911 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It does not work since WebGL line primitives are always rendered as 1px wide lines. However, three.js provide the possibility to render so called wide or fat lines based on triangles. So using the classes LineGeometry, LineMaterial and Line2 should solve your issue.

Official example: https://threejs/examples/webgl_lines_fat

three.js R107

Thanks to @Stranger in the Q

https://github./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 );
}

本文标签： javascriptThree JS LineBasicMaterial how to draw simple fat line in 3D axisStack Overflow