Three.js:如果我拥有所有必要的缓冲区,如何创建新的“变形”几何图形?

2023-12-10

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

现在,事实证明 WebGL(以及 Three.js)使用Float32Array内部也有缓冲。这意味着我可以加载这个 3D 动画而无需复制任何内容,在主线程中花费的时间几乎为零。这不是很好吗?

但目前尚不清楚如何执行该部分:在主线程中,我们有可用于顶点、法线(主要法线和“变形”法线)和面的数组缓冲区。我如何创建一个工作Geometry (or 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实例,并且它不处理变形目标。


这是一个基于以下示例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。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Three.js:如果我拥有所有必要的缓冲区,如何创建新的“变形”几何图形? 的相关文章

随机推荐