В моем первом семестре бакалавриата в области инженерии у меня был предмет под названием «Инженерная графика», который касался 3D-моделирования. У меня так плохо получалось, что я с трудом сдал этот предмет на минимальные баллы. Графика была для меня кошмаром.
Несколько дней назад я услышал о трех js, которые представляют собой библиотеку/API, используемые для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Это JavaScript, который я люблю и могу с ним справиться. Поэтому сегодня я немного расскажу об этом.
Что мы будем делать?
Мы собираемся путешествовать по космосу! Довольно круто, верно?
3…2…1…. GO !
Очевидно, что в этом путешествии мы будем использовать три js-библиотеки. Небольшой пример того, как работают три js:
Для инициализации нам нужно иметь три вещи:
- Сцена — где мы размещаем наши объекты
- Камера — имитирует реальную камеру.
- Рендерер — содержит картинку в вашей камере
Если вам нужно получить хорошее представление об основных концепциях трех js, я бы порекомендовал обратиться к их документации или просмотреть этот замечательный блог.
поэтому давайте инициализируем наше пространство вышеперечисленными вещами:
Далее мы создадим маленькие частицы, которые будут представлять мусор в космосе.
По сути, мы создаем новую геометрию и помещаем в нее все вершины частиц. Затем мы придаем ему форму, цвет и размер через материал. Мы создаем эту систему частиц и добавляем ее в сцену. Цифры в приведенном выше коде не имеют какого-либо конкретного значения. Просто попробуйте и посмотрите, что подходит лучше всего.
У нас есть фоновая сцена. Теперь мы можем работать с астероидами.
Это обзор следующего процесса:
- Создайте текстуру астероида
- Создавайте астероиды
- Вращение астероидов
- Добавьте света в сцену
- Рендеринг сцены
- Переместите камеру, чтобы почувствовать себя в путешествии
Текстура астероида:
Создать камни:
Итак, мы создаем 100 астероидов, каждый с геометрией икосаэдра. Каждый икосаэдр обернут материалом, разработанным в процессе текстурирования астероидов.
Свойство vr будет использоваться для индивидуального вращения каждого астероида.
Вращение астероидов:
Добавьте два точечных источника света:
Визуализация:
Обновите положение камеры:
Демо:
Я надеюсь, что это было интересно и помогло вам добиться чего-то с тремя js.
Ваше здоровье!!
