Первое подключение three.js

Перед тем как начать
В предыдущем уроке я детально рассказала о чем будет курс, обязательно прочитайте, если хотите понимать о чем дальше пойдет речь

Во время первого урока мы подключим three.js к нашему проекту самым простым способом. Нам предстоит создать только HTML файл и написать немного JS кода.

Для начала создадим шаблонный HTML файл:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Первое подключение Three.js</title>
</head>
<body>
    <script src="./script.js"></script>
</body>
</html>

И простой JS файл:

console.log('Hello, Three.js world');

Сейчас откройте index.html в браузере.

🤖 Cкорее всего библиотека будет работать в любом современном браузере, но я советую вам использовать браузеры, которые удобны для разработки, такие как Firefox, Chrome, Yabro.

Дальше вам нужно открыть Инструменты разработчика.

Чтобы сделать это вам нужно нажать правой кнопкой мыши по любому месту на странице и выбрать Inspect или вы можете нажать F12 на Windows и CMD + OPTION + I на MacOS.

После того, как вы открыли инструменты разработчика перейдите на вкладку Консоль.

🤖 Лучше держать консоль открытой, чтобы видеть все появляющиеся предупреждения и ошибки.

Сейчас нам нужно подключить библиотеку three.js. Есть много вариантов как это можно сделать, но сейчас мы сделаем это самым простым способом: загрузим библиотеку с официального сайта и подключим через <script>.

Откройте сайт ThreeJS и загрузите архив с библиотекой.

🤖 Файл достаточно тяжелый, но нам нужен всего один файл от туда.

После того, как вы разархивируете загруженный файл, откройте папку build/ и скопируйте файл three.min.js в папку с вашим проектом.

Сейчас мы можем уже подключить three.js в конце тега <body> в файле index.html.

<script src="./three.min.js"></script>
<script src="./script.js"></script>

Убедитесь, что вы подключаете three.min.js до того, как подключаете script.js. Иначе мы не сможем использовать библиотеку three.js в файле script.js.

Теперь внутри файла script.js есть доступ к переменной THREE. Если вы попробуете вывести эту переменную в консоль, то обнаружите, что внутри нее хранится очень много всего.

console.log(THREE);

Переменная THREE хранит в себе большинство классов и свойств, которые необходимы для создания проекта на three.js.

Чтобы использовать эти классы, вам нужно создать соответствующие объекты. Например, чтобы создать объект сцены вам нужно написать

const scene =newTHREE.Scene();

Мы все это разберем детальней в дальнейших уроках.

Предыдущий урок

Следующий урок

#threejs #javascript #3d