Создание 3Д сайта с помощью Three.js

Покажу небольшой пример по созданию 3д сайта с использованием three.js
пример сайта - bruno-simon.com/
three.js - threejs.org/
Исходники github - github.com/Epi...
------------------------------
Таймкоды:
00:00 - Вступление
00:35 - О 3д графике
01:05 - Инициализация проекта(npm, three.js)
01:20 - HTML и CSS
01:55 - Работа с three.js
06:16 - Результат
------------------------------
#three.js #javascript #website

[@Mi-jt6nn]

Давай серию видео про подготовку простой сцены с анимациями, экспортом в gltf 2, и интеграцией в treejs. Будет интересно и невероятно полезно. Спасибо за ролик!

[@epicnull-it2044]

Есть такое в планах.)

[@olegkireev8739]

Большое Спасибо за Вашу работу. Всё просто отлично 👍

[@sgafaroff]

Редко вижу подобные видео где все объясняется понятно и ясно )) Автор кросс!

[@user-nf1td4hh7y]

Большое спасибо! За короткое видео, Быстрый старт и код на гитхабе, все работает, круть) добавила других планет еще

[@Virisound]

Вау!!! Так коротко, и так результативно. Подписался, вдруг канал забурлит жизнью. ИМХО: Лучше было бы, если показали запуск сайта, тогда не было бы вопросов про сервер.

[@Virisound]

Спасибо.

[@TimMshk]

Спасибо за видео! Продолжай....

[@boyarushnik9311]

Автору уважение. Практически никто на русскоязычном ютубе не показывал. Был бы признателен, если поделитесь источниками по данной библиотеке на русском языке(уж оооочень нуждаюсь в этом)

[@epicnull-it2044]

На Ру языке я не встречал документацию. Приходится собирать из различных статей и видео. А лучше зайти в официальную документацию и воспользоваться переводчиком(если не знаешь английского). Так будет куда проще чем пытаться найти перевод.

[@stranger271271]

Вы на столько ленивые тюлени что ждете перевод еще и с видео документации. Ну дальше жди пока кто с мозгами всё это сам изучил и рынок захватил а ты так и останешься не удел. Ага жди уже скоро будет и перевод и видео уроки

[@andreyevanton]

Спасибо, бро!

[@gregdmitriev2784]

Cool! Спасибо) было бы хорошо, если бы код был по-крупнее ( с мобилы читать - такое ), и если бы вторым окном был открыт браузер, чтобы параллельно с написанием кода видеть изменения. А так - лайкос;)

[@epicnull-it2044]

С мобилки смотреть код ну такое..-_- Пока экспериментирую чтобы был виден результат от написанного кода. НЕ знаю как лучше сделать. Найду решение.

[@gregdmitriev2784]

@@epicnull-it2044 в самой IDE просто крупней код сделать и всё

[@user-rt2my9zt9m]

оч круто

[@somebodycrazy]

А можете дать какую-то информацию по поводу взаимодействия js и объектов? Ну типа, поменять цвет или спрайт на объекте при клике на кнопку на сайте. Или допустим какую то механику простую, типа открыть/закрыть крышку у коробки при нажатии кнопки на сайте. Интересно именно взаимодействие js и объектов. Что для этого надо сделать с объектом в том же блендере, как его подготовить для работы с js

[@epicnull-it2044]

Я с библиотекой уже не работаю, но могу предложить варианты как реализовать. Например, открытие сундука при клике. Создаем 3д модель и анимацию открытия, а после проигрываем ее с помощью js. Как то просто) На самом деле это достаточно простая задача. Главное разбить на мелкие подзадачи. У библиотеки очень много примеров и если ты хочешь понять как реализовать какой либо эффект, то лучший вариант это посмотреть примеры на сайте three js. Это очень сильно облегчит разработку. Мало примеров именно нужного тебе функционала и нужно не боятся изучать чужой код и практиковаться в создание подобного функционала самостоятельно.

[@darya_cooks]

Спасибо! Оч круто. А есть обучение?

[@distomm]

зачем на 4:45 используется Array(3).fill().map(() => ), чем это отличается от Array(3).map(() => )? Это что-то дает? На сколько я понимаю это дает только лишний проход по массиву или я что-то путаю?

[@epicnull-it2044]

fill - заполняет массив. Так то да, это лишний перебор массив, но я уже не помню почему его оставил. Давно дело было.) мб без это картинка "дергалась" при старте сцены. Сложно уже вспомнить.

[@stranger271271]

Графоний, атомик нервно курит

[@MirrorTarot]

Здравствуйте у меня вопрос three.js нужен front-end разработчику?!

[@epicnull-it2044]

Нет. Мало фронтендеров которые умеют работать с канвас. Когда будет у тебя 1-2 года опыта коммерческой разработки, то советую изучить возможности фронта(в частности 2д и 3д в канвас)

[@user-dy3dj5hv6v]

скачал с гитхаба, запускаю, но ничего кроме квадратов с текстом нет...

[@epicnull-it2044]

нужно установить библиотеку и запустить сервер. Сейчас проверил репозиторий. - Клонировал - Запустил npm install (чтобы установить библиотеку) - Запустил vs code live server - Проверил. Все работает. Попробуй сделать так же. Должно все работать.)

[@user-dy3dj5hv6v]

@@epicnull-it2044 а если загрузить на хостинг должно сразу заработать?

[@epicnull-it2044]

@@user-dy3dj5hv6v необходимо две вещи для three.js. 1- библиотека 2- сервер Если это у тебя будет, то все сразу заработает.

[@Artboyguitar]

Приветствую! Как с тобой связаться ? Принимаешь заказы на разработку ?

[@epicnull-it2044]

Привет. Можно в вк. vk.com/id145903283

[@user-lm8py5rb4m]

ПК плохо не станет ?)

[@epicnull-it2044]

Нет. Все работает отлично)

[@user-hp2cg6px8c]

@@epicnull-it2044 видно по диким фризам

[@epicnull-it2044]

@@user-hp2cg6px8c это из-за моего компа. Без записи видео работает отлично.

[@dkushka]

В чём причина заброса такого лучшего канала в мире?

[@epicnull-it2044]

Год богатый на события и нет возможности сейчас заниматься ютубом. Или просто мне лень. Не знаю.

[@dkushka]

@@epicnull-it2044 понятно, спасибо за ответ, только удачи по жизни

[@CTILET]

Мне какраз надо сайт с объектом который будет как трансформер собирать когда мы скролим вниз.

[@stranger271271]

зе индекс

[@isy3d]

*и тут выползает нуб, который только моделирует 3д* А как создать лайф сервер?)

[@epicnull-it2044]

Самый простой способ это openserver еще - http-server через npm - или какой либо плагин для vs code Это все способы которыми я пользовался

[@isy3d]

@@epicnull-it2044 понял вас, спасибо.

[@user-eg9de6se8t]

Просто взял код у fireship