Home

Index

How to use the Line function from three

Find comprehensive JavaScript three.Line code examples handpicked from public code repositorys.

three.Line is a class in Three.js that represents a 3D line object with a starting and ending point.

FlowFieldObject3D.js

GitHub: vaalentin/2015

147
148
149
150
151
152
153
154
155
156

var mainGeometry = new THREE.Geometry();
var mainPoints = main.getPoints(this.parameters.renderResolution);
mainGeometry.vertices = mainPoints;

var mainLine = new THREE.Line(mainGeometry, mainMaterial);
mainLine.visible = false;
lines.push(mainLine);

var subMaterial = new THREE.LineBasicMaterial({ color: this.parameters.subsColor });

254

+ 15 other calls in file

GravityGridObject3D.js

GitHub: vaalentin/2015

109
110
111
112
113
114
115
116
117
    hLineGeometry.vertices.push(
      this.points.vertices[i + (j * this.parameters.stepsY)]
    );
  }

  var hLine = new THREE.Line(hLineGeometry, lineMaterial);

  lines.add(hLine);
}

254

+ 3 other calls in file

How does three.Line work?

three.Line is a class in the Three.js library that creates a line object consisting of two or more points with options for style and width, using WebGL to render the line in a 3D space. When creating a new instance of the Line class, you need to provide a BufferGeometry object that defines the positions of the points in the line. The BufferGeometry object can be created with a Float32Array of the positions or by using other classes provided by the library such as Vector3. You can customize the line's appearance by providing a Material object that specifies the line's color, opacity, and other properties. Once the line object is created, you can add it to a scene object in Three.js to display it in a 3D space.

main.js

GitHub: wkentaro/morefusion

67
68
69
70
71
72
73
74
75
  new THREE.Vector3(0.013, -0.01, 0.03),
];
var material = new THREE.LineBasicMaterial({color: 0x0000ff});
for (var i = 0; i < points.length; i++) {
  var geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), points[i]]);
  var line = new THREE.Line(geometry, material);
  line.position.set(position[0], position[1], position[2]);
  line.quaternion.set(quaternion[0], quaternion[1], quaternion[2], quaternion[3]);
  scene.add(line);

209

+ 3 other calls in file

Line.js

GitHub: fluuuid/labs

11
12
13
14
15
16
17
18
19
20
this.geometry          = new THREE.Geometry();
this.geometry.vertices = this.points;

this.material          = material;

this.mesh              = new THREE.Line(this.geometry, this.material);
this.mesh.position.y   = -20 + (y || 0);
this.mesh.position.z   = (16 - index) * -20 || 0;

this.counter           = 0;

163

+ 7 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Create a material for the line
const material = new THREE.LineBasicMaterial({ color: 0xffffff });

// Create a geometry for the line
const geometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 1, 0),
  new THREE.Vector3(1, 1, 0),
]);

// Create the line object
const line = new THREE.LineSegments(geometry, material);

// Add the line to the scene
scene.add(line);

This example creates a white line that consists of three points (0,0,0), (0,1,0), and (1,1,0), and adds it to the scene.

main.js

GitHub: mgstauffer/Project2-Toolbox-Functions

57
58
59
60
61
62
63
64
65
    geometry.vertices = stauff.curveUp.getPoints( 50 );

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

    // Create the final object to add to the scene if we want to see it
    var curveObject = new THREE.Line( geometry, material );
//scene.add(curveObject);

//// curve -end

+ 15 other calls in file

main.js

GitHub: AmanSachan1/Procedural-Wing

4
5
6
7
8
9
10
11
12
13

//var levelOfDetail = 50;
var feathers = new THREE.Object3D();
var feathersLayer2 = new THREE.Object3D();
var feathersLayer3 = new THREE.Object3D();
var splineObject = new THREE.Line();
var curve = new THREE.SplineCurve( [
     new THREE.Vector2( 1, 0 ),
     new THREE.Vector2( -0.5, -0.6 ),
     new THREE.Vector2( -2, 0 ),

+ 3 other calls in file

axis.js

GitHub: tumblr/data-lasso

86
87
88
89
90
91
92
93
94
95
    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
    geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));

    var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});

    return new THREE.Line(geometry, material);
};

