JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 将Three.js场景导出到STL,保持动画完好无损大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个Three.js场景渲染,我想导出动画渲染后的外观.例如,在动画消失了~100帧之后,用户点击导出并且场景应该像当时一样导出到STl.

从我尝试过(使用STLExporter.js),似乎只使用初始位置导出模型.

如果已经有办法做到这一点,或者是一个简单的解决方法,我会很感激在这方面的推动.

更新:在进一步深入了解内部结构之后,我已经想出(至少表面上看)为什么STLExporter不起作用. STLExporter查找所有对象并询问它们是否为Geometry对象的顶点和面.我的模型有一堆被剥皮的骨头.在动画步骤期间,骨骼会更新,但这些更新不会传播到原始Geometry对象.我知道这些变换顶点正在计算并存在于某处(它们会在画布上显示).

问题是这些变换的顶点和面存储在哪里,我可以访问它们以将它们导出为STL吗?

解决方法

不幸的是,答案是无处可去的.这些都是在GPU上通过传入几个大型数组调用WebGL函数来计算的.

为了解释如何计算这个,我们首先回顾一下动画是如何工作的,使用this knight example作为参.
SkinnedMesh对象包含一个骨架(由许多Bone组成)和一堆顶点.它们从所谓的@L_450_4@开始排列.每个顶点绑定到0-4个骨骼,如果这些骨骼移动,顶点将移动,创建动画.

如果您采取我们的骑士示例,暂停动画中摆,并尝试standard STL exporter,生成的STL文件将完全是这个姿势,而不是动画.为什么?因为它只是查看mesh.geometry.vertices,它在动画期间不会从原始绑定姿势更改.只有骨骼会发生变化,GPU会进行一些数学运算来移动与每个骨骼相对应的顶点.

移动每个顶点的数学运算非常简单 – 在导出之前将绑定姿势顶点位置转换为骨骼空间,然后从骨骼空间转换为全局空间.
调整here的代码,我们将其添加到原始导出器:

vector.copy( vertices[ vertexIndex ] );
boneInDices = [];   //which bones we need
boneInDices[0] = mesh.geometry.skinInDices[vertexIndex].x;
boneInDices[1] = mesh.geometry.skinInDices[vertexIndex].y;
boneInDices[2] = mesh.geometry.skinInDices[vertexIndex].z;
boneInDices[3] = mesh.geometry.skinInDices[vertexIndex].w;

weights = [];   //some bones impact the vertex more than others
weights[0] = mesh.geometry.skinWeights[vertexIndex].x;
weights[1] = mesh.geometry.skinWeights[vertexIndex].y;
weights[2] = mesh.geometry.skinWeights[vertexIndex].z;
weights[3] = mesh.geometry.skinWeights[vertexIndex].w;

inverses = [];  //boneInverses are the transform from bind-pose to some "bone space"
inverses[0] = mesh.skeleton.boneInverses[ boneInDices[0] ];
inverses[1] = mesh.skeleton.boneInverses[ boneInDices[1] ];
inverses[2] = mesh.skeleton.boneInverses[ boneInDices[2] ];
inverses[3] = mesh.skeleton.boneInverses[ boneInDices[3] ];

skinMatrices = [];  //each bone's matrix world is the transform from "bone space" to the "global space"
skinMatrices[0] = mesh.skeleton.bones[ boneInDices[0] ].matrixWorld;
skinMatrices[1] = mesh.skeleton.bones[ boneInDices[1] ].matrixWorld;
skinMatrices[2] = mesh.skeleton.bones[ boneInDices[2] ].matrixWorld;
skinMatrices[3] = mesh.skeleton.bones[ boneInDices[3] ].matrixWorld;

var finalVector = new THREE.Vector4();
for(var k = 0; k<4; k++) {
    var tempVector = new THREE.Vector4(vector.x,vector.y,vector.z);
    //weight the transformation
    tempVector.multiplyScalar(weights[k]);
    //the inverse takes the vector into local bone space
    tempVector.applymatrix4(inverses[k])
    //which is then transformed to the appropriate world space
    .applymatrix4(skinMatrices[k]);
    finalVector.add(tempVector);
}

output += '\t\t\tvertex ' + finalVector.x + ' ' + finalVector.y + ' ' + finalVector.z + '\n';

这会产生如下所示的STL文件:

完整代码可在https://gist.github.com/kjlubick/fb6ba9c51df63ba0951f获得

大佬总结

以上是大佬教程为你收集整理的javascript – 将Three.js场景导出到STL,保持动画完好无损全部内容,希望文章能够帮你解决javascript – 将Three.js场景导出到STL,保持动画完好无损所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。