Line Drawing (THREE.Line2), anyone got anything simple working?

Questions
1

Hi,

I’m trying to get THREE.Line2 working for the simplest of things, draw a line with a thickness greater than wireframe from Vec3(0,0,0) to Vec3(3,3,3)…

I’ve got something drawing with a babel project I have but it’s just flikering the whole scene from one color to another and the GridHelper is cut in half for some reason (image attached at bottom of this)…

So I cooked up a codepen at:

Which seems to have an issue with LineSegmentsGeometry.js @ line 16…

Anyone got THREE.Line2 working examples for something as simple as drawing a line from point A to point B?

I then need to update the lines A and B in the render loop.

Thanks

D

capture
capture843×588 4.13 KB

2

Maybe this helps? (but I’m not shure it’s the best way)

var material = new THREE.LineBasicMaterial( { color: "#00ff00"});
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( 3.0, 5.0, -5.0) );
geometry.vertices.push(new THREE.Vector3( 0.5, 2.0, -5.0) );
var line = new THREE.Line( geometry, material );

PM me if you get something nice done.

3

Nope, Line2 required as line thickness doesn’t do anything on LineBasicMaterial. Not to worry I used BabylonJS for the project instead. EG In three it’s:

https://threejs.org/examples/?q=line#webgl_lines_fat