如何加载不具有1：1大小比例的a-frame的a-image

问题描述 投票：1回答：1

我正在尝试学习A-frame并且一直在玩不同的实体。静态对象能够加载（box，cylinder等），但是某些带有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）并且有一种方法可以制作出不同大小的图像。

augmented-reality aframe
1个回答
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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.