这里是框架的初学者，已经完成了教程场景，现在正在设置我的第一个使用 .obj 模型。
使用远程服务器，感觉这是重要的信息。
我看到过有关模型未显示的问题，但我的模型显示已损坏，我不知道从哪里开始修复它。
This is how it looks in windows 3D builder:
And this is how it looks in my project (backed on pink plane for contrast):
这是 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pokemon Stadium</title>
<link href="css/main.css" rel="stylesheet">
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Scene -->
<a-scene onLoad="">
<!------------------------------------------------ Assets --------------------------------------------------------->
<a-assets>
<a-asset-item id="stadium-obj" src="assets/models/stadium/Pokemon+Stadium.obj"></a-asset-item>
<a-asset-item id="stadium-mtl" src="assets/models/stadium/Pokemon+Stadium.mtl"></a-asset-item>
<a-asset-item id="ivy-obj" src="assets/models/ivysaur/Pokemon.obj"></a-asset-item>
<a-asset-item id="ivy-mtl" src="assets/models/ivysaur/Pokemon.mtl"></a-asset-item>
</a-assets>
<!------------------------------------------------- Scene --------------------------------------------------------->
<!-- Skybox -->
<a-sky color="#279DF4"></a-sky>
<!-- Abyss -->
<a-plane scale="1000 1000" position="0 -10 0" color="#212121" rotation="-90 0 0" material="shader: flat"></a-plane>
<!-- Stadium -->
<a-entity obj-model="obj: #stadium-obj; mtl: #stadium-mtl" position="0 0 -30" scale="0.05 0.05 0.05" material="side: double"></a-entity>
<!-- Bulbasaur -->
<a-entity obj-model="obj: #ivy-obj; mtl: #ivy-mtl" position="15 10 0" scale="1 1 1" rotation="0 90 0"></a-entity>
<!-- Camera + cursor -->
<a-entity camera look-controls position="10 12 0" rotation="-23 -90 0">
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: springgreen"
event-set__2="_event: mouseleave; color: black"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene>
</body>
</html>
You probably have to set the type of side of the material to THREE.DoubleSide. With A-Frame you should be able to change the type using the following DOM attribute on an AEntity: material="side: double".
如果情况并非如此，您应该使用场景元素的片段来更新您的帖子。
EDIT:
如图所示，我的模型的部分内容渲染不正确。 THREEjs 中的模型加载器读取模型中的所有网格并将它们绑定到分组对象。要解决此问题，您必须将网格体材质的侧面设置为 DoubleSided。幸运的是，在 A 型框架中，obj-model当模型加载成功时，组件会发出一个事件，我们为发出的事件添加一个监听器model-loaded在 DOM 元素上并附加一个返回自定义事件的回调。自定义事件发送对模型组的引用。查询 AEntity，我附加了一个 idmodelEl到我的。
<script>
(function(modelEl) {
if (!window['AFRAME'] && !modelEl) {
return;
}
modelEl.addEventListener('model-loaded', function(evt) {
var model = evt.detail.model;
traverse(model);
});
})(document.getElementById('stadium'));
function traverse(node) {
node.children.forEach(function(child) {
if (child.children) {
traverse(child);
}
updateMaterial(child['material'], THREE.DoubleSide);
});
}
function updateMaterialSide(material, side) {
if (!material) {
return;
}
if (material instanceof THREE.Material) {
material.side = side;
material.needsUpdate = true
} else if (material instanceof THREE.MultiMaterial) {
material.materials.forEach(function(childMaterial) {
updateMaterial(childMaterial, side);
});
}
}
</script>
After running the above script, my model, and some of the texture loading, has been fixed.
需要考虑的事情是深入创建自定义组件并修改或扩展 obj-model 组件，以避免必须查询可能存在相同问题的每个模型。 如果这些都不起作用，我相信您的波前对象导出设置可能有问题。
EDIT2:
Regarding my comment, here is a result of the fixed obj file in A-Frame:
为了方便起见，您可以在这里找到 MTL 和 OBJ 文件：
obj file
mtl file