如何加载没有 1:1 尺寸比例的 a-frame 的 a-image

Question

我正在尝试学习 A 型框架，并且一直在尝试使用不同的实体。静态对象可以加载（盒子、圆柱体等），但某些带有 src 属性的东西不起作用。

我查看了在线和文档，但找不到任何明确的帮助。

我能够加载 1:1 大小为 (512X512) 的图像。虽然现在当我尝试使用不同宽度和高度的图像时，它会拒绝该图像。

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>

<body>
 <a-scene>
   <a-assets>
  <img id="boxTexture" src="https://images.unsplash.com/photo-1519575706483-221027bfbb31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
   </a-assets>

   <a-image src="#boxTexture" position="0 1.5 -1" rotation="0 0 0" crossOrigin="anonymous"></a-image>

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

我以为它会向我显示我链接到的图像，就像 1:1 图像一样，但它只显示一个黑色方块。查看控制台，我看到此错误未显示在 1:1 图像上。

THREE.WebGLRenderer：纹理的大小已从 (1000x667) 调整为 (512x512)。小号@three.js:20075

另一件让我印象深刻的事情是这个警告。

three.js：19907 THREE.WebGLState：DOMException：无法在 'WebGLRenderingContext' 上执行 'texImage2D'：可能无法加载受污染的画布。

为什么需要尝试制作它 (512x512)，有没有办法制作不同尺寸的图像。

Answer 1

您看到的消息只是一个警告，应该仍会呈现该体验。理想的纹理尺寸应该是 power of two 但不必是正方形：1024x512、512x2048 是有效尺寸。查看以下使用不同尺寸图像的 A-Frame 示例：

https://aframe.io/aframe/examples/showcase/shopping/

https://github.com/aframevr/aframe/blob/master/examples/showcase/shopping/index.html

还要确保您获取图像的服务器具有 CORS headers setup

如何加载没有 1:1 尺寸比例的 a-frame 的 a-image

How can I load an a-frame's a-image that doesn't have a 1:1 size ratio

augmented-reality

aframe