Home

Index

How to use the BufferGeometry function from three

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

BufferGeometry is a class in the Three.js library used for creating and managing buffer-based geometries for 3D objects.

particles.js

49
50
51
52
53
54
55
56
57
58
for(var i = 0; i < AMOUNT; i++ ) {
    i3 = i * 3;
    position[i3 + 0] = (i % TEXTURE_WIDTH) / TEXTURE_WIDTH;
    position[i3 + 1] = ~~(i / TEXTURE_WIDTH) / TEXTURE_HEIGHT;
}
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( position, 3 ));

var material = new THREE.ShaderMaterial({
    uniforms: THREE.UniformsUtils.merge([

160

993

+ 3 other calls in file

MeshStandard.js

GitHub: K3D-tools/K3D-jupyter

33
34
35
36
37
38
39
40
41
const triangleAttribute = (config.triangles_attribute && config.triangles_attribute.data) || null;
const normals = (config.normals && config.normals.data) || null;
const vertices = (config.vertices && config.vertices.data) || null;
const indices = (config.indices && config.indices.data) || null;
const uvs = (config.uvs && config.uvs.data) || null;
let geometry = new THREE.BufferGeometry();
let image;
let object;
let preparedtriangleAttribute;

119

812

How does three.BufferGeometry work?

three.BufferGeometry is a class in the Three.js library that represents a geometry made up of an array of vertices, each with a set of associated attributes (such as normals or texture coordinates) stored in buffers for efficient rendering. It allows for a high degree of customization and optimization of geometries used in 3D scenes.

index.test.js

GitHub: donmccurdy/three-pathfinding

35
36
37
38
39
40
41
42
43
44
45
46


test('pathing near close, adjacent nodes', (t) => {
  const pathfinding = new Pathfinding();


  // Make a geometry that looks something like ./diagrams/close-adjacent-nodes.png
  const geometry = new THREE.BufferGeometry();
  const position = new THREE.BufferAttribute(new Float32Array([
    0,  0,  0,
    1,  0,  0,
    1,  0, -1,

109

891

+ 11 other calls in file

PointsMesh.js

GitHub: K3D-tools/K3D-jupyter

26
27
28
29
30
31
32
33
34
35
const sizes = (config.point_sizes && config.point_sizes.data
    && config.point_sizes.data.length === positions.length / 3) ? config.point_sizes.data : null;
const {colorsToFloat32Array} = buffer;
const phongShader = THREE.ShaderLib.phong;
let i;
const boundingBoxGeometry = new THREE.BufferGeometry();
const geometry = new THREE.IcosahedronBufferGeometry(config.point_size * 0.5, meshDetail);
const colorMap = (config.color_map && config.color_map.data) || null;
let opacityFunction = (config.opacity_function && config.opacity_function.data) || null;
const colorRange = config.color_range;

115

803

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Create a new buffer geometry
const geometry = new THREE.BufferGeometry();

// Add positions to the buffer geometry
const positions = new Float32Array([
  0,
  0,
  0, // vertex 1
  1,
  0,
  0, // vertex 2
  0,
  1,
  0, // vertex 3
]);
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));

// Add indices to the buffer geometry
const indices = new Uint16Array([0, 1, 2]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

This creates a new buffer geometry and sets up some vertices and indices for a triangle. The vertex positions are stored in a Float32Array and added to the geometry as a BufferAttribute. The indices are stored in a Uint16Array and set as the geometry's index.

geo-three.cjs

GitHub: tentone/geo-three

1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
const terrain = MapMartiniHeightNode.getTerrain(data, tileSize, this.elevationDecoder);
const martini = new Martini(gridSize);
const tile = martini.createTile(terrain);
const { vertices, triangles } = tile.getMesh(typeof this.meshMaxError === 'function' ? this.meshMaxError(this.level) : this.meshMaxError);
const attributes = MapMartiniHeightNode.getMeshAttributes(vertices, terrain, tileSize, [-0.5, -0.5, 0.5, 0.5], this.exageration);
this.geometry = new three.BufferGeometry();
this.geometry.setIndex(new three.Uint32BufferAttribute(triangles, 1));
this.geometry.setAttribute('position', new three.Float32BufferAttribute(attributes.position.value, attributes.position.size));
this.geometry.setAttribute('uv', new three.Float32BufferAttribute(attributes.uv.value, attributes.uv.size));
this.geometry.rotateX(Math.PI);

468

main.js

GitHub: wkentaro/morefusion

66
67
68
69
70
71
72
73
74
75
  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]);
  line.quaternion.set(quaternion[0], quaternion[1], quaternion[2], quaternion[3]);
  scene.add(line);

209

+ 5 other calls in file

primitives.js

GitHub: PrismarineJS/prismarine-viewer

36
37
38
39
40
41
42
43
44
45
  const size = primitive.size ? primitive.size : 5
  const points = []
  for (const p of primitive.points) {
    points.push(p.x, p.y, p.z)
  }
  const geometry = new THREE.BufferGeometry()
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(points, 3))
  const material = new THREE.PointsMaterial({ color, size, sizeAttenuation: false })
  return new THREE.Points(geometry, material)
}

163

+ 5 other calls in file

three-tube-wireframe.js

GitHub: mattdesl/three-tube-wireframe

69
70
71
72
73
74
75
76
77
78
  offset += vertexCount;

  tube.dispose();
});

const outGeometry = new THREE.BufferGeometry();
outGeometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(mesh.position), 3));
outGeometry.addAttribute('normal', new THREE.BufferAttribute(new Float32Array(mesh.normal), 3));
outGeometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(mesh.uv), 2));
outGeometry.addAttribute('basePosition', new THREE.BufferAttribute(new Float32Array(mesh.basePosition), 3));

