gltf的导入和导出以及mesh的同材质合并 -----总结

最新推荐文章于 2024-08-19 10:12:26 发布

不要当废柴

最新推荐文章于 2024-08-19 10:12:26 发布

阅读量1.2k

点赞数

文章标签：材质

本文链接：https://blog.csdn.net/weixin_42173625/article/details/127100282

版权

本文探讨了在Three.js中使用gltf格式进行模型导入导出时遇到的问题，强调了异步加载的重要性。在处理同材质合并时，通过合并几何体数组和单一材质，提高了渲染效率，避免了导致模型加载卡死的错误。此外，作者反思了代码组织和JavaScript语法的掌握不足，并提出需要加强逻辑思维和语言熟练度。文章结尾提到，对于相机位置设置导致的部分场景不可见，作者计划后续深入研究并分享解决方案。

摘要由CSDN通过智能技术生成

Q1：loader函数是异步的，要等返回的gltf作为参数，exporter调用parse函数时，解析的scene要里面有信息。js语言中有很多异步回调这样的写法。

Q2：同材质合并时，因为合并的几何体数组和材质数组，材质数组里都是同一材质的material，所以，直接合并几何体数组和材质数组里的一个元素就可以达到渲染的效果，提高渲染效率，我之前写的是合并整个同一材质数组，导致导出的gltf模型加载到editor页面时，直接卡死。

Q3：编写代码过程中，逻辑混乱且js语法生疏，导致出现很多bug，首先，遍历整个gltf文件中得到所有的mesh数组时，接下来要设计数据结构去做同材质mesh数组归类，旋转map结构，这一步我没想到要设计的数据结构要怎么写，接着是是遍历mesh数组,双循环给自己绕晕了，最后得到归类好的同材质mesh数组映射。菜鸟开始接着菜，遍历structMap的values属性时，还是双循环，let变量时，定义的位置，导致逻辑出现很大问题。。。。。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/GLTFLoader.js"></script> -->
    <script src="../build/three.js"></script>
     <script src=".