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.
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));
+ 5 other calls in file
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.
GitHub: KleoPetroff/storyboarder
![KleoPetroff profile picture](/KleoPetroff.png?size=40)
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)
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
+ 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.
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
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
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,
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
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
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
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 );
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); }
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
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
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)); } }
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
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
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
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]);
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
three.Vector3 is the most popular function in three (22341 examples)