Home

Index

How to use the BufferAttribute function from three

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

three.BufferAttribute is a class in the Three.js library used to represent a typed array of data stored in GPU memory that can be passed as an attribute to a geometry object for rendering.

worldrenderer.js

38
39
40
41
42
43
44
45
46
const chunkCoords = data.key.split(',')
if (!this.loadedChunks[chunkCoords[0] + ',' + chunkCoords[2]]) return

const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(data.geometry.positions, 3))
geometry.setAttribute('normal', new THREE.BufferAttribute(data.geometry.normals, 3))
geometry.setAttribute('color', new THREE.BufferAttribute(data.geometry.colors, 3))
geometry.setAttribute('uv', new THREE.BufferAttribute(data.geometry.uvs, 2))
geometry.setIndex(data.geometry.indices)

158

+ 15 other calls in file

MarchingCubes.js

GitHub: zziyifan/Medical-AI-learning-1

105
106
107
108
109
110
111
112
113
114
let sizeY = 1.0;
let
    sizeZ = 1.0;

positions = new Float32Array(positions);
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

if (config.flat_shading === false) {
    geometry = BufferGeometryUtils.mergeVertices(geometry);
    geometry.computeVertexNormals();

+ 4 other calls in file

How does three.BufferAttribute work?

three.BufferAttribute is a class in the Three.js library used to represent a typed array of data that is stored in GPU memory and can be passed as an attribute to a geometry object for rendering. When a BufferAttribute is created, it takes as input an array of data of a specific type (e.g., Float32Array, Uint16Array, etc.), as well as the number of components per vertex (e.g., 3 for position coordinates, 2 for texture coordinates, etc.). The BufferAttribute object stores the data in a Float32Array or Uint16Array buffer, which is then uploaded to GPU memory for rendering. The BufferAttribute also provides methods for reading and writing data to the buffer, as well as methods for setting and getting the attribute's name and usage. The BufferAttribute can then be passed as an attribute to a BufferGeometry object, which defines the shape of the geometry to be rendered. The BufferGeometry uses the BufferAttribute to read the data from the GPU and pass it to the shader program for rendering. By storing data in GPU memory, BufferAttribute can greatly improve the performance of Three.js applications, since the data can be accessed and processed in parallel by the GPU. This can lead to faster rendering times and smoother animations.

MeshVolume.js

GitHub: zziyifan/Medical-AI-learning-1

38
39
40
41
42
43
44
45
46
47
    THREE.NearestFilter,
    THREE.NearestFilter,
);
colormap.needsUpdate = true;

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

const texture = new THREE.Data3DTexture(
    config.volume.data,

+ 21 other calls in file

THREE.MeshLine.js

GitHub: szu-advtech/AdvTech

143
144
145
146
147
148
149
150
151
152

if (!this.attributes) {
	this.attributes = {
		position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
		previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
		next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
		side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
		width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
		uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
		index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),

398

+ 31 other calls in file

Ai Example

1
2
3
4
5
6
7
import * as THREE from "three";

const positions = new Float32Array([
  -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 0.0, 1.0, 0.0,
]);

const bufferAttribute = new THREE.BufferAttribute(positions, 3);

In this example, we first import the THREE module from Three.js. We define an array of Float32 values representing the x, y, and z coordinates of three vertices in 3D space. We then create a new BufferAttribute object by passing the positions array and the value 3 as arguments. The value 3 indicates that there are three components per vertex (i.e., x, y, and z). The BufferAttribute object stores the positions array in GPU memory and provides methods for reading and writing data to the buffer. We can then pass the BufferAttribute as an attribute to a BufferGeometry object, which defines the shape of the geometry to be rendered. arduino Copy code

THREE.MeshLine.js

GitHub: szu-advtech/AdvTech

146
147
148
149
150
151
152
153
154
155
		position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
		previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
		next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
		side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
		width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
		uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
		index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),
		counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
	}
} else {

398

+ 31 other calls in file

index.test.js

GitHub: donmccurdy/three-pathfinding

43
44
45
46
47
48
49
50
51
52
  1,  0,  0,
  1,  0, -1,
  0,  0, 0.1,
  1,  0, 0.1,
]), 3);
const index = new THREE.BufferAttribute(new Uint16Array([
  0, 1, 2,
  0, 3, 4,
  0, 4, 1,
]), 1);

109

888

+ 23 other calls in file

PointsBillboard.js

GitHub: K3D-tools/K3D-jupyter

216
217
218
219
220
221
222
223
224
225
if (opacities && opacities.length > 0) {
    geometry.setAttribute('opacities', new THREE.BufferAttribute(opacities, 1).setUsage(THREE.DynamicDrawUsage));
}

if (sizes && sizes.length > 0) {
    geometry.setAttribute('sizes', new THREE.BufferAttribute(sizes, 1).setUsage(THREE.DynamicDrawUsage));
}

if (attribute && attribute.length > 0) {
    geometry.setAttribute('attributes', new THREE.BufferAttribute(attribute, 1).setUsage(THREE.DynamicDrawUsage));

115

803

+ 9 other calls in file

PointsMesh.js

GitHub: K3D-tools/K3D-jupyter

84
85
86
87
88
89
90
91
92
        new THREE.InstancedBufferAttribute(opacities, 1),
    );
}

// boundingBox & boundingSphere
boundingBoxGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
boundingBoxGeometry.computeBoundingSphere();
boundingBoxGeometry.computeBoundingBox();
Fn.expandBoundingBox(boundingBoxGeometry.boundingBox, config.point_size * 0.5);

115

803

MeshStandard.js

GitHub: K3D-tools/K3D-jupyter

