CODEWITHSUNDEEP
javascripttypescriptthree.js
xalex
xalex

Reputation: 49

Three JS LineBasicMaterial how to draw simple fat line in 3D axis?

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)

Upvotes: 2

Views: 5544

Answers (2)

xalex
xalex

Reputation: 49

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

Upvotes: 2

Mugen87
Mugen87

Reputation: 31076

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

Upvotes: 3

Related Questions