Draw a simple line between 2 elements

Barthandelus · October 29, 2019, 4:39pm

Hi,

I am trying to draw a simple line between 2 cubes using https://github.com/mrdoob/three.js/blob/e0a31ea77c0242ae29ef6e951fa588216e1d247f/examples/webgl_lines_fat.html

But I dunno why, the result is… kind of weird ? What am I doing bad ?

function addLine(cube1, cube2) {
    // Positions.
    var positions = [];
    positions.push(cube1.xCoords, 1, cube1.zCoords);
    positions.push(cube2.xCoords, 1, cube2.zCoords);
    
    // Setup.
    var geometry = new LineGeometry();
    geometry.setPositions(positions);
    
    var matLine = new LineMaterial({
        color: 0xffff00,
        linewidth: 0.2,
        vertexColors: THREE.VertexColors,
        dashed:false
    } );
    
    var line = new Line2(geometry, matLine);
    line.computeLineDistances();
    line.scale.set(0.25, 0.25, 0.25);
    scene.add(line);
}

addLine(cubes['0:0'], cubes['0:2']);

111

Any idea ?

Usnul · October 29, 2019, 8:14pm

Your mistake is scaling the line object.

line.scale.set(0.25, 0.25, 0.25);

Barthandelus · October 30, 2019, 7:30am

Really ?

I have the same result without it, or by setting it to 1,1,1.

Barthandelus · October 30, 2019, 8:02am

It’s driving me crazy as the same code with Line() & THREE.Geometry() works fine.

var material = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth:12
});

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3(cube1.xCoords, 25, cube1.zCoords),
    new THREE.Vector3(cube2.xCoords, 25, cube2.zCoords)
);

var line = new THREE.Line(geometry, material);
scene.add(line);

This works well except for linewidth as long as under WebGL Render it set up the value to 1 whatever I set (as the doc says).

var positions = [];
positions.push(cube1.xCoords, 25, cube1.zCoords);
positions.push(cube2.xCoords, 25, cube2.zCoords);

var material = new LineMaterial( {
    color:0xff0000,
    linewidth:0.2,
    dashed:false
});

var geometry = new LineGeometry();
geometry.setPositions(positions);

var line = new Line2(geometry, material);
scene.add(line);

This makes me a strange thing.

Usnul · October 30, 2019, 8:40am

Just a thought, but try values >= 1 for linewidth.

Barthandelus · October 30, 2019, 8:49am

Already give a try. Doesn’t work.

The only solution I’ve found so far is crazy as hell. I’ll probably be interned in a psychiatric hospital for this.

For information, I think Line2() isn’t working due to my positions variable but I didn’t find anything in the doc about .setPositions().

function addLine(cube1, cube2) {
    var material = new THREE.LineBasicMaterial({
        color: 0xff0000,
        linewidth:12
    });

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
        new THREE.Vector3(cube1.xCoords, 25, cube1.zCoords),
        new THREE.Vector3(cube2.xCoords, 25, cube2.zCoords),
        new THREE.Vector3(cube1.xCoords + 1, 25, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords - 1, 25, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords - 1, 25, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords + 1, 25, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords + 1, 25, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords - 1, 25, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords - 1, 25, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords + 1, 25, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords + 2, 25, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords - 2, 25, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords - 2, 25, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords + 2, 25, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords + 2, 25, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords - 2, 25, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords - 2, 25, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords + 2, 25, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords + 1, 25 - 1, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 - 1, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 - 1, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 - 1, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords + 1, 25 - 1, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 - 1, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 - 1, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 - 1, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords + 2, 25 - 1, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 - 1, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 - 1, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 - 1, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords + 2, 25 - 1, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 - 1, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 - 1, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 - 1, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords + 1, 25 + 1, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 + 1, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 + 1, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 + 1, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords + 1, 25 + 1, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 + 1, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 + 1, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 + 1, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords + 2, 25 + 1, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 + 1, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 + 1, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 + 1, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords + 2, 25 + 1, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 + 1, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 + 1, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 + 1, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords + 1, 25 - 2, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 - 2, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 - 2, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 - 2, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords + 1, 25 - 2, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 - 2, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 - 2, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 - 2, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords + 2, 25 - 2, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 - 2, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 - 2, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 - 2, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords + 2, 25 - 2, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 - 2, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 - 2, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 - 2, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords + 1, 25 + 2, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 + 2, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 + 2, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 + 2, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords + 1, 25 + 2, cube1.zCoords - 1),
        new THREE.Vector3(cube2.xCoords - 1, 25 + 2, cube2.zCoords + 1),
        new THREE.Vector3(cube1.xCoords - 1, 25 + 2, cube1.zCoords + 1),
        new THREE.Vector3(cube2.xCoords + 1, 25 + 2, cube2.zCoords - 1),
        new THREE.Vector3(cube1.xCoords + 2, 25 + 2, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 + 2, cube2.zCoords - 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 + 2, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 + 2, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords + 2, 25 + 2, cube1.zCoords - 2),
        new THREE.Vector3(cube2.xCoords - 2, 25 + 2, cube2.zCoords + 2),
        new THREE.Vector3(cube1.xCoords - 2, 25 + 2, cube1.zCoords + 2),
        new THREE.Vector3(cube2.xCoords + 2, 25 + 2, cube2.zCoords - 2)
    );

    var line = new THREE.Line(geometry, material);
    scene.add(line);
}

THREE.Line() WebGL Hacks !

Please don’t consider this thread as solved as long as I’ll probably face some performance issues.

Topic		Replies	Views
Draw line between 2 points Questions	1	4244	February 16, 2021
Line Drawing (THREE.Line2), anyone got anything simple working? Questions lines	2	10398	February 16, 2020
How do draw a Line between animated objects Questions	0	641	January 24, 2022
How to draw line in diffrent parent Questions transform	4	848	November 21, 2020
Three.js set a break when using Line2 and LineMaterial Questions linegeometry , linematerial	4	126	July 16, 2024

Draw a simple line between 2 elements

Related topics