79
80
81
82
83
84
85
86
87
88
    material.setValues({
        color: 0xffffff,
        vertexColors: THREE.VertexColors,
    });

    geometry.setAttribute('color', new THREE.BufferAttribute(buffer.colorsToFloat32Array(colors), 3));
    finish();
} else if (
    attribute && colorRange && colorMap && attribute.length > 0
    && colorRange.length > 0 && colorMap.length > 0

117

809

+ 39 other calls in file

three-tube-wireframe.js

GitHub: mattdesl/three-tube-wireframe

72
73
74
75
76
77
78
79
80
81
});

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));
const UintArray = mesh.index.length > 65535 ? Uint32Array : Uint16Array;
outGeometry.setIndex(new THREE.BufferAttribute(new UintArray(mesh.index), 1));
if (buffer) return outGeometry;

+ 79 other calls in file

ParticleSystem.js

GitHub: JordanMachado/particles-attraction

53
54
55
56
57
58
59
60
61
62
  vertices[count * 3 + 1] = this.dataPos[i + 1];
  vertices[count * 3 + 2] = this.dataPos[i + 2];
  count++;

}
this.geom.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
this.geom.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
this.geom.addAttribute('color', new THREE.BufferAttribute(colors, 3));

this.textureDataPos = new THREE.DataTexture(

+ 5 other calls in file

particles.js

GitHub: edankwan/The-Spirit

165
166
167
168
169
170
171
172
173
174
    fboUV[ i6 + 1 ] = fboUV[ i6 + 3 ] = fboUV[ i6 + 5 ] = ~~(i / TEXTURE_WIDTH) / TEXTURE_HEIGHT;
}
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( position, 3 ));
geometry.addAttribute( 'positionFlip', new THREE.BufferAttribute( positionFlip, 3 ));
geometry.addAttribute( 'fboUV', new THREE.BufferAttribute( fboUV, 2 ));

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

160

993

+ 7 other calls in file

MeshStandard.js

GitHub: K3D-tools/K3D-jupyter

46
47
48
49
50
51
52
53
54
55

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

if (config.flat_shading === false && hasNormals) {
    geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));
}

const material = new MaterialConstructor({
    color: config.color,

119

812

+ 9 other calls in file

KeplerParticles.js

GitHub: typpo/spacekit

90
91
92
93
94
95
96
97
98
99
    i: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    om: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    ma: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    n: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    w: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    wBar: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    q: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    M: new THREE.BufferAttribute(new Float32Array(particleCount), 1),
    a0: new THREE.BufferAttribute(new Float32Array(particleCount), 1)
};

398

+ 29 other calls in file

axis.js

GitHub: tumblr/data-lasso

82
83
84
85
86
87
88
89
90
91
    axisLineColor[0], axisLineColor[1], axisLineColor[2],   axisLineColor[0], axisLineColor[1], axisLineColor[2],
]);

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

+ 7 other calls in file

THREEUtil.js

GitHub: VCityTeam/UD-Viz

371
372
373
374
375
376
377
378
379
380
    new THREE.BufferAttribute(Float32Array.from(pos), 3)
  );
  const wireframe = new THREE.LineSegments(geomEdges, mat);
  wireframe.geometry.setAttribute(
    nameOfGeometryAttribute,
    new THREE.BufferAttribute(Int32Array.from(attributeArray), 1)
  );
  wireframe.userData.isWireframe = true;
  child.add(wireframe);
}

+ 14 other calls in file

morpheusview.js

GitHub: audunsh/evince

234
235
236
237
238
239
240
241
242
243

//this.scene.children[0].count = aCurveFloat32.length/3;

this.scene.children[0].geometry.setAttribute(
    "position",
    new THREE.BufferAttribute(aCurveFloat32, 3, false)
);

this.scene.children[0].geometry.needsUpdate = true;
//.attributes.aCurve.needsUpdate = true;

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
  geometry.attributes.uv !== undefined
) {
  console.log("THREE.GLTFLoader: Duplicating UVs to support aoMap.");
  geometry.setAttribute(
    "uv2",
    new THREE.BufferAttribute(geometry.attributes.uv.array, 2)
  );
}

if (material.isGLTFSpecularGlossinessMaterial) {

+ 44 other calls in file

OBJLoader.js

GitHub: NydusOne/gcode-composer

684
685
686
687
688
689
690
691
692
693

buffergeometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( geometry.vertices ), 3 ) );

if ( geometry.normals.length > 0 ) {

	buffergeometry.setAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( geometry.normals ), 3 ) );

} else {

	buffergeometry.computeVertexNormals();

+ 65 other calls in file

GPUParticleSystem.js

GitHub: ss-sola/Threejs-MMD

376
377
378
379
380
381
382
383
384
385

self.particleShaderGeo.addAttribute('position', new THREE.BufferAttribute(self.particleVertices, 3));
self.particleShaderGeo.addAttribute('particlePositionsStartTime', new THREE.BufferAttribute(self.particlePositionsStartTime, 4).setDynamic(true));
self.particleShaderGeo.addAttribute('particleVelColSizeLife', new THREE.BufferAttribute(self.particleVelColSizeLife, 4).setDynamic(true));
self.particleShaderGeo.addAttribute('particleVelocity', new THREE.BufferAttribute(self.particleVelocity, 3).setDynamic(true));
self.particleShaderGeo.addAttribute('particleTurbulence', new THREE.BufferAttribute(self.particleTurbulence, 1).setDynamic(true));

self.posStart = self.particleShaderGeo.getAttribute('particlePositionsStartTime');
self.velCol = self.particleShaderGeo.getAttribute('particleVelColSizeLife');
self.velocityAttr = self.particleShaderGeo.getAttribute('particleVelocity');

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