当前位置: 首页 > 网络应用技术

three.js显示GLB文件

时间:2023-03-08 20:22:06 网络应用技术

  最近,我们将获得诸如GLB文件的显示和替换之类的内容。我以前使用过GLTF-Pipeline,但目前尚不清楚我不完全理解GLTF-Pipeline的守则,或者因为他不支持某些功能我需要,所以仍然感到难过。最近,需求已被替换。您需要在页面上显示GLB文件,并且需要替换一些纹理并添加多个GLB文件的功能。您尝试使用three.js实现。为了避免将来忘记,备份。

  由于该项目不大,因此无需介绍三个。当然,建议您去github下载三分。

  引言方法更简单

  我的介绍与官方网站的示例不同

  官方网站的示例:

  从理论上讲,官方网站更好,而这三个。JS直接引用它。其他JS或三个需要在后面引入的JS很好,但是我Doand Safari无法阅读前三个的报价。结果,这两个浏览器直接是黑色的,但是Chrome可以是正常显示。

  请注意,添加了上述GLBLIST,因为我需要单击按钮以添加其他GLB样式,也就是说,如果我最初是GLB是一个字符模型,此时我需要在字符模型中添加眼镜模型或掩码模型,因此,我定义了一个ArrayObject。内部模型用于区分,因为我在这里有两个玻璃模型和两个掩码型号。从理论上讲,相同的角色模型不会带两个眼镜,因此,如果模型相同,则执行替换操作。模型。

  接下来,引言完成,并且开始操作

  在此步骤中,该页面基本上完成了,但是我们发现该模型在拖动时不会旋转,因为需要使用如下所示使用相机之间的关系。在这里,您可以看到three.js相机的特定参数,因为因为相机的特定参数,因为我在这里使用的相机之间的关系是因为我需要添加此相机,因此我需要添加此摄像机。

  同时,我的需求还没有结束,因为需要用字符模型的材料图替换需求,因此下一步是替换材料图。

  在更换的同时,您需要能够在之前重置默认地图。请注意,当我阅读了它的GLB文件时,我已经获得了默认图,并且我已经将其删除。

  下一步是下载GLB文件

  这应该在特定的代码中更详细,但是在撰写此之前,已经插入了其他项目,没有时间来组织它。在某些地方,我忘记了它。如果后来的Stagemaybe有时间,希望不要去鸽子

  原始:https://juejin.cn/post/7099353608092663822