首页 > 代码库 > Threejs 加载 DAE 模型遇到关题汇总

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

2024-07-15 10:38:31   213人阅读

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

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。



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

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


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

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - collada - skinning</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #000;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #f00;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>

		<div id="info">
		<a href=http://www.mamicode.com/"http://threejs.org" target="_blank">three.js webgl - collada - skinning>
其中加载的 dae 模型 
 "./models/collada/avatar.dae",
的完整地址如下：
http://threejs.org/examples/models/collada/avatar.dae
使用 Mac 操作系统的 Finder 直接可以选中下载到的 avatar.dae ，按空格弹出查看窗口，效果如下：

使用文本编辑器打开 avatar.dae ，搜索 library_images 关键字，找到如下部分：
 <library_images>
    <image id="VWS_B_Male2-2_jpg">
      <init_from>VWS_B_Male2-2.jpg</init_from>
    </image>
  </library_images>


按相对于 dae 的路径，拼接出贴图文件的完整地址：
http://threejs.org/examples//models/collada/VWS_B_Male2-2.jpg

将该贴图下载并保存到 avatar.dae 同一目录下，这样再用 Finder 查看，即可看到贴上图的模型了。
由此可见，dae 是一个完整的自维护的模型，通过其内的 xml 组织的信息，足以呈现并贴图所承载的模型，甚至于灯光、动画，等等。

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

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

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


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


联系
我们