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

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

1 голос
/ 21 апреля 2019

Я пытаюсь выучить 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.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: Не удалось выполнить 'texImage2D' для 'WebGLRenderingContext': испорченные холсты могут не загружаться.

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

1 Ответ

1 голос
/ 22 апреля 2019

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

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

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

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

...