Home

Index

How to use the LineSegments function from three

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

three.LineSegments is a class in the Three.js library that represents a collection of line segments in 3D space.

CoordinatePlane.js

30
31
32
33
34
35
36
37
38
39
}
for ( var i = 0; i <= size*(2/3); i+= step) {
    geometry.vertices.push(new three.Vector3( -12, i, 0 ));
    geometry.vertices.push(new three.Vector3( 12,  i, 0));
}
grid = new three.LineSegments(geometry, material);

object.add(grid);

var curve = new three.LineCurve3(new three.Vector3( 0, 0,  -0.04), new three.Vector3( size, 0,  -0.04));

306

+ 5 other calls in file

Cuboid.js

GitHub: Domush/CNCjs-for-mvCNC-Marlin

39
40
41
42
43
44
45
46
47
48
    transparent,
    ...others,
  });
}

const lineSegments = new THREE.LineSegments(edges, material);

if (dashed) {
  // Computes an array of distance values which are necessary for LineDashedMaterial.
  lineSegments.computeLineDistances();

How does three.LineSegments work?

three.LineSegments is a class in the Three.js library that is used to represent a collection of line segments in 3D space. It is a subclass of three.Line, which represents a single line segment, and can be used to create multiple line segments that share the same material and geometry. To create a three.LineSegments object, you first need to create a three.BufferGeometry object that defines the vertices and indices of the line segments. The three.BufferGeometry object is then passed to the three.LineSegments constructor along with a three.LineBasicMaterial object that defines the appearance of the line segments. Once the three.LineSegments object is created, you can add it to a three.Scene object to be rendered by a three.WebGLRenderer object. You can also manipulate the three.LineSegments object using various methods and properties, such as setPosition(), setRotation(), setMaterial(), and setGeometry(). These methods and properties allow you to change the position, rotation, material, and geometry of the line segments, respectively.

World.js

GitHub: KleoPetroff/storyboarder

132
133
134
135
136
137
138
139
140
141
  width,
  height,
  length
)
var edges = new THREE.EdgesGeometry( geometry )
var line = new THREE.LineSegments(
  edges,
  new THREE.LineBasicMaterial({ color: 0x999999 })
)
line.position.set(0, height / 2, 0)

263

primitives.js

GitHub: PrismarineJS/prismarine-viewer

24
25
26
27
28
29
30
31
32
33

const boxGeometry = new THREE.BoxBufferGeometry(sx, sy, sz, sx, sy, sz)
boxGeometry.attributes.positionStart = boxGeometry.attributes.position.clone()

const gridGeometry = GridBoxGeometry(boxGeometry, false)
const grid = new THREE.LineSegments(gridGeometry, new THREE.LineBasicMaterial({ color }))
grid.position.x = primitive.start.x + sx / 2
grid.position.y = primitive.start.y + sy / 2
grid.position.z = primitive.start.z + sz / 2
return grid

163

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// create a buffer geometry
const geometry = new THREE.BufferGeometry();

// define the vertices of the line segments
const positions = new Float32Array([
  0,
  0,
  0, // start of first line segment
  1,
  1,
  1, // end of first line segment
  1,
  1,
  1, // start of second line segment
  2,
  2,
  2, // end of second line segment
]);

// set the vertex positions in the buffer geometry
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));

// create a line basic material
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

// create a line segments object
const lineSegments = new THREE.LineSegments(geometry, material);

// add the line segments object to the scene
scene.add(lineSegments);

In this example, we create a three.BufferGeometry object that defines the vertices of two line segments. We then set the vertex positions of the buffer geometry using a Float32Array and the setAttribute() method. We create a three.LineBasicMaterial object that defines the appearance of the line segments, in this case setting their color to red. We then create a three.LineSegments object using the buffer geometry and material we just created. Finally, we add the line segments object to the scene to be rendered by a three.WebGLRenderer object.

index.js

GitHub: ASSERT-KTH/ci-hackathon

54
55
56
57
58
59
60
61
62
    // Add basic box layout and lights
    var geometry = new THREE.BoxGeometry(...boxSize);
    geometry = new THREE.EdgesGeometry(geometry);
    var material = new THREE.LineBasicMaterial( { color: 0xffffff, lineWidth: true } );

    var cube = new THREE.LineSegments( geometry, material );
    scene.add( cube );
}

+ 2 other calls in file

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

892
893
894
895
896
897
898
899
900
901
        );
        geometry.vertices.push(vertices.child);
        geometry.vertices.push(vertices.parent);
      }
    });
    const line = new THREE.LineSegments(geometry, material);
    neuron.add(line);
  }
  return neuron;
}

+ 3 other calls in file

TorusKnot.js

GitHub: zziyifan/Medical-AI-learning-1

23
24
25
26
27
28
29
30
31
32

    mesh.children[0].geometry.computeBoundingBox();
    mesh.children[1].geometry.computeBoundingBox();
}

