CODEWITHSUNDEEP
augmented-realityaframe
user3130697
user3130697

Reputation: 37

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

I am trying to learn A-frame and have been playing around with different entities. The static objects are able to load(box, cylinder, etc) but some things with a src attribute don't work.

I have looked online and in the docs but can't find any clear help.

I was able to get the 1:1 image load that was (512X512) in size. Though now when I try to have an image with varying widths and heights it rejects the image.

<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>

I thought it was going to show me the image I linked to as it did with the 1:1 image but it just showed a black square. Looking at the console I see this error which didn't show on the 1:1 image.

THREE.WebGLRenderer: Texture has been resized from (1000x667) to (512x512). s @ three.js:20075

The other thing that stuck out to me was this warning.

three.js:19907 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

Why does it need to try and make it (512x512) and is there a way I can make is make an image of a different size.

Upvotes: 1

Views: 1457

Answers (1)

Diego Marcos
Diego Marcos

Reputation: 4585

The message you saw is just a warning and the experience should still render. Ideally textures dimensions should be power of two but don't have to be square: 1024x512, 512x2048 are valid sizes. Look at the following A-Frame example that uses images of different sizes:

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

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

Make also sure that the server you fetch the images has CORS headers setup

Upvotes: 1

Related Questions