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

Question

这里是 a-frame 的新手，已经完成了教程场景，现在正在设置我的第一个使用 .obj 模型。

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

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

这是 windows 3D 生成器中的样子：

这就是它在我的项目中的样子（背景为粉红色平面以供对比）：

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

Answer 1

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

如果不是这种情况，您应该使用您的场景元素片段更新您的 post。

编辑：

如图所示，我的部分模型渲染不正确。 THREEjs 中的模型加载器读取模型中的所有网格并将它们绑定到分组对象。要解决此问题，您必须将网格 material 的一侧设置为双面。幸运的是，在 A-Frame 中，obj-model 组件会在模型加载成功时发出一个事件，我们在 DOM 元素上为发出的事件 model-loaded 添加一个侦听器并附加一个回调 returns 自定义事件。 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 组件，以防止必须查询可能有相同问题的每个模型。如果 none 有效，我相信您的 wavefront obj 导出设置可能有问题。

编辑 2：

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

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

obj file

mtl file

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

A-Frame .obj model displaying but broken

.obj

3d-model

aframe