object.add(new THREE.LineSegments(
    new THREE.BufferGeometry(),
    new THREE.LineBasicMaterial({
        color: 0xffffff,
        transparent: true,

index.js

GitHub: OpenSlicer/OpenSlicer

348
349
350
351
352
353
354
355
356

if (options.contours || options.extrusionLines) {
    out.forEach((l) => makeLine(l))
}

currentLayer.contourLines = new THREE.LineSegments(geom, new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 6,
}))

+ 8 other calls in file

THREEUtil.js

GitHub: VCityTeam/UD-Viz

277
278
279
280
281
282
283
284
285
286
      threshOldAngle
    );
    const mat = new THREE.LineBasicMaterial({
      color: 0x000000,
    });
    const wireframe = new THREE.LineSegments(geomEdges, mat);
    wireframe.userData.isWireframe = true;
    child.add(wireframe);
  }
});

+ 9 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2404
2405
2406
2407
2408
2409
2410
2411
2412
2413
    mesh.drawMode = THREE.TriangleStripDrawMode;
  } else if (primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN) {
    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);

+ 14 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3316
3317
3318
3319
3320
3321
3322
3323
3324
3325

    }

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

index.cjs

GitHub: Brakebein/node-three-gltf

2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
    else if (primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN) {
        mesh.geometry = toTrianglesDrawMode(mesh.geometry, 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);
}

t.js

GitHub: 52black/scratch-vm

1325
1326
1327
1328
1329
1330
1331
1332
1333
1334

}

if ( isLine ) {

	mesh = new THREE.LineSegments( buffergeometry, createdMaterials );

} else if ( isPoints ) {

	mesh = new THREE.Points( buffergeometry, createdMaterials );

+ 37 other calls in file

boid.js

GitHub: juanuys/boids

61
62
63
64
65
66
67
68
69
70
geometry.rotateX(THREE.Math.degToRad(90));

var mesh = new THREE.Group();
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 });
var meshMaterial = new THREE.MeshPhongMaterial({ color, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true });
mesh.add(new THREE.LineSegments(new THREE.WireframeGeometry(geometry), lineMaterial));
mesh.add(new THREE.Mesh(geometry, meshMaterial));

mesh.position.copy(position)
if (quaternion) {

+ 3 other calls in file

box.js

GitHub: juanuys/boids

12
13
14
15
16
17
18
19
          wireframe: false,
          depthWrite: false,
          blending: THREE.NormalBlending
      });
      this.mesh.add(new THREE.Mesh(geometry, meshMaterial));
      this.mesh.add(new THREE.LineSegments(new THREE.WireframeGeometry(geometry), lineMaterial));
  }
}

gcode_reader.js

GitHub: lyxnter/DuetWebControl

377
378
379
380
381
382
383
384
385
386
	//console.error(e);
}
if (this.fileSize < 16 * 1024 * 1024) {
	this.threeDee = (key != "MOVE" ? new THREE.Mesh(
		new THREE.BufferGeometry().fromGeometry(this.scene.preview.pointCloud[key][(this.curLay != undefined ? this.curLay - 1 : this.id[this.pt - 1])]), this.meshMaterial) :
		new THREE.LineSegments(this.scene.preview.pointCloud[key][(this.curLay != undefined ? this.curLay - 1 : this.id[this.pt - 1])], this.pointMaterial)
	);
} else {
	this.threeDee = new THREE.LineSegments(this.scene.preview.pointCloud[key][(this.curLay != undefined ? this.curLay - 1 : this.id[this.pt - 1])], this.pointMaterial);
}

+ 11 other calls in file

preview.js

GitHub: lyxnter/DuetWebControl

202
203
204
205
206
207
208
209
210
211
});

this.prepareGridBPGeoPreview(gridPrimeGeo, gridSecGeo);

this.previewScene.add(new THREE.LineSegments(gridPrimeGeo, materPrime));
this.previewScene.add(new THREE.LineSegments(gridSecGeo, materSec));

// this.previewCamera center
this.previewCamera.position.set(-400, 575, 0);
//this.previewCamera positive

+ 11 other calls in file

browser.js

GitHub: FabricLabs/verse

199
200
201
202
203
204
205
206
207
208

function createVoxelMesh (type = 1) {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const edges = new THREE.EdgesGeometry(geometry);
  const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
  const edgesMesh = new THREE.LineSegments(edges, lineMaterial);
  const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
  const mesh = new THREE.Mesh(geometry, material);

  mesh.add(edgesMesh);

+ 17 other calls in file

obj-loader.js

GitHub: workbee49/home_planner

465
466
467
468
469
470
471
472
473
474
  } else {
    mesh = new THREE.Mesh(buffergeometry, createdMaterials);
  }
} else {
  if (isLine) {
    mesh = new THREE.LineSegments(buffergeometry, createdMaterials[0]);
  } else if (isPoints) {
    mesh = new THREE.Points(buffergeometry, createdMaterials[0]);
  } else {
    mesh = new THREE.Mesh(buffergeometry, createdMaterials[0]);

mc-model-viewer.js

GitHub: BinarSkugga/PlaceableItems-Wiki

322
323
324
325
326
327
328
329
330
331
gridGeometry.vertices.push(new THREE.Vector3(0, -8, 10))

gridGeometry.vertices.push(new THREE.Vector3(0, -8, 10))
gridGeometry.vertices.push(new THREE.Vector3(-1, -8, 9))

var grid = new THREE.LineSegments(gridGeometry, gridMaterial)
grid.visible = true

this.scene.add(grid)
this.grid = grid

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About