aframe 纹理始终为黑色

Question

我是 aframe 的新手，我无法将纹理设置为简单的图元。您设置的任何纹理都显示为黑色。我已经创建了一个正常的以防出现问题。我把代码留给你：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="textura_pelota" src="img/pelota.jpg" />
        <img id="textura_pelota_normal" src="img/pelota_normal.jpg" />
      </a-assets>

      <a-sphere
        src="#textura_pelota"
        mtl="#textura_pelota_normal"
        position="0 2 -5"
        rotation="0 45 45"
        radius="1.25"
        scale="1 1 1"
      ></a-sphere>

      <a-sky color="#fff"></a-sky>
    </a-scene>

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </body>
</html>

提前致谢

Answer 1

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>必须放在a-scene标签之前。这确保一切都正确加载。

如果您的纹理未加载，请确保可以通过您提供的路径访问它。

此外，如果您使用 file://（或简单地 double-clicking html 文件）来检查您的页面，纹理和其他媒体可能无法工作（您最好假设它刚刚获胜't).您需要使用某种本地服务器，例如。 node.js - source

这是一个工作示例 - 请注意 aframe 脚本位于 header

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- aframe script should be in header and must be before a-scene -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="textura_pelota" src="https://images.pexels.com/photos/6157052/pexels-photo-6157052.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" crossorigin="anonymous"/>
      </a-assets>

      <a-sphere
        src="#textura_pelota"
        position="0 2 -5"
        rotation="0 45 45"
        radius="1.25"
        scale="1 1 1"
      ></a-sphere>

      <a-sky color="#fff"></a-sky>
    </a-scene>
  </body>
</html>

aframe 纹理始终为黑色

aframe texture is always black

textures

aframe