Aframe A-Frame.obj模型显示但已损坏
这里的a-frame完全是初学者，已经完成了教程场景，现在我正在设置我的第一个使用.obj模型的程序 使用远程服务器，感觉这是重要的信息 我看到一些关于模型没有出现的问题，但我的问题是显示坏了，我不知道从哪里开始修复它 这是它在windows 3D builder中的外观： 这就是我的项目中的外观（以粉色平面为背景以形成对比）： 以下是html：Aframe A-Frame.obj模型显示但已损坏,aframe,.obj,3d-model,Aframe,.obj,3d Model,这里的a-frame完全是初学者，已经完成了教程场景，现在我正在设置我的第一个使用.obj模型的程序 使用远程服务器，感觉这是重要的信息 我看到一些关于模型没有出现的问题，但我的问题是显示坏了，我不知道从哪里开始修复它 这是它在windows 3D builder中的外观： 这就是我的项目中的外观（以粉色平面为背景以形成对比）： 以下是html： <!DOCTYPE html> <html> <head> <meta charset="utf
<!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.DoubleSidematerial=“side:double”obj modelmodelmodel<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>
（功能（modelEl）{
如果（！window['AFRAME']&&&！modelEl）{
返回；
}
modelEl.addEventListener（'model-loaded'，函数（evt）{
var模型=evt.detail.model；
导线测量（模型）；
});
})（文件getElementById（“体育场”）；
函数遍历（节点）{
node.children.forEach（函数（子函数）{
if（child.children）{
导线测量（儿童）；
}
更新材质（子['material']，三个。双面）；
});
}
函数更新MaterialSide（材质，侧面）{
如果（！物料）{
返回；
}
if（三个材质实例中的材质实例）{
材料侧=侧；
material.needsUpdate=true
}else if（三个材质实例中的材质实例。多重材质）{
材料。材料。forEach（函数（childMaterial）{
更新材料（子材料，侧面）；
});
}
}
需要考虑的是创建自定义组件，修改或扩展OBJ模型组件，以防止对可能具有相同问题的每个模型进行查询。 如果这些都不起作用，我相信您的波前obj导出设置可能有问题
编辑2： 关于我的评论，以下是a-Frame中固定obj文件的结果： 为方便起见，您可以在此处找到MTL和OBJ文件：谢谢你的回答，谢恩，这不起作用，所以我已经贴了html@JDorman啊，对不起，我在火车上匆忙回答了这个问题。可能必须在子网格上设置材质侧面的类型。如果您是3JS新手，一开始可能会感到困惑。modelloader将所有网格包装到一个组元素中。该组用于存储模型中的所有网格。我已经更新了上面的示例。THREEjs是A-Frame正在使用的webgl框架。这看起来很棒，我明天会试试！非常感谢！刚试过这个，似乎不起作用。如果这是模型本身的问题，那么在Windows3DBuilder中它看起来肯定也会损坏？我已经建立了一个例子，说明这是否会让事情变得更简单。您导出的obj文件的WebGL格式不正确！在将SketchUp导出为OBJ格式的过程中，必须提供正确的导出选项。我相信
三角剖分所有面