Создание 3D графики в браузере с использованием библиотеки Three.js
ВВЕДЕНИЕ
Интернет произвел революцию во взаимодействии с миром и стал незаменимым инструментом для рекламы, продвижения по работе и многих других аспектов современной цивилизации. Интернет удовлетворяет практически все потребности – от покупок и ведения бизнеса до доступа к развлекательным и образовательным ресурсам. В результате создание веб-сайтов становится все более популярным.
Хотя основной целью большинства веб-сайтов является предоставление информации, существует бесчисленное множество других способов сделать веб-сайт более привлекательным. Одним из таких методов является включение таких элементов, как звуковое оформление, 3D-модели, анимация и гиперссылки, для создания захватывающего пользовательского опыта.
В области разработки веб-сайтов существуют две основные категории специалистов. Первая – это разработчики интерфейса или FrontEnd разработчики, которые фокусируются на визуальных и интерактивных аспектах веб-сайта. Вторая – разработчики BackEnd, которые отвечают
СОДЕРЖАНИЕ
ВВЕДЕНИЕ3
1 Язык программирования JavaScript4
1.1 История JavaScript4
1.2 История создания первого JavaScript кода5
1.3 Создание первого приложения на JavaScript5
1.4 Использование JavaScript вместе с HTML и CSS6
1.5 Библиотеки и фреймворки JavaScript11
1.5.1 Библиотеки JavaScript11
1.5.2 Фреймворки JavaScript11
1.6 Библиотека Three.js13
1.6.1 История Three.js13
1.6.2 Использование Three.js14
1.6.3 Добавление Three.js на HTML страницу15
2 3D-моделирование17
2.1 История 3D-моделирования17
2.2 Создание первой 3D модели18
2.3 Blender 3D19
2.3.1 Преимущества Blender 3D20
2.3.2 Недостатки Blender 3D21
2.4 Autodesk 3ds Max22
2.5 Autodesk Maya23
2.6 SketchUp25
2.7 Обратная сторона 3D моделирования27
3 Моделирование Солнечной системы в Blender 3D29
3.1 Создание сфер заготовок планет29
3.2 Анимация движения по траектории в Blender 3D33
3.3 Настройка периода прохождения траектории в Blender 3D36
3.3 Работа с нодами в Blender 3D37
3.4 Работа с окружающей средой в Blender 3D38
3.5 Вид планет Солнечной Системы с применёнными нодами39
3.6 Финальная сцена до начала анимации44
4 Создание модели Земли на HTML странице с использованием Three.js48
4.1 Земля, как планета48
4.1.1 Возникновение Солнечной системы48
4.1.2 Возникновение Земли49
4.1.3 Земля как планета51
4.2 Создание 3D модели земли на веб-странице52
4.3 Применения созданной 3D модели Земли на странице HTML56
ЗАКЛЮЧЕНИЕ57
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ58
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
МакГрат, М. JavaScript для начинающих / Майкл МакГрат, пер. с англ. Райтмана М. А. – Москва: Эксмо, 2022г. – 232с.
Вильданов, А.Н. 3D-моделирование на WebGL с помощью библиотеки Three.js: учебное пособие / А.Н.Вильданов. – Уфа: РИЦ БашГУ, 2014г. –114с.
Dirksen, J. Learn Three.js - Third Edition / Jos Dirksen. – Packt Publishing Ltd, 2018г. – 528p.
Inspace [Электронный ресурс] / Земля. Режим доступа: https://in-space.ru/planeta-zemlya/. – Дата доступа: 20.03.2023.
Сурдин, В.Г. Астрономия: Век XXI, 3-е издание. / В.Г.Сурдин. – Фрязино: Век2, 2021г. – 608с
Засов, А.В. Общая астрофизика / А.В.Засов, К.А.Постнов. – Фрязино: Век2, 2021г. – 576с
Флэнаган, Д. JavaScript. Полное руководство, 7-е изд. / Дэвид Флэнаган, пер. с англ. Артеменко Ю.Н. – СПб.: ООО “Диалектика”, 2021г. – 720с
Three.js – JavaScript 3D Library [Электронный ресурс] / JavaScript 3D библиотека. Режим доступа: https://threejs.org. – Дата доступа: 17.03.2023.
McMillan, M. Data Structures and Algorithms with JavaScript / Michael McMillan. – O'Reilly Media, 2014г. – 252с.
Стефанов С. JavaScript. Шаблоны / С.Стефанов, пер. с англ. Киселев А. Н. – СПб.:Символ-Плюс, 2011г. – 272с.
Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 5-е издание. / Р.Никсон. – СПб.:Питер, 2019г. – 816с.
Хавербеке М. Выразительный JavaScript. Современное веб-программирование, 3-е издание / Марейн Хавербеке. – СПб.:Питер, 2019г. – 480с.
// Создание куба
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
Чтобы анимировать куб, создали функцию animate(), которая вызывается рекурсивно с помощью requestAnimationFrame(). В этой функции обновили поворот куба, а затем отрисовали сцену с помощью средства визуализации.
// Визуализация сцены
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Наконец, добавили некоторые базовые функции калькулятора с использованием JavaScript, чтобы позволить пользователю выполнять простые математические операции над двумя числами.
В целом, этот пример (рисунок 1.7) представляет собой базовое введение в создание анимации с Three.js. Имея немного больше знаний и практики, можно создав