|
|
@@ -3,7 +3,7 @@ Description: Как приспособить three.js под дисплеи ра
|
|
|
|
|
|
Это вторая статья в серии статей о three.js.
|
|
|
Первая была [об основах](threejs-fundamentals.html).
|
|
|
-Если вы её еще не читали, советую вам сделать это.
|
|
|
+Если вы еще не читали это, вы можете начать с основ.
|
|
|
|
|
|
Эта статья о том, как заставить ваше приложение three.js
|
|
|
реагировать на любую ситуацию. Создание адаптивной веб-страницы
|
|
|
@@ -63,12 +63,12 @@ HTML body по умолчанию имеет margin в 5 пикселей, по
|
|
|
Слишком высокие или слишком широкие. Откройте пример в его отдельном окне и измените
|
|
|
его размер. Вы увидите, как кубы растягиваются то вширь, то ввысь.
|
|
|
|
|
|
-<img src="resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center">
|
|
|
+<img src="../resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center">
|
|
|
|
|
|
2. Они выглядят пиксельно и размыто.
|
|
|
Растяните окно больше, и вы действительно увидите проблему.
|
|
|
|
|
|
-<img src="resources/images/resize-low-res.png" class="threejs_center">
|
|
|
+<img src="../resources/images/resize-low-res.png" class="threejs_center">
|
|
|
|
|
|
Давайте сначала исправим проблему растяжения. Для этого нам нужно установить соотношение
|
|
|
сторон (aspect) камеры в соответствии с размером холста.
|
|
|
@@ -95,7 +95,7 @@ function render(time) {
|
|
|
Откройте пример в отдельном окне и измените размер окна, и вы увидите, что кубы больше
|
|
|
не растянуты по высоте или ширине. Они остаются правильными, независимо от размера окна.
|
|
|
|
|
|
-<img src="resources/images/resize-correct-aspect.png" width="407" class="threejs_center">
|
|
|
+<img src="../resources/images/resize-correct-aspect.png" width="407" class="threejs_center">
|
|
|
|
|
|
Теперь давайте исправим пиксильность.
|
|
|
|
|
|
@@ -173,7 +173,7 @@ function render(time) {
|
|
|
соответствующим размеру изображения на холсте.
|
|
|
|
|
|
Чтобы сделать так, чтобы CSS позволял обрабатывать изменение размера,
|
|
|
-давайте возьмем наш код и поместим его в [отдельный `.js` файл](../threejs-responsive.js).
|
|
|
+давайте возьмем наш код и поместим его в [отдельный `.js` файл](../../resources/threejs-responsive.js).
|
|
|
Вот еще несколько примеров, где мы позволяем CSS выбирать размер, без написания кода.
|
|
|
|
|
|
Давайте поместим наши кубики в середине абзаца текста.
|
NikitaIT