module.exports = function (mappings, options) {
    var meshes = [];

119

+ 3 other calls in file

Selection.js

GitHub: Holograf/Holograf

18
19
20
21
22
23
24
25
26
27
var path = new THREE.Path( curve.getPoints( 6 ) );
var geometry = path.createPointsGeometry( 6 );
var material = new THREE.LineBasicMaterial( { color : constants.color.selection , transparent: true, opacity: 0} );

// Create the final Object3d to add to the scene
var selection = new THREE.Line( geometry, material );

selection.position.set(position.x1, 0, position.z1);
selection.rotation.x = Math.PI/2;
selection.rotate = new TWEEN.Tween(selection.rotation).to({z:2*Math.PI}, constants.time.selectionRotation ).repeat(Infinity).start();

+ 3 other calls in file

Pin.js

GitHub: PandeoF1/px_botnet

71
72
73
74
75
76
77
78
79
80

point = utils.mapPoint(lat,lon);

this.lineGeometry.vertices.push(new THREE.Vector3(point.x, point.y, point.z));
this.lineGeometry.vertices.push(new THREE.Vector3(point.x, point.y, point.z));
this.line = new THREE.Line(this.lineGeometry, lineMaterial);

/* the label */

labelCanvas = utils.createLabel(text, 18, opts.labelColor, opts.font);

TransformControls.js

GitHub: MozillaReality/mred

744
745
746
747
748
749
750
751
752
753

var gizmoTranslate = {
    X: [
        [ new THREE.Mesh( arrowGeometry, matRed ), [ 1, 0, 0 ], [ 0, 0, -Math.PI / 2 ], null, 'fwd' ],
        [ new THREE.Mesh( arrowGeometry, matRed ), [ 1, 0, 0 ], [ 0, 0, Math.PI / 2 ], null, 'bwd' ],
        [ new THREE.Line( lineGeometry, matLineRed ) ]
    ],
    Y: [
        [ new THREE.Mesh( arrowGeometry, matGreen ), [ 0, 1, 0 ], null, null, 'fwd' ],
        [ new THREE.Mesh( arrowGeometry, matGreen ), [ 0, 1, 0 ], [ Math.PI, 0, 0 ], null, 'bwd' ],

+ 30 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2406
2407
2408
2409
2410
2411
2412
2413
2414
2415
    mesh.drawMode = THREE.TriangleFanDrawMode;
  }
} else if (primitive.mode === WEBGL_CONSTANTS.LINES) {
  mesh = new THREE.LineSegments(geometry, material);
} else if (primitive.mode === WEBGL_CONSTANTS.LINE_STRIP) {
  mesh = new THREE.Line(geometry, material);
} else if (primitive.mode === WEBGL_CONSTANTS.LINE_LOOP) {
  mesh = new THREE.LineLoop(geometry, material);
} else if (primitive.mode === WEBGL_CONSTANTS.POINTS) {
  mesh = new THREE.Points(geometry, material);

+ 14 other calls in file

spotlightview.js

GitHub: audunsh/evince

463
464
465
466
467
468
469
470
471
points.push( new THREE.Vector3(pos_a[0], pos_a[1], pos_a[2]) );
points.push( new THREE.Vector3(pos_b[0], pos_b[1], pos_b[2]) );

let lgeom = new THREE.BufferGeometry().setFromPoints( points );

let line = new THREE.Line( lgeom, lmat );
this.scene.add(line);
*/

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3320
3321
3322
3323
3324
3325
3326
3327
3328
3329

    mesh = new THREE.LineSegments( geometry, material );

} else if ( primitive.mode === WEBGL_CONSTANTS.LINE_STRIP ) {

    mesh = new THREE.Line( geometry, material );

} else if ( primitive.mode === WEBGL_CONSTANTS.LINE_LOOP ) {

    mesh = new THREE.LineLoop( geometry, material );

index.cjs

GitHub: Brakebein/node-three-gltf

2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
}
else if (primitive.mode === WEBGL_CONSTANTS.LINES) {
    mesh = new three.LineSegments(geometry, material);
}
else if (primitive.mode === WEBGL_CONSTANTS.LINE_STRIP) {
    mesh = new three.Line(geometry, material);
}
else if (primitive.mode === WEBGL_CONSTANTS.LINE_LOOP) {
    mesh = new three.LineLoop(geometry, material);
}

coin-tunnel.js

GitHub: aMoniker/coins-visualization

35
36
37
38
39
40
41
42
43
        opacity: 0.5,
    });
    for (let path of this.coinPaths) {
        let lineGeometry = new THREE.Geometry();
        lineGeometry.vertices.push(path.v1, path.v2);
        let line = new THREE.Line(lineGeometry, lineMaterial);
        this.tunnel.add(line);
    }
}

