使用 A-Frame 运行简单的 OBJ 文件时出现问题答案

【问题标题】：Problems running a simple OBJ file with A-Frame使用 A-Frame 运行简单的 OBJ 文件时出现问题
【发布时间】：2018-02-21 16:47:30
【问题描述】：

您好，我正在尝试使用 A-Frame 库运行在搅拌机上渲染的简单 OBJ 文件，但结果充满了错误这就是我正在使用的代码，你可以看到它是一个非常简单的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="javascripts/aframe.min.js"></script>
	<script type="text/javascript" src="javascripts/aframe-extras.min.js"></script>

	<title></title>
</head>
<body>
	<a-scene inspector="url: javascripts/aframe-inspector.min.js">
		<a-assets>
			<!-- 3d models -->
			<!-- <a-asset-item id="ead-obj" src="models/Objetos/ead.obj"></a-asset-item>
			<a-asset-item id="ead-mtl" src="models/Objetos/ead.mtl"></a-asset-item> -->

			<a-asset-item id="predio-obj" src="models/Teste/campus2.obj"></a-asset-item> 
			<a-asset-item id="predio-mtl" src="models/Teste/campus2.mtl"></a-asset-item> <- Here I set the items and the path.

			<!-- <a-asset-item id="sala01-obj" src="models/Objetos/sala01.obj"></a-asset-item>
			<a-asset-item id="sala01-mtl" src="models/Objetos/sala01.mtl"></a-asset-item>

			<a-asset-item id="sala02-obj" src="models/Objetos/sala02.obj"></a-asset-item>
			<a-asset-item id="sala02-mtl" src="models/Objetos/sala02.mtl"></a-asset-item> -->

			<!-- checkpoint -->
			<a-mixin id="checkpoint"></a-mixin>
        	<a-mixin id="checkpoint-hovered" color="#6CEEB5"></a-mixin>
		</a-assets>

		<a-camera 
				position="0 10 25"
				camera="userHeight: 16"
               	universal-controls="movementControls: checkpoint"
                checkpoint-controls="mode: animate; animateSpeed: 40">
			<a-cursor></a-cursor>
		</a-camera>

		<a-entity>

			<a-entity
				id="Predio"
				position = "10 20 0"
				obj-model="obj: #predio-obj; mtl: #predio-mtl"
				checkpoint="offset: -15 6 15"
				scale = "3 3 3"
				>
			</a-entity> <- and here I put the entity as is recommended on A-frame.

			<a-entity
				id="Ead"
				position = "10.5 20 0"
				obj-model="obj: #ead-obj; mtl: #ead-mtl"
				checkpoint="offset: -24 5 10"
				scale = "3 3 3"
				>
			</a-entity>

	<!--	<a-entity
				id="Build"
				position = "18 20 0"
				obj-model="obj: #sala01-obj; mtl: #sala01-mtl"
				checkpoint="offset: 0 10 20"
				scale = "3 3 3"
				>
			</a-entity> -->

			<a-entity
				id="Sala02"
				position = "25 20 0"
				obj-model="obj: #sala02-obj; mtl: #sala02-mtl"
				checkpoint="offset: 15 5 15"
				scale = "3 3 3"
				>
			</a-entity>
		</a-entity>	

		<a-sky color="lightblue"></a-sky>	
	</a-scene>
</body>
</html>

所以我运行这段代码，它显示的是这样的：

这是被窃听的结果：

这是一个只有 4MB 的小文件。

【问题讨论】：

标签： javascript aframe

【解决方案1】：

我建议使用 glTF 格式。在docs中也是a-frame团队推荐的。它专为 webGL 引擎而设计。

导出器是一个简单的搅拌器plugin，如果你想在模型中添加动画，试试这个one。

至于 obj / mtl 组合 - mtl 文件很少工作，并且不能保证在 .obj 上使用 material 组件，正如 a-frame 的 Don McCurdy here 所指出的那样，他在那里也推荐glTF格式。

【讨论】：

嘿伙计，非常感谢我使用glTF格式并且工作得很好，非常感谢
@GuilhermeMarques 很高兴我能帮上忙 :)