three.jsfloat32

Three.js - How to fill Float32Array with equal number of points for different geometries


I have a project that loads various models (.obj, can be anything) and generates particles from the geometry position using Float23Array's.

Given the geometries of each model are completely different, this causes the number of particles to change depending on which model is used.

The code I'm using to populate the buffer attribute is below:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

const dataSize = 1024;

const modelLoader = new OBJLoader();
const modelObject = await modelLoader.loadAsync('/path/to/model.obj');

const positionData = new Float32Array(dataSize * dataSize * 3);
const modelChildren = modelObject.children as Mesh[];

const bufferPositions = modelChildren
  .filter(({ isMesh }) => isMesh)
  .map(({ geometry: { attributes } }) => attributes.position.array as Float32Array);

const combinedBuffer = concatFloat32Arrays(bufferPositions); // merge Float32's

for (let index = 0, length = positionData.length; index < length; index += 3) {
  positionData[index] = combinedBuffer[index];
  positionData[index + 1] = combinedBuffer[index + 1];
  positionData[index + 2] = combinedBuffer[index + 2];
}

return new Float32BufferAttribute(positionData, 3);

A portion of the positionData array is empty, e.g 0, obviously because the combinedBuffer[index] is undefined.

Can anyone point me in the right direction?

I basically want an equal number of particles for each geometry, regardless of the model's geometry complexity.


Solution

  • You normally handle this use case by allocating a large enough buffer and then use BufferGeometry.setDrawRange() to decide which part of the data you want to draw. The values of vertices outside of the draw range doesn't matter with this approach.