Traveler Logs

с 2022

Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌

2 подписчика

0 подписок

Traveler Logs

27.09.2022

Введение в курс по three.js

Привет ✌

Это не совсем настоящий урок, а скорее небольшая презентация того про что будет этот курс.

Traveler Logs

27.09.2022

Трансформация объектов (часть 1)

Перед тем как начать
В предыдущем уроке мы настроили полноценную сборку проекта с three.js при помощи webpack, если вы это пропустили, то советую вернуться!

Traveler Logs

27.09.2022

Настраиваем полноценную сборку

Перед тем как начать
В предыдущем уроке мы создали нашу первую сцену при помощи самого простого подключения three.js, если вы это пропустили, то советую вернуться!

То, как мы с вам…

Traveler Logs

27.09.2022

Создание простой сцены с three.js

Перед тем как начать
В предыдущем уроке мы с вами разобрали как самым простым способом подключить three.js к нашему проекту, если вы пропустили, то обязательно прочитайте!

Traveler Logs

27.09.2022

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

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

Во время первого урока мы подключим three.j…

\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Файл src/script.js выглядит примерно вот так:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"import * as THREE from 'three';\n\n// Подключим файл со стилями\nimport './style.css';\n\n// Сцена\nconst scene = new THREE.Scene();\n\n// Объект\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst material = new THREE.MeshBasicMaterial({ color: 'purple', wireframe: true });\nconst mesh = new THREE.Mesh(geometry, material);\nscene.add(mesh);\n\n// Объект с размерами\nconst sizes = {\n width: 600,\n height: 600\n};\n\n// Камера\nconst camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);\ncamera.position.z = 3;\nscene.add(camera);\n\n// Отрисовщик\nconst renderer = new THREE.WebGLRenderer({\n canvas: document.querySelector('canvas.canvas-js'),\n alpha: true,\n});\nrenderer.setSize(sizes.width, sizes.height);\nrenderer.render(scene, camera);","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Так же давайте создадим пустой файл со стилями:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"touch src/style.css","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

И сейчас, запустив в консоли скрипт npm run dev у вас откроется браузер с нашим кубиком, поздравляю!

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

Я стараюсь создать комьюнити людей, которым интересна веб-разработка, 3d и путешествия, поэтому зову вас присоединиться к моему блогу в telegram!

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

