Блог

Главная - Вопросы по программированию - Как я могу загрузить изображение a-frame, которое не имеет соотношения размеров 1: 1

Как я могу загрузить изображение a-frame, которое не имеет соотношения размеров 1: 1

#augmented-reality #aframe

#дополненная реальность #aframe

Вопрос:

Я пытаюсь изучить A-frame и играю с разными объектами. Статические объекты могут загружаться (коробка, цилиндр и т. Д.), Но некоторые вещи с атрибутом 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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;w=1000amp;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.

ТРИ.WebGLRenderer: размер текстуры изменен с (1000×667) на (512×512). s @ three.js:20075

Другой вещью, которая меня поразила, было это предупреждение.

три.js: 19907 ТРИ.WebGLState: DOMException: не удалось выполнить ‘texImage2D’ в ‘WebGLRenderingContext’: испорченные холсты могут не загружаться.

Почему нужно пытаться сделать это (512×512) и есть ли способ, который я могу сделать, это создать изображение другого размера.

Комментарии:

1. Какой браузер вы используете для этого? Я вижу, что изображение отображается в приведенном выше фрагменте кода. Хотя предупреждение об изменении размера изображения все еще присутствует.

2. Я использую Google Chrome, который после поиска в Google может вызывать проблемы из-за заголовка crossorigin. Я попытался добавить тег crossorigin=»anonymous», но он все равно не сработал. Спасибо, что предложили заглянуть в сам браузер, поскольку Firefox смог загрузить изображения.

3. Я также узнал, что к некоторым URL-адресам нельзя получить доступ за пределами их домена, так что это также было одной из проблем.

Ответ №1:

Сообщение, которое вы видели, — это просто предупреждение, и опыт все равно должен отображаться. В идеале размеры текстур должны быть в степени двойки, но не обязательно должны быть квадратными: допустимые размеры 1024×512, 512×2048. Посмотрите на следующий пример A-Frame, в котором используются изображения разных размеров:

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

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

Также убедитесь, что на сервере, на котором вы получаете изображения, настроены заголовки CORS