Three.js: How To Create New 'morphing' Geometry If I Have All Necessary Buffers?

I'm using a web-worker to load a .json file of an animated 3D model. For each of the big arrays (vertices, normals, etc.), I'm transferring an Float32Array buffer back to the UI th

Solution 1:

Here's an example based on the mesh loading portion of THREE.GLTF2Loader.

// Create BufferGeometry and assign vertices and normals.var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
geometry.setIndex( new THREE.BufferAttribute( faces, 3 ) );

// Create material.var material = new THREE.MeshStandardMaterial({
  morphTargets: true,
  morphNormals: true
});

// Set up morph target attributes.var posAttr = new THREE.BufferAttribute( morphVertices, 3 );
var normAttr = new THREE.BufferAttribute( morphNormals, 3 );
for (var i = 0; i < posAttr.array.length; i++) {
  posAttr.array[i] += geometry.attributes.position.array[i];
}
for (var j = 0; j < normAttr.array.length; j++) {
  normAttr.array[j] += geometry.attributes.normal.array[j];
}

// Assign morph target attributes.
geometry.morphAttributes.position = [ posAttr ];
geometry.morphAttributes.normal = [ normAttr ];

// Create Mesh.var mesh = new THREE.Mesh(geometry, material);
mesh.updateMorphTargets();

// Apply 50/50 blend of morph targets and default position/normals.
mesh.morphTargetInfluences[0] = 0.5;

three.js r86-dev.