+ 15 other calls in file

index.js

GitHub: ASSERT-KTH/ci-hackathon

184
185
186
187
188
189
190
191
192
193
            } );

            geometry.computeBoundingBox();
            geometry.computeVertexNormals();
            
            textGeo = new THREE.BufferGeometry().fromGeometry( geometry );

            const pos = toGlobalPosition(obj.relativePosition)
            textMesh1 = new THREE.Mesh( textGeo , materials);
textMesh1.position.x = pos[0];

+ 2 other calls in file

THREEUtil.js

GitHub: VCityTeam/UD-Viz

333
334
335
336
337
338
339
340
341
342
  child.geometry.attributes.position.array.slice(startIndex, i * 3),
  3
);

// Get all points that have the same value of the "nameOfGeometryAttribute"
const mesh = new THREE.BufferGeometry();
mesh.setAttribute('position', positionByAttribute);

// THREE.EdgesGeometry needs triangle indices to be created.
// Create a new array for the indices

+ 4 other calls in file

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

563
564
565
566
567
568
569
570
571
572
image.onload = function onload() {
  sphereImg.needsUpdate = true;
};
image.src = this.nodeParticleTexture;

geometry = new THREE.BufferGeometry();
// properties that may consty from particle to particle. only accessible in vertex shaders!
//	(can pass color info to fragment shader via vColor.)
// compute scale for particles, in pixels
const particleScale =

+ 7 other calls in file

TorusKnot.js

GitHub: zziyifan/Medical-AI-learning-1

24
25
26
27
28
29
30
31
32
33
    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,
        opacity: 0.5,

+ 3 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

650
651
652
653
654
655
656
657
658
659


const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); // https://github.com/mrdoob/three.js/pull/21358


const _geometry = new THREE.BufferGeometry();

_geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );

_geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );

+ 53 other calls in file

spotlightview_old.js

GitHub: audunsh/evince

3366
3367
3368
3369
3370
3371
3372
3373
3374
let lmat = new THREE.LineBasicMaterial( { color: 0x999999 } );
lmat.linewidth = 5;
let points = [];
points.push( new THREE.Vector3(pos_a[0], pos_a[1], pos_a[2]) );
points.push( new THREE.Vector3(pos_b[0], pos_b[1], pos_b[2]) );
let lgeom = new THREE.BufferGeometry().setFromPoints( points );
let line = new THREE.Line( lgeom, lmat );
this.scene.add(line);
*/

+ 50 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3235
3236
3237
3238
3239
3240
3241
3242
3243
    geometryPromise = createDracoPrimitive( primitive );

} else {

    // Otherwise create a new geometry
    geometryPromise = addPrimitiveAttributes( new THREE.BufferGeometry(), primitive, parser );

} // Cache this geometry

index.cjs

GitHub: Brakebein/node-three-gltf

2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
    let geometryPromise;
    if (primitive.extensions && primitive.extensions[EXTENSIONS.KHR_DRACO_MESH_COMPRESSION]) {
        geometryPromise = createDracoPrimitive(primitive);
    }
    else {
        geometryPromise = addPrimitiveAttributes(new three.BufferGeometry(), primitive, parser);
    }
    cache[cacheKey] = { primitive: primitive, promise: geometryPromise };
    pending.push(geometryPromise);
}

glyphset.js

GitHub: alan-wu/ZincJS

86
87
88
89
90
91
92
93
94
95
  numberOfVertices = numberOfVertices * 3;
baseSize = glyphsetData.metadata.base_size;
offset = glyphsetData.metadata.offset;
scaleFactors = glyphsetData.metadata.scale_factors;
const loader = new JSONLoader();
this.geometry = new THREE.BufferGeometry();
this.morph = new THREE.InstancedMesh(this.geometry, undefined, numberOfVertices);
if (isInline) {
  var object = loader.parse(glyphURL);
  (meshloader(finishCallback, displayLabels))(object.geometry, object.materials);

+ 9 other calls in file

BufferUtils.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

95
96
97
98
99
100
101
102
103
const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
const attributes = {};
const morphAttributes = {};
const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
const mergedGeometry = new THREE.BufferGeometry();
let offset = 0;

for ( let i = 0; i < geometries.length; ++ i ) {

+ 5 other calls in file

ColladaExporter.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

201
202
203
204
205
206
207
208
209
210

// convert the geometry to bufferGeometry if it isn't already
var bufferGeometry = g;
if ( bufferGeometry instanceof THREE.Geometry ) {

        bufferGeometry = ( new THREE.BufferGeometry() ).fromGeometry( bufferGeometry );

}

var meshid = `Mesh${ libraryGeometries.length + 1 }`;

roads.js

GitHub: dpwoert/CityIO

44
45
46
47
48
49
50
51
52
53
//custom material
else {
        material = options.material;
}

var buffer = new THREE.BufferGeometry();
buffer.fromGeometry(geometry);
geometry.dispose();

//create mesh

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