2

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)

xalex
  • 39
  • 1
  • 4

2 Answers2

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.org/examples/webgl_lines_fat

three.js R107

Mugen87
  • 28,829
  • 4
  • 27
  • 50
  • Thanks, I tried this method (Line2) but unsuccessful. I already have done it by THREE.MeshLine https://github.com/spite/THREE.MeshLine – xalex Aug 15 '19 at 14:48
  • What do you mean with "unsuccessful"? The official example obviously works fine. – Mugen87 Aug 15 '19 at 14:54
  • I had errors & problems with implementing it from here https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html. Maybe it will be more useful if it was a part of Three (like THREE.FatLine ). Sorry I need an only simple method for two points. – xalex Aug 15 '19 at 15:45
1

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 );
}
xalex
  • 39
  • 1
  • 4
  • BTW: The mesh line implementation from the `three.js` repository is actually more performant than `THREE.MeshLine` since instanced rendering is used. – Mugen87 Aug 15 '19 at 14:58