时间戳

首页 > 解决方案 > 如何加载没有 1:1 尺寸比的 a-frame 的 a-image

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

问题描述

我正在尝试学习 A-frame，并且一直在玩不同的实体。静态对象能够加载（盒子、圆柱体等），但某些具有 src 属性的东西不起作用。

我在网上和文档中查看过，但找不到任何明确的帮助。

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

<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)。s@三.js:20075

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

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

为什么它需要尝试制作（512x512），有没有一种方法可以制作不同尺寸的图像。

标签： augmented-realityaframe

解决方案

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

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

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

还要确保您获取图像的服务器具有CORS 标头设置

推荐阅读