Первое подключение three.js
Во время первого урока мы подключим three.js к нашему проекту самым простым способом. Нам предстоит создать только HTML файл и написать немного JS кода.
Основные файлы
Для начала создадим шаблонный HTML файл:
И простой JS файл:
Сейчас откройте index.html в браузере.
Дальше вам нужно открыть Инструменты разработчика.
Чтобы сделать это вам нужно нажать правой кнопкой мыши по любому месту на странице и выбрать Inspect или вы можете нажать F12 на Windows и CMD + OPTION + I на MacOS.
После того, как вы открыли инструменты разработчика перейдите на вкладку Консоль.
Как подключить three.js
Сейчас нам нужно подключить библиотеку three.js. Есть много вариантов как это можно сделать, но сейчас мы сделаем это самым простым способом: загрузим библиотеку с официального сайта и подключим через <script>.
Откройте сайт ThreeJS и загрузите архив с библиотекой.
После того, как вы разархивируете загруженный файл, откройте папку build/ и скопируйте файл three.min.js в папку с вашим проектом.
Сейчас мы можем уже подключить three.js в конце тега <body> в файле index.html.
Как использовать three.js
Теперь внутри файла script.js есть доступ к переменной THREE. Если вы попробуете вывести эту переменную в консоль, то обнаружите, что внутри нее хранится очень много всего.
Переменная THREE хранит в себе большинство классов и свойств, которые необходимы для создания проекта на three.js.
Чтобы использовать эти классы, вам нужно создать соответствующие объекты. Например, чтобы создать объект сцены вам нужно написать
Мы все это разберем детальней в дальнейших уроках.
Капец полезный урок! Ждём следующие:
Первое подключение JQuery
Первое подключение React
Первое подключение чего угодно