天天看点

Threejs 加载 DAE 模型遇到关题汇总

Threejs 加载 DAE 模型遇到关题汇总

<a target="_blank" href="http://blog.csdn.net/opengl_es">转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。</a>

我们来一起看一个 Threejs 官方的示例:

<a target="_blank" href="http://threejs.org/examples/#webgl_loader_collada_skinning">http://threejs.org/examples/#webgl_loader_collada_skinning</a>

Threejs 加载 DAE 模型遇到关题汇总

http://threejs.org/examples/webgl_loader_collada_skinning.html

其中加载的 dae 模型 

的完整地址如下:

<a target="_blank" href="http://threejs.org/examples/models/collada/avatar.dae">http://threejs.org/examples/models/collada/avatar.dae</a>

使用 Mac 操作系统的 Finder 直接可以选中下载到的 avatar.dae ,按空格弹出查看窗口,效果如下:

Threejs 加载 DAE 模型遇到关题汇总

使用文本编辑器打开 avatar.dae ,搜索 library_images 关键字,找到如下部分:

按相对于 dae 的路径,拼接出贴图文件的完整地址:

<a target="_blank" href="http://threejs.org/examples//models/collada/VWS_B_Male2-2.jpg">http://threejs.org/examples//models/collada/VWS_B_Male2-2.jpg</a>

Threejs 加载 DAE 模型遇到关题汇总

将该贴图下载并保存到 avatar.dae 同一目录下,这样再用 Finder 查看,即可看到贴上图的模型了。

由此可见,dae 是一个完整的自维护的模型,通过其内的 xml 组织的信息,足以呈现并贴图所承载的模型,甚至于灯光、动画,等等。

Threejs 加载 DAE 模型遇到关题汇总

以下角度,可以看到模型有高亮的部分,这里初步可以断定是帖图图片上的灯光信息,也即该贴图是烘焙上了灯光信息的。

Threejs 加载 DAE 模型遇到关题汇总

可以这样来确认,非环境光所照,以下用 xcode 打开 dae ,看其 Lights 部分为空,表示没有任何灯光。

Threejs 加载 DAE 模型遇到关题汇总

这里有个技巧,如果你拿到的 dae 模型中有灯光光源,而你又不想要其中的环境光源,那么可以用文本编辑器打开这个 dae,并找到 ambient XML 标签:

将其下 color 的内容即环境光的三色值去掉,这样环境光就不起作用了。

继续阅读