#threejs #javascript #3d

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":1,"reposts":0,"views":41,"hits":529,"reads":null,"online":0},"dateFavorite":0,"hitsCount":529,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1270438/509202-nastraivaem-polnocennuyu-sborku","author":{"id":1270438,"name":"Traveler Logs","nickname":null,"description":"Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌","uri":"","avatar":{"type":"image","data":{"uuid":"0ca6b7e6-8c48-59d2-9fe1-c76a7229c5f1","width":640,"height":640,"size":61268,"type":"jpg","color":"080509","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 13 августа 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5532011,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5532011"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4177708,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4177708"}],"lastModificationDate":1764941996,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1270438,"name":"Traveler Logs","nickname":null,"description":"Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌","uri":"","avatar":{"type":"image","data":{"uuid":"0ca6b7e6-8c48-59d2-9fe1-c76a7229c5f1","width":640,"height":640,"size":61268,"type":"jpg","color":"080509","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 13 августа 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5532011,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5532011"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4177708,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4177708"}],"lastModificationDate":1764941996,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":509162,"customUri":null,"subsiteId":1270438,"title":"Создание простой сцены с three.js","date":1664264979,"dateModified":1664264979,"blocks":[{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"

Перед тем как начать

В предыдущем уроке мы с вами разобрали как самым простым способом подключить three.js к нашему проекту, если вы пропустили, то обязательно прочитайте!

","subline1":""}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"c9d1b212-fdb8-5935-a8e2-34ebdbe9a1c0","width":1280,"height":720,"size":156580,"type":"png","color":"161e27","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

Сейчас пришло время создать нашу первую сцену и вывести что-то на экран.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того чтобы это сделать нам нужно 4 элемента:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Сцена","Камера","Отрисовщик","Объекты"],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Сцена"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сцена - что-то вроде контейнера. Мы будем складывать в этот контейнер объекты, модели, свет и т.д. После чего мы можем отрендерить сцену и вывести ее содержимое на экран.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Сцена\nconst scene =newTHREE.Scene();","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Камера"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Камеру не видно на итоговом изображении. Это скорее что-то вроде абстрактного взгляда на сцену. В момент, когда мы будем рендерить сцену все будет видно от лица камеры.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чаще всего мы будем использовать одну камеру, но возможна работа и с несколькими камерами (в таком случае можно делать переключения между ними).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Существуют различные типы камер, но подробнее о каждом типе мы поговорим в дальнейших уроках. Сейчас мы воспользуемся перспективной камерой (она воспринимает сцену так же, как и человеческий глаз. Чем дальше объект - тем он меньше, чем ближе - тем больше).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того, чтобы создать камеру воспользуемся классом PerspectiveCamera.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы создать объект данного класса нам нужно задать два параметра.

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Поле зрения","Соотношение сторон"],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Поле зрения"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Поле зрения отвечает за то, какой у камеры будет угол обзора. Если вы зададите слишком большой угол обзора, то камера будет видеть во всех направлениях, но при этом будет значительное искажение изображения. Если задать маленький угол, то изображение будет выглядеть приближенным.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"f3dd0926-c799-5705-9056-3c8cc9f0e787","width":1306,"height":834,"size":33573,"type":"png","color":"c8c7c7","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Соотношение сторон"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чаще всего соотношение сторон - это ширина canvas, на который идет отображение деленная на высоту этого canvas. Сейчас мы не будем задавать какое-то особое соотношение, но позднее это нам пригодится.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Так же важно не забыть поместить камеру на созданную нами сцену.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Размеры\nconst sizes = {\n width: 600,\n height: 600\n};\n\n// Камера\nconst camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);\n\n// Добавление камеры на сцену\nscene.add(camera);","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Отрисовщик"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Задача отрисовщика - отрендерить созданную сцену на экране.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Говоря просто - мы просим отрисовщика отобразить на canvas созданную нами сцену, на которую вы смотрим со стороны созданной камеры.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Можно создать canvas вручную или попросить отрисовщика создать его и поместить на страницу.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Пока мы сами руками создадим canvas на странице и передадим его отрисовщику.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Давайте создадим canvas в нашем index.html (поместить его нужно до загрузки скриптов) и добавим ему class.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"

","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того, чтобы создать отрисовщика нам нужно воспользоваться классом WebGLRenderer. В качестве параметров этому классу передается объект, который может содержать разные настройки. Сейчас нам надо передать ему свойство canvas, значением которого будет <canvas>, который мы только что добавили на страницу.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Создадим переменную, которая будет хранить элемент из DOM дерева\nconst canvas = document.querySelector('canvas.canvas-js');\n\n// Создадим объект отрисовщика\nconst renderer = new THREE.WebGLRenderer({\n canvas: canvas,\n alpha: true,\n});\n\n// Изменим размер нашего отрисовщика (а с ним и размер canvas)\nrenderer.setSize(sizes.width, sizes.height);","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вы сейчас перезагрузите страницу, то должны получить черный квадрат со стороной 600px.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Объекты"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Объектами, которые можно отрисовать, могут быть множество вещей. Например, это может быть какая-то примитивная геометрия, импортированные 3D модели, свет и т.д.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В данном уроке мы с вами создадим простой куб.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того, чтобы создать куб нам нужно создать объект классы Mesh.

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

Mesh - это комбинация геометрии (формы объекта) и материала (то как выглядит).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того чтобы создать геометрию мы используем класс BoxGeometry и передаем в качестве первых трех параметров размер параллелепипеда, который хотим создать.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Геометрия\nconst geometry = new THREE.BoxGeometry(1, 1, 1);","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того чтобы создать материал воспользуемся классом MeshBasicMaterial и в качестве параметра передадим объект с различными опциями. Сейчас передадим в этот объект цвет и то, что данный куб нужно отрисовать в виде ребер.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Есть разные способы чтобы задать цвет.

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["С помощью шестнацетеричного числа (0xff0000)","При помощи строки, которая хранит это число ('0xff0000')","С использованием названия цвета ('red')","Используя класс цвета Color (подробнее об этом позже)"],"type":"UL"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Материал\nconst material = new THREE.MeshBasicMaterial({ color: 'purple', wireframe: true });","lang":""}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

🤖 Существует много различных типов форм и материалов (о них можно прочитать в документации, но и в дальнейших уроках мы тоже будем или пользоваться).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для создания итогового объекта нужно воспользоваться классом Mesh и передать геометрию и материал в качестве параметров. А потом уже можно добавить его на сцену.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Объект\nconst mesh = new THREE.Mesh(geometry, material);\n\n// Добавим на сцену\nscene.add(mesh);","lang":""}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вы не добавите объект на сцену, то и увидеть его вы не сможете!

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Первый рендер"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Вот и пришло время сделать наш первый рендер! Для этого нам нужно вызвать метод render() у нашего отрисовщика, а в качестве параметров передадим созданную нами сцену и камеру.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"renderer.render(scene, camera);","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В браузере и получаем:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"578065cd-5cc2-5e71-b15b-66a504f7da0a","width":1212,"height":1216,"size":2927,"type":"png","color":"e4d4e4","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Так погодите... Снова что-то не то?

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Все дело в том, что мы не задали позицию ни для объектов на сцене, ни для камеры. Сейчас все находится в дефолтной позиции, а именно в центре сцены, а по умолчанию мы не можем видеть объекты изнутри.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для того чтобы что-то увидеть нам нужно переместить объекты. Для этого у нас есть доступ к таким свойствам объекта как:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["position","rotation","scale","quaternion"],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сейчас мы воспользуемся свойством position для того чтобы переместить камеру немного назад.

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

🤖 Свойство position - это объект, у которого есть три поля x, y и z. По умолчанию в three.js за приближение / отдаление отвечает ось z.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"// Созданный нами объект камеры\nconst camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);\n\n// Перемещение камеры\ncamera.position.z = 3;\n\n// Добавление камеры на сцену\nscene.add(camera);","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В браузере и получаем:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"3874443a-3bb1-5171-ac07-1a0ae7f0d633","width":1212,"height":844,"size":4586,"type":"png","color":"dec8de","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Вот и все, сейчас вы можете поздравить себя с первой созданной сценой!

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В продолжении статей с курсом по three.js мы с вами детально разберем свойства position, rotation и scale, научимся их изменять и анимировать.

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

#threejs #javascript #3d

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":0,"reposts":0,"views":40,"hits":1804,"reads":null,"online":0},"dateFavorite":0,"hitsCount":1804,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1270438/509162-sozdanie-prostoi-sceny-s-threejs","author":{"id":1270438,"name":"Traveler Logs","nickname":null,"description":"Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌","uri":"","avatar":{"type":"image","data":{"uuid":"0ca6b7e6-8c48-59d2-9fe1-c76a7229c5f1","width":640,"height":640,"size":61268,"type":"jpg","color":"080509","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 13 августа 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5532011,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5532011"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4177708,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4177708"}],"lastModificationDate":1764941996,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1270438,"name":"Traveler Logs","nickname":null,"description":"Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌","uri":"","avatar":{"type":"image","data":{"uuid":"0ca6b7e6-8c48-59d2-9fe1-c76a7229c5f1","width":640,"height":640,"size":61268,"type":"jpg","color":"080509","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 13 августа 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5532011,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5532011"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4177708,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4177708"}],"lastModificationDate":1764941996,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":509124,"customUri":null,"subsiteId":1270438,"title":"Первое подключение three.js","date":1664261222,"dateModified":1664261222,"blocks":[{"type":"quote","cover":false,"hidden":false,"anchor":"","data":{"text":"

Перед тем как начать

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

","subline1":""}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":true,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"48aab418-52d3-5d77-8cfd-0caa53da1c1c","width":1280,"height":720,"size":157978,"type":"png","color":"161e27","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Основные файлы"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n\n\n \n \n Первое подключение Three.js\n\n\n \n\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"console.log('Hello, Three.js world');","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Как подключить three.js"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n","lang":""}},{"type":"incut","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Как использовать three.js"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"console.log(THREE);","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"const scene =newTHREE.Scene();","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"delimiter","cover":false,"hidden":false,"anchor":"","data":{"type":"default"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

#threejs #javascript #3d

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":1,"favorites":0,"reposts":0,"views":33,"hits":3632,"reads":null,"online":0},"dateFavorite":0,"hitsCount":3632,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1270438/509124-pervoe-podklyuchenie-threejs","author":{"id":1270438,"name":"Traveler Logs","nickname":null,"description":"Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌","uri":"","avatar":{"type":"image","data":{"uuid":"0ca6b7e6-8c48-59d2-9fe1-c76a7229c5f1","width":640,"height":640,"size":61268,"type":"jpg","color":"080509","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 13 августа 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5532011,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5532011"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4177708,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4177708"}],"lastModificationDate":1764941996,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1270438,"name":"Traveler Logs","nickname":null,"description":"Веб-разработка, 3d моделирование и путешествия. По всем вопросам и предложениям - жду в директ тг @guvictory ✌","uri":"","avatar":{"type":"image","data":{"uuid":"0ca6b7e6-8c48-59d2-9fe1-c76a7229c5f1","width":640,"height":640,"size":61268,"type":"jpg","color":"080509","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 13 августа 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5532011,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5532011"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4177708,"userId":1270438,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4177708"}],"lastModificationDate":1764941996,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":1}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"cursor":"PuR2GsZKFTvhhG9RDI/g7NrVS6IzQAa09I6wtbz/zlbeaPDONLWow09d42hGl24=","isAnonymized":true}};