How to use the Float32BufferAttribute function from three

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

three.Float32BufferAttribute creates a buffer attribute for storing floating point values in a three.js geometry.

76
77
78
79
80
81
82
83
84
85
      position[j + 2] = g.attributes.position.array[k + 2];
      opacity[j / 3] = 1;
    }
  }
  geometry.addAttribute(`position${index}`, new THREE.Float32BufferAttribute(position, 3, 1));
  geometry.addAttribute(`opacity${index}`, new THREE.Float32BufferAttribute(opacity, 1, 1));
} else {
  const opacity = [];
  for (var j = 0; j < maxCount ; j++) {
    opacity[j] = 1;
fork icon260
star icon0
watch icon2

+ 5 other calls in file

76
77
78
79
80
81
82
83
84
85
      position[j + 2] = g.attributes.position.array[k + 2];
      opacity[j / 3] = 1;
    }
  }
  geometry.setAttribute(`position${index}`, new THREE.Float32BufferAttribute(position, 3, 1));
  geometry.setAttribute(`opacity${index}`, new THREE.Float32BufferAttribute(opacity, 1, 1));
} else {
  const opacity = [];
  for (var j = 0; j < maxCount ; j++) {
    opacity[j] = 1;
fork icon260
star icon0
watch icon1

+ 5 other calls in file

How does three.Float32BufferAttribute work?

Float32BufferAttribute is a class in the Three.js library that represents a buffer attribute containing 32-bit floating-point numbers, which is used to define per-vertex data for geometries in 3D scenes. It stores the attribute data in a Float32Array buffer and associates it with a specific vertex attribute name and number of components per vertex.

170
171
172
173
174
175
176
177
178
179
    colors.push(headColor.r);
    colors.push(headColor.g);
    colors.push(headColor.b);
}

coneGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

if (direction.y > 0.99999) {
    quaternion.set(0, 0, 0, 1);
} else if (direction.y < -0.99999) {
fork icon117
star icon808
watch icon24

+ 4 other calls in file

241
242
243
244
245
246
247
248
249
250
    MapNodeGeometry.buildPlane(width, height, widthSegments, heightSegments, indices, vertices, normals, uvs);
    if (skirt) {
        MapNodeGeometry.buildSkirt(width, height, widthSegments, heightSegments, skirtDepth, indices, vertices, normals, uvs);
    }
    this.setIndex(indices);
    this.setAttribute('position', new three.Float32BufferAttribute(vertices, 3));
    this.setAttribute('normal', new three.Float32BufferAttribute(normals, 3));
    this.setAttribute('uv', new three.Float32BufferAttribute(uvs, 2));
}
static buildPlane(width = 1.0, height = 1.0, widthSegments = 1.0, heightSegments = 1.0, indices, vertices, normals, uvs) {
fork icon75
star icon468
watch icon0

+ 21 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// create an array of vertices
const vertices = [
  0,
  0,
  0, // first vertex
  1,
  0,
  0, // second vertex
  0,
  1,
  0, // third vertex
];

// create a Float32Array from the vertices array
const vertexArray = new Float32Array(vertices);

// create a new Float32BufferAttribute with the vertex array and the number of components per vertex (in this case, 3 for x, y, and z)
const bufferAttribute = new THREE.Float32BufferAttribute(vertexArray, 3);

This code creates a new Float32BufferAttribute with three vertices, each with x, y, and z coordinates specified as three floats in the vertices array. The Float32BufferAttribute takes the vertexArray as the data source and 3 as the number of components per vertex. This bufferAttribute can be used as vertex data for a THREE.BufferGeometry.

37
38
39
40
41
42
43
44
45
46
  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)
}
return null
fork icon57
star icon163
watch icon0

+ 5 other calls in file

