三.js：如果我拥有所有必要的缓冲区，如何创建新的'morphing'几何体？

Question

我正在使用web工作程序加载动画3D模型的.json文件。对于每个大数组（顶点、法线等），我将把一个Float32Array缓冲区传输回UI线程。由于此类缓冲区是可转移对象，因此这将花费（几乎）零时间。

现在，WebGL（以及Three.js）也在内部使用Float32Array缓冲区。这意味着我可能可以在不复制任何东西的情况下加载这个3D动画，在主线程中花费几乎为零的时间。这不是很好吗？

但尚不清楚如何完成这一部分：在主线程中，我们为顶点、法线（主法线和"变形"法线）和面提供了阵列缓冲区。如何在不翻译或复制数据的情况下，从这些数据创建工作Geometry（或BufferGeometry）？

var scene,
    vertices, normals, faces,
    morphVertices, morphNormals; // <-- we have all these as typed arrays
var geometry = ...; // <-- insert code here
var material = new THREE.MeshLambertMaterial({ morphTargets: true });
var object3D = new THREE.MorphAnimMesh(geometry, material);
scene.add(object3D);

这个答案给出了一个提示，但只有第7点似乎是相关的，它假设已经有一些Geometry实例，并且它不处理变形目标。

Answer 1

以下是一个基于THRE.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。