TresJS - Перспективная и ортографическая камеры
Нейроперевод TresJS - Перспективная и ортографическая камеры Описание Добро пожаловать на урок по TresJS, библиотеке, которая позволяет создавать потрясающие 3D-сцены в Vue.js! В этом видео мы рассмотрим различия между перспективной и ортографической камерами, а также способы изменения их параметров для достижения желаемого внешнего вида вашей сцены. Сначала мы объясним основные различия между двумя типами камер. Перспективная камера имитирует то, как объекты выглядят в реальном мире: удаленные объекты кажутся меньше. Ортографическая камера, напротив, отображает объекты одинакового размера независимо от расстояния до камеры. Мы покажем вам, как создать оба типа камер в TresJS и наглядно продемонстрируем их различия. Затем мы подробно рассмотрим параметры каждой камеры. Для перспективной камеры мы покажем, как изменять угол обзора (field of view), соотношение сторон (aspect ratio) и плоскости отсечения (near/far clipping planes), чтобы точно настроить перспективу камеры. Для ортографической камеры мы объясним, как задать размер и плоскости отсечения для получения нужного эффекта. В качестве небольшого бонуса мы также покажем, как анимировать камеру с помощью GSAP. Подписывайтесь, ставьте лайк 👍 и оставляйте свои комментарии ниже. Ресурсы: Документация: https://tresjs.org/ Демонстрация сравнения перспективной и ортографической камер: https://playground.tresjs.org/experiments/cameras Шаблон проекта: https://github.com/Tresjs/starter Перспективная камера в ThreeJS: https://threejs.org/docs/index.html?q=perspe #api/en/cameras/PerspectiveCamera Ортографическая камера в ThreeJS: https://threejs.org/docs/index.html?q=ortho #api/en/cameras/OrthographicCamera Тайминги: 00:00 - Вступление 00:28 - Перспективная против ортографической камеры 01:00 - Перспективная камера 02:06 - Ближняя и дальняя плоскости отсечения (Near and Far) 02:49 - Настройка локального проекта 04:44 - Добавление перспективной камеры 08:32 - Позиция камеры и функция lookAt (смотреть на точку) 12:05 - Настройка камеры с использованием useTweakpane 13:03 - Ортографическая камера 14:51 - Компонент TresOrthographicCamera 19:46 - Анимация камеры с помощью GSAP 23:32 - Следующие шаги
Нейроперевод TresJS - Перспективная и ортографическая камеры Описание Добро пожаловать на урок по TresJS, библиотеке, которая позволяет создавать потрясающие 3D-сцены в Vue.js! В этом видео мы рассмотрим различия между перспективной и ортографической камерами, а также способы изменения их параметров для достижения желаемого внешнего вида вашей сцены. Сначала мы объясним основные различия между двумя типами камер. Перспективная камера имитирует то, как объекты выглядят в реальном мире: удаленные объекты кажутся меньше. Ортографическая камера, напротив, отображает объекты одинакового размера независимо от расстояния до камеры. Мы покажем вам, как создать оба типа камер в TresJS и наглядно продемонстрируем их различия. Затем мы подробно рассмотрим параметры каждой камеры. Для перспективной камеры мы покажем, как изменять угол обзора (field of view), соотношение сторон (aspect ratio) и плоскости отсечения (near/far clipping planes), чтобы точно настроить перспективу камеры. Для ортографической камеры мы объясним, как задать размер и плоскости отсечения для получения нужного эффекта. В качестве небольшого бонуса мы также покажем, как анимировать камеру с помощью GSAP. Подписывайтесь, ставьте лайк 👍 и оставляйте свои комментарии ниже. Ресурсы: Документация: https://tresjs.org/ Демонстрация сравнения перспективной и ортографической камер: https://playground.tresjs.org/experiments/cameras Шаблон проекта: https://github.com/Tresjs/starter Перспективная камера в ThreeJS: https://threejs.org/docs/index.html?q=perspe #api/en/cameras/PerspectiveCamera Ортографическая камера в ThreeJS: https://threejs.org/docs/index.html?q=ortho #api/en/cameras/OrthographicCamera Тайминги: 00:00 - Вступление 00:28 - Перспективная против ортографической камеры 01:00 - Перспективная камера 02:06 - Ближняя и дальняя плоскости отсечения (Near and Far) 02:49 - Настройка локального проекта 04:44 - Добавление перспективной камеры 08:32 - Позиция камеры и функция lookAt (смотреть на точку) 12:05 - Настройка камеры с использованием useTweakpane 13:03 - Ортографическая камера 14:51 - Компонент TresOrthographicCamera 19:46 - Анимация камеры с помощью GSAP 23:32 - Следующие шаги