613
614
615
616
617
618
619
620
621
622
   indexLookup[customAttributes.radius.value.length - 1] =
     swcJSON[node].sampleNumber;
});
 geometry.setAttribute(
   "position",
   new THREE.Float32BufferAttribute(customAttributes.vertices.value, 3)
 );
 geometry.setAttribute(
   "radius",
   new THREE.Float32BufferAttribute(customAttributes.radius.value, 1)
fork icon7
star icon21
watch icon0

+ 31 other calls in file

162
163
164
165
166
167
168
169
170
171
case Float32Array:
attributeData = new dracoDecoder.DracoFloat32Array();
decoder.GetAttributeFloatForAllPoints(
    dracoGeometry, attribute, attributeData);
geometryBuffer[ attributeName ] = new Float32Array( numValues );
TypedBufferAttribute = THREE.Float32BufferAttribute;
break;

case Int8Array:
attributeData = new dracoDecoder.DracoInt8Array();
fork icon4
star icon26
watch icon0

+ 5 other calls in file

707
708
709
710
711
712
713
714
715
716
var arrowGeometry = new THREE.CylinderBufferGeometry( 0, 0.05, 0.2, 12, 1, false);

var scaleHandleGeometry = new THREE.BoxBufferGeometry( 0.125, 0.125, 0.125);

var lineGeometry = new THREE.BufferGeometry( );
lineGeometry.addAttribute('position', new THREE.Float32BufferAttribute( [ 0, 0, 0,	1, 0, 0 ], 3 ) );

var CircleGeometry = function( radius, arc ) {

    var geometry = new THREE.BufferGeometry( );
fork icon4
star icon26
watch icon0

+ 2 other calls in file

66
67
68
69
70
71
72
73
74
75

if (this.opts.enableLaser) {
    //create visible lines for the two controllers
    var geometry = new _threeModule.BufferGeometry();
    geometry.addAttribute('position', new _threeModule.Float32BufferAttribute([0, 0, 0, 0, 0, -this.opts.laserLength], 3));
    geometry.addAttribute('color', new _threeModule.Float32BufferAttribute([1.0, 0.5, 0.5, 0, 0, 0], 3));

    var material = new _threeModule.LineBasicMaterial({
        vertexColors: false,
        color: 0x880000,
fork icon4
star icon10
watch icon1

+ 7 other calls in file

652
653
654
655
656
657
658
659
660
661
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 ) );

class FullScreenQuad {
fork icon3
star icon7
watch icon0

+ 71 other calls in file

92
93
94
95
96
97
98
99
100
101
// add objects to the scene here
//let geometry = new THREE.BufferGeometry();

//let aCurveFloat32 = new Float32Array(this.pos.buffer); //, 3);

//geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

const plane_1_geometry = new THREE.PlaneGeometry( 1, 1 );
const plane_1_material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
let plane_1_mesh = new THREE.Mesh( plane_1_geometry, plane_1_material );
fork icon3
star icon7
watch icon0

+ 5 other calls in file

974
975
976
977
978
979
980
981
982
983
    }

}

const morphedPositionAttribute = new THREE.Float32BufferAttribute( modifiedPosition, 3 );
const morphedNormalAttribute = new THREE.Float32BufferAttribute( modifiedNormal, 3 );
return {
    positionAttribute: positionAttribute,
    normalAttribute: normalAttribute,
    morphedPositionAttribute: morphedPositionAttribute,
fork icon2
star icon10
watch icon0

+ 3 other calls in file

632
633
634
635
636
637
638
639
640
641
            _calculateMorphedAttributeData(object, positionAttribute, morphPosition, morphTargetsRelative, a, b, c, modifiedPosition);
            _calculateMorphedAttributeData(object, normalAttribute, morphNormal, morphTargetsRelative, a, b, c, modifiedNormal);
        }
    }
}
const morphedPositionAttribute = new three_1.Float32BufferAttribute(modifiedPosition, 3);
const morphedNormalAttribute = new three_1.Float32BufferAttribute(modifiedNormal, 3);
return {
    positionAttribute: positionAttribute,
    normalAttribute: normalAttribute,
fork icon1
star icon3
watch icon0

+ 3 other calls in file

302
303
304
305
306
307
308
309
310
311
    this.uvs = new Float32Array(maxVerts * 2);
}
// Populate the mesh
this.fillMesh(0);
this.setIndex(new three_1.Uint32BufferAttribute(this.indices, 1));
this.positionAttribute = new three_1.Float32BufferAttribute(this.vertices, 3);
this.setAttribute('position', this.positionAttribute);
if (this.generateUVs) {
    this.uvsAttribute = new three_1.Float32BufferAttribute(new Float32Array(this.uvs), 2);
    this.setAttribute('uv', this.uvsAttribute);
fork icon1
star icon3
watch icon0

+ 3 other calls in file

543
544
545
546
547
548
549
550
551
552
    }
}
for (let i = 0; i < data.metadata.morphCount; i += 1) {
    const morph = data.morphs[i];
    const params = { name: morph.name };
    const attribute = new three_1.Float32BufferAttribute(data.metadata.vertexCount * 3, 3);
    attribute.name = morph.name;
    for (let j = 0; j < data.metadata.vertexCount * 3; j++) {
        attribute.array[j] = positions[j];
    }
fork icon1
star icon3
watch icon0

+ 24 other calls in file

628
629
630
631
632
633
634
635
636
637

}

if ( geometry.colors.length > 0 ) {

	buffergeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( geometry.colors, 3 ) );

}

if ( geometry.uvs.length > 0 ) {
fork icon1
star icon1
watch icon2

+ 147 other calls in file

400
401
402
403
404
405
406
407
408
409

geometry.addAttribute(
  "position",
  new THREE.Float32BufferAttribute(positions, 3)
);
geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3));

geometry.computeBoundingSphere();
geometry.computeBoundingBox();
minX = geometry.boundingBox.min.x;
fork icon0
star icon8
watch icon0

114
115
116
117
118
119
120
121
122
123
}

const geometry = new THREE.BufferGeometry();
geometry.addAttribute(
  "position",
  new THREE.Float32BufferAttribute(positionsArray, 3)
);
geometry.addAttribute(
  "color",
  new THREE.Float32BufferAttribute(colorsArray, 3)
fork icon0
star icon8
watch icon0

1231
1232
1233
1234
1235
1236
1237
1238
1239
1240

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

if ( geometry.normals.length > 0 ) {

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

} else {

	buffergeometry.computeVertexNormals();
fork icon3
star icon6
watch icon1

+ 75 other calls in file

22
23
24
25
26
27
28
29
30
    false);
let geometryResource = SimplifyGeometry.initGeometry(geometryBuffer);
runDecimation(geometryResource, quality);
SimplifyGeometry.rebuildNormal(geometryResource);
let resultGeometryBuffer = SimplifyGeometry.reconstructBuffer(geometryResource.triangles, false);
geometry.setAttribute("position", new THREE.Float32BufferAttribute(resultGeometryBuffer.position.buffer, 3));
geometry.setAttribute("normal", new THREE.Float32BufferAttribute(resultGeometryBuffer.normal.buffer, 3));
geometry.setAttribute("uv", new THREE.Float32BufferAttribute(resultGeometryBuffer.uv.buffer, 2));
geometry.setIndex(new THREE.Int32BufferAttribute(resultGeometryBuffer.index.buffer, 1));
fork icon0
star icon8
watch icon0

+ 5 other calls in file

Other functions in three

Sorted by popularity

function icon

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