+ 3 other calls in file

scenes.js

GitHub: gracexu94/FinalProject

317
318
319
320
321
322
323
324
325
326
    geometry = createSpiralGeometryWithNoise(0);
  }
  geometry.scale(offset, offset, offset);
  offset += 0.05;

  var obj = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: getRandomColor()}));
  var spiralName = "spiral" + s;
  obj.name = spiralName;
  scene.add(obj);
}

+ 5 other calls in file

ArcballControls.js

GitHub: BaurTokenov/three-js-editor-2

1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
//material
const curveMaterialX = new three_1.LineBasicMaterial({ color: 0xff8080, fog: false, transparent: true, opacity: 0.6 });
const curveMaterialY = new three_1.LineBasicMaterial({ color: 0x80ff80, fog: false, transparent: true, opacity: 0.6 });
const curveMaterialZ = new three_1.LineBasicMaterial({ color: 0x8080ff, fog: false, transparent: true, opacity: 0.6 });
//line
const gizmoX = new three_1.Line(curveGeometry, curveMaterialX);
const gizmoY = new three_1.Line(curveGeometry, curveMaterialY);
const gizmoZ = new three_1.Line(curveGeometry, curveMaterialZ);
const rotation = Math.PI * 0.5;
gizmoX.rotation.x = rotation;

+ 5 other calls in file

CurvedArrow.js

GitHub: rendoir/feup-thesis

14
15
16
17
18
19
20
21
22
23

let points = curve.getPoints( lineDivisions );
let geometry = new THREE.BufferGeometry().setFromPoints( points );
geometry.computeBoundingBox();
let material = new THREE.LineBasicMaterial( { color : color } );
let ellipse = new THREE.Line( geometry, material );
this.add( ellipse );

// Head
let _coneGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );

+ 3 other calls in file

gcode_reader.js

GitHub: lyxnter/DuetWebControl

1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
this.material = new THREE.LineBasicMaterial({
	color: 0xff0000
});

// Create the final object to add to the scene
this.ellipse = new THREE.Line(this.geometry, this.material);
this.ellipse.position.z = this.lastPos.z;
//this.scene.live.liveScene.add(this.ellipse);

if (args.x) {

+ 5 other calls in file

voxel_smoothing_tool.js

GitHub: shark39/metamaterials

48
49
50
51
52
53
54
55
56

    material = new THREE.LineBasicMaterial({ color: colorBasedOnDimension, linewidth: 10 });
    geometry = new THREE.Geometry();
    const newVertex = intersection.point.clone().add( this.extrusionNormal.clone() .multiplyScalar( 0.1 ) );
    geometry.vertices.push( newVertex );
    line = new THREE.Line( geometry, material )
    renderer.scene.add( line );
  }
};

+ 91 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About