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.
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;
+ 15 other calls in file
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 });
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.
GitHub: wkentaro/morefusion
![wkentaro profile picture](/wkentaro.png?size=40)
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]);
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) {
+ 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.
GitHub: tmmgroupag/threebox
![tmmgroupag profile picture](/tmmgroupag.png?size=40)
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)
+ 9 other calls in file
GitHub: fluuuid/labs
![fluuuid profile picture](/fluuuid.png?size=40)
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);
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
GitHub: tumblr/data-lasso
![tumblr profile picture](/tumblr.png?size=40)
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); };
+ 3 other calls in file
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
GitHub: Holograf/Holograf
![Holograf profile picture](/Holograf.png?size=40)
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
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
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 });
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, }),
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
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
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
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
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
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
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
three.Vector3 is the most popular function in three (22341 examples)