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

Question

我是 A-Frame 的新手，已经能够加载一些加载了正确纹理的 gltf 模型。我能够加载的最后一个 gltf 模型只是作为灰色模型出现，纹理没有加载。

现在，每当我尝试添加新的实体或几何基元时，什么也没有发生，元素不会出现在场景检查器中，它们也不会出现在场景中。

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

我尝试将新元素添加为实体以及模型或几何基元。

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

这是我的正文部分

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

我不断收到 "Type Error: Failed to execute 'texImage2D' on 'WebGLRenderingContext': No function was found that matched the signature provided" 以及关于我的纹理不是 2 的幂的警告。我在场景中加载了另一个纹理，它不是 2 的幂，但它仍然可以正常加载。

Answer 1

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

这是调整 gltf

内对象的 material 所需执行的操作

创建自定义组件，并将其名称添加到 gltf-model 实体中。
在组件代码中，为 "model-loaded" 添加一个事件侦听器，因此您对 gltf 的变量引用不会 return 未定义。
在侦听器函数中，获取 object3D('mesh')，它 return 是 gltf 中所有对象的组。
遍历网格，找到（按名称）您要查找的模型，然后为该模型分配一个变量。然后使用该变量访问 material，并用代码修改它。查看显示如何执行所有这些操作的故障。

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

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

A-Frame 3D Model and Texture Loading Issues

textures

3d-model

aframe