A-Frame .obj 模型显示但损坏答案

【问题标题】：A-Frame .obj model displaying but brokenA-Frame .obj 模型显示但损坏
【发布时间】：2017-10-09 02:10:41
【问题描述】：

这里是 a-frame 的初学者，已经通过教程场景，现在正在设置我的第一个使用 .obj 模型。

使用远程服务器，感觉这是重要的信息。

我看到有关模型未显示的问题，但我的显示已损坏，我不知道从哪里开始修复它。

这是它在 windows 3D builder 中的外观：

这就是它在我的项目中的外观（在粉红色平面上进行对比）：

这是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>

【问题讨论】：

标签： aframe .obj 3d-model

【解决方案1】：

您可能必须将材质面的类型设置为THREE.DoubleSide。 ~~使用 A-Frame，您应该能够使用 AEntity 上的以下 DOM 属性更改类型：material="side: double"。~~

如果不是这种情况，您应该使用场景元素的 sn-p 更新您的帖子。

编辑：

如图所示，我的模型部分渲染不正确。 THREEjs 中的模型加载器读取模型中的所有网格并将它们绑定到分组对象。要解决此问题，您必须将网格材料的一侧设置为 DoubleSided。幸运的是，在 A-Frame 中，obj-model 组件在模型加载成功时会发出一个事件，我们在 DOM 元素上为发出的事件 model-loaded 添加一个侦听器，并附加一个返回自定义事件的回调。 customevent 发送对模型组的引用。查询 AEntity，我已将 ID modelEl 附加到我的。

<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>

运行上述脚本后，我的模型和一些纹理加载已得到修复。

需要考虑的是深入创建自定义组件并修改或扩展 obj-model 组件，以防止必须查询可能存在相同问题的每个模型。如果这些都不起作用，我相信您的波前 obj 导出设置可能有问题。

编辑2：

关于我的评论，这是 A-Frame 中固定 obj 文件的结果：

为方便起见，您可以在此处找到 MTL 和 OBJ 文件：

obj file

mtl file

【讨论】：

感谢Shane的回答，那没用，所以我把html放了
@JDorman 对不起，我已经在火车上匆匆回答了这个问题。可能您必须在 child 网格上设置材质侧面的类型。如果您是 THREEjs 的新手，起初这可能会让人感到困惑。模型加载器将所有网格包裹到一个组元素中。该组用于存储模型中的所有网格。我已经更新了我上面的例子。 THREEjs 是 A-Frame 使用的 webgl 框架。
这看起来不错，我明天试试！非常感谢！
刚试过这个，好像不行。如果是模型本身的问题，那么它在 Windows 3D Builder 中肯定也会出现问题吗？我已经在Glitch 上设置了一个示例，如果这样可以让事情变得更容易。
您导出的 obj 文件的 WebGL 格式损坏！在将 SketchUp 导出为 OBJ 格式期间，您必须提供正确的导出选项。我相信triangulate all faces 是您所需要的。当您将任何模型导入 Windows 10 的 3D Builder 时，它应该检查错误。它在您的 SketchUp 模型上为我做了，并要求解决任何问题。接受请求后，它也可以在 A-Frame 中正常加载。材料似乎没有任何问题。我更新了我的帖子，因为孩子可以是组和网格的混合体。有一天你可能会遇到这个问题。