Home

Index

How to use the LineBasicMaterial function from three

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

three.LineBasicMaterial is a class in the Three.js library that defines the basic material properties for rendering lines in a 3D scene.

FlowFieldObject3D.js

GitHub: vaalentin/2015

141
142
143
144
145
146
147
148
149
150
 * @return {Array}
 */
FlowField.prototype.getLines = function (main, subs) {
  var lines = [];

  var mainMaterial = new THREE.LineBasicMaterial({ color: this.parameters.mainColor });

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

254

+ 15 other calls in file

GravityGridObject3D.js

GitHub: vaalentin/2015

94
95
96
97
98
99
100
101
102
}

// lines
var lines = new THREE.Object3D();

var lineMaterial = new THREE.LineBasicMaterial({
  color: this.parameters.linesColor,
  vertexColors: THREE.VertexColors
});

254

How does three.LineBasicMaterial work?

three.LineBasicMaterial works by defining the basic properties of a material used to render lines in a Three.js 3D scene. The class takes an object as an argument with optional properties that define the appearance of the line, such as color, opacity, linewidth, and more. When a three.LineBasicMaterial object is created and assigned to a three.Line object, the material is applied to the line's geometry when the scene is rendered. three.LineBasicMaterial is useful for creating simple, untextured lines in a 3D scene, such as gridlines or wireframes. However, it is not suitable for creating more complex materials or textures, for which other classes in the Three.js library, such as three.MeshBasicMaterial, may be more appropriate. Note that three.LineBasicMaterial is part of the Three.js library, which provides a set of tools and utilities for working with 3D graphics and rendering in a web browser.

main.js

GitHub: wkentaro/morefusion

64
65
66
67
68
69
70
71
72
73
  new THREE.Vector3(0.013, 0.01, 0.03),
  new THREE.Vector3(-0.013, 0.01, 0.03),
  new THREE.Vector3(-0.013, -0.01, 0.03),
  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]);

209

CoordinatePlane.js

GitHub: CSDTs/CScratch-3d-render

2
3
4
5
6
7
8
9
10
11

var geometry, textGeometry, textShapes, grid, text, label, xaxis, yaxis, zaxis, material, object, size = 250, step = 25;

geometry = new three.Geometry();
textGeometry = new three.Geometry();
material = new three.LineBasicMaterial({color: 'black'});
object = new three.Object3D();
font = new three.Font(fontData);

function addLabel(x, y, z, label, lColor, lSize, rotation) {

306

+ 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
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(0, 10, 0),
  new THREE.Vector3(10, 0, 0),
]);

const material = new THREE.LineBasicMaterial({ color: 0xffffff });

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

camera.position.z = 20;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

In this example, we create a three.LineBasicMaterial object with a white color, and assign it to a three.Line object that is added to a three.Scene object. We then set up a basic 3D scene with a camera and a renderer, and use a BufferGeometry object to define the position of the line vertices. Finally, we call the render method on the renderer object to display the scene in a web browser. When the code is run, the result is a simple white line in the center of the screen. The line is defined by three points, and is rendered with a thickness of 1 unit, which is the default value for the linewidth property of three.LineBasicMaterial. Note that three.LineBasicMaterial can be customized with other properties, such as opacity, linewidth, linecap, and more, to create lines with different styles and appearances.

objects.js

GitHub: tmmgroupag/threebox

31
32
33
34
35
36
37
38
39
40
var positions = new Float32Array(flattenedArray); // 3 vertices per point
var geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// material
var material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 21 });
var line = new THREE.Line(geometry, material);

line.options = options || {};
line.position.copy(normalized.position)

278

+ 9 other calls in file

demo.js

GitHub: fluuuid/labs

20
21
22
23
24
25
26
27
28
29
} );

renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1))
document.body.appendChild(renderer.domElement)

var material = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: isMobile.any ? 1.5 : 3});

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 4000 );
camera.position.set(0, 45, 240);
controls = new OrbitControls(camera, renderer.domElement);

163

main.js

GitHub: mgstauffer/Project2-Toolbox-Functions

54
55
56
57
58
59
60
61
62
63
    
    var curve = new THREE.CatmullRomCurve3( stauff.controlPointsUp );
    var geometry = new THREE.Geometry();
    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);

+ 15 other calls in file

axis.js

GitHub: tumblr/data-lasso

84
85
86
87
88
89
90
91
92

    var geometry = new THREE.BufferGeometry();
    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);
};

119

+ 3 other calls in file

index.js

GitHub: ASSERT-KTH/ci-hackathon

52
53
54
55
56
57
58
59
60
61

