How to use the MeshLineMaterial function from three

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

three.MeshLineMaterial is a material used to render lines as three.js meshes.

337
338
339
340
341
342
343
344
345
346
347
348
349
350
	return material;


};


THREE.MeshLineMaterial.prototype = Object.create( THREE.Material.prototype );
THREE.MeshLineMaterial.prototype.constructor = THREE.MeshLineMaterial;


THREE.MeshLineMaterial.prototype.copy = function ( source ) {


	THREE.Material.prototype.copy.call( this, source );
fork icon0
star icon0
watch icon1

+ 179 other calls in file

How does three.MeshLineMaterial work?

The three.MeshLineMaterial is a material that can be used to render thick lines in Three.js, with options to control line width, color, and more, and it works by using a custom shader to render the lines.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Create a MeshLine object
const line = new MeshLine();
line.setPoints(points);

// Create a Mesh object with the MeshLine geometry and a MeshLineMaterial
const mesh = new THREE.Mesh(
  line.geometry,
  new MeshLineMaterial({
    color: new THREE.Color(0xff0000),
    lineWidth: 0.1,
    dashArray: 0.1,
    dashOffset: 0.1,
    dashRatio: 0.1,
    resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
  })
);

// Add the Mesh object to the scene
scene.add(mesh);

In this example, we first create a MeshLine object and set its points. We then create a Mesh object with the MeshLine geometry and a MeshLineMaterial material. The MeshLineMaterial material has various properties such as color, lineWidth, dashArray, dashOffset, dashRatio, and resolution. Finally, we add the Mesh object to the scene.

Other functions in three

Sorted by popularity

function icon

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