A-Frame .obj模型显示但损坏 [英] A-Frame .obj model displaying but broken
问题描述
这里的初学者到框架的总人数，已经遍历了教程的场景，现在正在使用.obj模型设置我的第一个框架。
Total beginner to a-frame here, have been through the tutorial scenes and am now setting up my first using .obj models.
使用远程服务器，感觉到像这样的重要信息。
Using a remote server, feel like that's important information.
我看到过有关模型未显示但我的显示损坏的问题，我不确定从哪里开始修复它。
I've seen questions about models not showing up but mine is displaying broken and I'm not sure where to start fixing it.
这是在Windows 3D Builder中的外观：
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>
推荐答案
您可能必须设置边的类型素材制作成 THREE.DoubleSide 。 使用A-Frame，您应该能够在AEntity上使用以下DOM属性来更改类型： material = side：double 。
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".
如果不是这种情况，则应使用场景元素的片段更新您的帖子。
If this is not the case, you should update your post with a snippet of your scene elements.
编辑：
如图所示，模型的某些部分显示不正确。 THREEjs中的模型加载器读取模型中的所有网格并将其绑定到分组的对象。要解决此问题，必须将网格材料的面设置为DoubleSided。幸运的是，在A-Frame中， obj-model 组件会在模型成功加载后发出一个事件，我们为发出的事件 model-添加一个侦听器-在DOM元素上加载，并附加一个返回自定义事件的回调。 customevent将参考发送到模型组。查询AEntity，我向我添加了id modelEl 。
As shown in the image, parts of my model are rendered incorrectly. The modelloader in THREEjs reads all meshes in a model and binds them to a grouped object. To fix this, you have to set the side of the material of the meshes to DoubleSided. Luckily in A-Frame, the obj-model component emits an event when the model has loaded successfully, we add a listener for the emitted event model-loaded on the DOM element and append a callback which returns a customevent. The customevent sends a reference to the model group. Query for the AEntity, I've appended an id modelEl to mine.
<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组件以避免必须查询可能存在相同问题的每个模型。
如果这些都不起作用，我相信您的波前obj导出设置可能有问题。
Something to consider would be digging into creating custom components and modify or extend the obj-model component to prevent having to query for every model that may have the same issue. If none of this worked, I believe something might be wrong with your wavefront obj export settings.
EDIT2：
关于我的评论，这是A框架中固定obj文件的结果：
Regarding my comment, here is a result of the fixed obj file in A-Frame:
为方便起见，您可以在此处找到MTL和OBJ文件：
For convenience sake you can find the MTL and OBJ file here:
这篇关于A-Frame .obj模型显示但损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
