Three.js:如果我有所有必要的缓冲区，如何创建新的“变形"几何? [英] Three.js: How to create new 'morphing' geometry if I have all necessary buffers?

问题描述

我正在使用网络工作者加载动画3D模型的 .json 文件.对于每个大数组(顶点，法线等)，我正在将 Float32Array 缓冲区传输回UI线程.由于此类缓冲区是可转让对象，这将花费(几乎)零时间.

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 thread. Since such buffers are transferable objects, this will take (almost) zero time.

现在，事实证明WebGL(因此，Three.js)也在内部使用了 Float32Array 缓冲区.这意味着我可能可以在不复制任何内容的情况下加载此3D动画，而在主线程上花费的时间几乎为零.那不是很好吗?

Now, it turns out that WebGL (and therefore, Three.js) use Float32Array buffers internally, too. This means I could probably load this 3D animation without copying anything, spending almost zero time in the main thread. Isn't that nice?

但是不清楚如何执行该部分:在主线程中，我们具有用于顶点，法线(主顶点和变形"顶点)和面的数组缓冲区.如何在不转换或复制数据的情况下从中创建有效的 Geometry (或 BufferGeometry )?

But it's not clear how to do that part: In the main thread, we have array buffers available for the vertices, normals (the main ones, and the 'morph' ones) and faces. How do I create a working Geometry (or BufferGeometry) from these, without translating or copying the data?

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实例，它不处理变体目标.

This answer gives a hint, but only point 7 seems relevant, it assumes there is already some Geometry instance, and it doesn't handle morph-targets.

推荐答案

以下是基于 three.js r86-dev.

three.js r86-dev.

这篇关于Three.js:如果我有所有必要的缓冲区，如何创建新的“变形"几何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！