function addGrid(){
    // 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

Selection.js

GitHub: Holograf/Holograf

15
16
17
18
19
20
21
22
23
  false             // aClockwise
);

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

+ 3 other calls in file

THREEUtil.js

GitHub: VCityTeam/UD-Viz

274
275
276
277
278
279
280
281
282
283
// Create wireframes
const geomEdges = new THREE.EdgesGeometry(
  child.geometry,
  threshOldAngle
);
const mat = new THREE.LineBasicMaterial({
  color: 0x000000,
});
const wireframe = new THREE.LineSegments(geomEdges, mat);
wireframe.userData.isWireframe = true;

+ 9 other calls in file

Pin.js

GitHub: PandeoF1/px_botnet

62
63
64
65
66
67
68
69
70
this.labelVisible = opts.showLabel;

/* the line */

this.lineGeometry = new THREE.Geometry();
lineMaterial = new THREE.LineBasicMaterial({
    color: opts.lineColor,
    linewidth: opts.lineWidth
});

TorusKnot.js

GitHub: zziyifan/Medical-AI-learning-1

25
26
27
28
29
30
31
32
33
34
    mesh.children[1].geometry.computeBoundingBox();
}

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

index.js

GitHub: OpenSlicer/OpenSlicer

427
428
429
430
431
432
433
434
435
436
function boundingBox(bb, color, opacity) {
    bb = bb.clone()
    let d = bb.max.clone().sub(bb.min)
    let geom = new THREE.CubeGeometry(d.x, d.y, d.z)
    geom = new THREE.EdgesGeometry(geom)
    let mat = new THREE.LineBasicMaterial({
        color: color,
        linewidth: 2,
        transparent: true,
        opacity: opacity,

+ 2 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
var cacheKey = "LineBasicMaterial:" + material.uuid;

var lineMaterial = this.cache.get(cacheKey);

if (!lineMaterial) {
  lineMaterial = new THREE.LineBasicMaterial();
  THREE.Material.prototype.copy.call(lineMaterial, material);
  lineMaterial.color.copy(material.color);

  this.cache.add(cacheKey, lineMaterial);

+ 14 other calls in file

coin-tunnel.js

GitHub: aMoniker/coins-visualization

27
28
29
30
31
32
33
34
35
36
this.calculateCoinPaths();
this.tunnel = this.createTunnelMesh();

if (this.opts.debug) {
    // draw paths
    let lineMaterial = new THREE.LineBasicMaterial({
        color: 0xff0000,
        transparent: true,
        opacity: 0.5,
    });

+ 3 other calls in file

PolyhedralDiagram.js

GitHub: shrekshao/Polyhedron3D

79
80
81
82
83
84
85
86
87
88
    exteriorGreen: exteriorGreen
},

// Three.js materials of all kind, including lines, vertices, highlighted/normal, interior/external etc.
materials: {
    lineBasic: new THREE.LineBasicMaterial( { 
        color: 0x000000,
        opacity: 1, 
        transparent: false
        // linewidth doesn't work on Windows due to ANGLE limitation

+ 5 other calls in file

transformation.js

GitHub: rendoir/feup-thesis

141
142
143
144
145
146
147
148
149
150

// Setup lines
let shapePoints = shape.getPoints();
let geometryPoints = new THREE.BufferGeometry().setFromPoints( shapePoints );
let line = new THREE.Line( geometryPoints, 
    new THREE.LineBasicMaterial( { color: 0x000000, transparent: true, opacity: 1 } ) );
group.add( line );

// Setup points
let points = new THREE.Points( geometryPoints,

+ 3 other calls in file

sceneLoader.js

GitHub: alan-wu/ZincJS

187
188
189
190
191
192
193
194
195
196
const linesloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
  return (geometry, materials) => {
    const newLines = new (require('./primitives/lines').Lines)();
    let material = undefined;
    if (materials && materials[0]) {
      material = new THREE.LineBasicMaterial({color:materials[0].color.clone()});
      if (1.0 > materials[0].opacity) {
        material.transparent = true;
      }
      material.opacity = materials[0].opacity;

+ 25 other calls in file

t.js

GitHub: 52black/scratch-vm

1268
1269
1270
1271
1272
1273
1274
1275
1276
material = this.materials.create( sourceMaterial.name );

// mtl etc. loaders probably can't create line materials correctly, copy properties to a line material.
if ( isLine && material && ! ( material instanceof THREE.LineBasicMaterial ) ) {

	var materialLine = new THREE.LineBasicMaterial();
	materialLine.copy( material );
	materialLine.lights = false; // TOFIX
	material = materialLine;

+ 37 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