A-Frame 3D 模型和纹理加载问题答案

【问题标题】：A-Frame 3D Model and Texture Loading IssuesA-Frame 3D 模型和纹理加载问题
【发布时间】：2019-12-20 10:36:18
【问题描述】：

我是 A-Frame 的新手，能够加载一些已加载正确纹理的 gltf 模型。我能够加载的最后一个 gltf 模型以灰色模型的形式出现，并且没有加载纹理。

现在，每当我尝试添加新的 a-entity 或几何图元时，什么都不会发生，并且元素不会出现在场景检查器中，它们也不会出现在场景中。

我正在使用 A-Frame 0.9，正在运行本地服务器，并正在使用 Google Chrome 浏览页面。我很困惑为什么我添加的元素现在不会显示出来，而我现在添加的元素与以前没有什么不同。

我尝试将新元素添加为 a-entities 以及模型或几何图元。

对于纹理，我尝试进入场景检查器并确保已为该模型加载了纹理，并且确实已加载。

这是我的身体部分

    <body>
<a-scene>
  <a-assets>
    <img id="sky" src="sky.jpg">
    <img id="courtTexture" src="NBACourt.jpg">
    <img id="scoreboardTexture" src="scoreboardTextureMap.png">
    <!-- <a-asset-itm id="mockCourtModel-obj" src="mockCourtforWebVR.obj"></a-asset-itm>
    <a-asset-itm id="mockCourtModel-mtl" src="mockCourtforWebVR.mtl"></a-asset-itm> -->
    <a-asset-item id="mockCourtglbmodel" src="mockCourt.glb">
    <a-asset-item id="scoreboardglbmodel" src="scoreboard.glb">
    <!-- <a-asset-item id="bleacher1glbmodel" src="bleacher.glb"> -->
    <a-asset-item id="basketball" src="basketballTexture.jpg">
  </a-assets>

  <a-entity id="sky" geometry="primitive: sphere; radius: 3000" material="shader: flat; src: #sky; side: back"></a-entity>

  <a-sphere position="0 0 0" radius=".05962739943" color="#CF5300"></a-sphere>

  <!-- Lighting -->
  <a-entity light="type: ambient; color: #BBB"></a-entity>
  <a-entity light="type: directional; color: #FFF; intensity: 1.5" position="-0.5 1 1"></a-entity>

  <a-entity gltf-model="#mockCourtglbmodel" material="src: #courtTexture" scale=".01 .01 .01"></a-entity>
  <a-entity gltf-model="#scoreboardglbmodel" material="src: #scoreboardTexture" scale=".01 .01 .01" position="0 4.091 0"><a-entity>
    <!-- Having a weird issue where the texture mapping isn't mapping or adding to the scoreboard correctly. -->

    <!-- This bleacher model will not load -->
  <!-- <a-entity gltf-model="bleacher1glbmodel" material="color: #868b94" scale=".01 .01 .01"></a-entity> -->

  <a-entity id="ball" geometry="primitive: sphere; radius: .05962739943" material="shader: flat; src: #basketball"></a-entity>

我不断收到“类型错误：无法在 'WebGLRenderingContext' 上执行 'texImage2D'：找不到与提供的签名匹配的函数”，并且还警告我的纹理不是 2 的幂。我有另一个纹理加载在不是 2 的幂的场景中，它仍然可以正常加载。

【问题讨论】：

标签： textures aframe 3d-model

【解决方案1】：

处理 gltf 的材料时，您必须在 THREEjs 级别使用它们。 gltf-model 是一个包含许多对象的容器，包括组、模型、相机等。它本身就是场景图，因此您不能像使用 aframe 元素 a-entity 那样简单地为其分配材质。

这是你需要做的调整gltf内对象的材质

创建一个自定义组件，并将其名称添加到 gltf-model 实体。
在组件代码中，为“模型加载”添加一个事件侦听器，这样您对 gltf 的变量引用将不会返回未定义。
在监听函数内部，获取object3D('mesh')，它返回gltf中所有对象的组。
遍历网格，找到（按名称）您要查找的模型，并为该模型分配一个变量。然后使用该变量访问材料，并使用代码对其进行修改。看看这个故障，它显示了如何做到这一切。

https://glitch.com/~gltf-texturedemo

【讨论】：

您认为这是我添加的其他组件也不会加载的原因吗？即使是一个简单的球体也不会出现
如果您有一个抛出错误的 gltf，这将破坏程序并阻止其他模型加载。删除坏的 gltf 元素并查看程序是否再次运行。如果是这样，您就知道 gltf 有问题。在解决问题时，最好将场景减少到最低限度。开始一个新项目，然后加载坏的 gltf。回到 gltf（您的 3d 应用程序）的源头，并尝试发现您是否有损坏的几何图形或纹理。一旦你有了正确加载的干净 gltf，你就可以使用我上面概述的工具在 aframe 中修改你的材料。
谢谢！在这些工具中，有没有办法旋转纹理等？我在 Maya 中为模型创建了 UV，但是一旦我将模型放入框架中，纹理就不会跟随这些 UV
是的。导入gltf的uvs会通过。确保它们是 Maya 中的贴图通道 0。您可以再次通过访问 traverse 函数中的 THREEjs 材质来调整 aframe 中的 uv。要调整纹理上的 UV，可以像这样暴露纹理 node.material.texture.rotation = x 请参阅 THREEjs 文档以获取属性名称列表。 threejs.org/docs/index.html#api/en/textures/Texture