Question

我正在尝试学习A框架，并且一直在与不同的实体一起玩耍。静态对象能够加载（盒子，圆柱体等），但是某些带有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 @ three.js：20075

另一个困扰我的是这个警告。

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

为什么需要尝试制作它（512x512），而我能做的就是制作不同尺寸的图像。

Answer 1

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

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帧图像

1 个答案: