![Web Dev Sandbox](/img/default-banner.jpg)
- 28
- 89 079
Web Dev Sandbox
เข้าร่วมเมื่อ 6 ธ.ค. 2022
Привет 👋
Добро пожаловать на канал о веб-разработке, практических проектах и работе на удаленке. Канал создан для тех, кто хочет развиваться в области веб-технологий и искать новые возможности.
Я буду делиться с вами своим опытом, помогаем вам совершенствовать навыки, узнавать новое и находить интересные проекты. А также расскажу о своих путешествиях и как они влияют на работу разработчика. 🌍
Добро пожаловать на канал о веб-разработке, практических проектах и работе на удаленке. Канал создан для тех, кто хочет развиваться в области веб-технологий и искать новые возможности.
Я буду делиться с вами своим опытом, помогаем вам совершенствовать навыки, узнавать новое и находить интересные проекты. А также расскажу о своих путешествиях и как они влияют на работу разработчика. 🌍
Какие бывают текстуры и как их загружать в three.js
В этом видео разбираем, что такое текстуры, какие они бывают типов, а так же как их правильно загружать в ваш three.js проект.
⭐️ Канал в Дзен: dzen.ru/webdevsandbox
100 ❤️ и я пойму, что вам хочется больше подобных видео
••••••••••••••
0:00 Введение
0:51 Текстуры цвета
1:03 Альфа текстуры
1:12 Текстуры высоты
1:29 Текстуры нормалей
1:44 Ambient текстуры
1:57 Текстуры метализации
2:12 Текстуры шероховатости
3:20 Загрузка текстуры при помощи нативного JavaScript
6:30 Загрузка текстуры при помощи TextureLoader
7:32 Контролируем загрузку текстур при помощи LoaderManaget
8:40 Завершение
••••••••••••••
Ресурсы, про которые я говорила в ролике:
- Ссылка на загрузку текстур: 3dtextures.me/2019/04/16/door-wood-001/
- Код на начало проекта: github.com/GuVictory/threejs-course/tree/main/threejs_main
••••••••••••••
✈️ Telegram канал проекта: t.me/WebDevSandbox
👥 Чат в telegram: t.me/+_iXu3UIKOA1lODI6
⭐️ Канал в Дзен: dzen.ru/webdevsandbox
☕️ Угостить меня кофе: pay.cloudtips.ru/p/4013864b
Спасибо за внимание ♥︎
⭐️ Канал в Дзен: dzen.ru/webdevsandbox
100 ❤️ и я пойму, что вам хочется больше подобных видео
••••••••••••••
0:00 Введение
0:51 Текстуры цвета
1:03 Альфа текстуры
1:12 Текстуры высоты
1:29 Текстуры нормалей
1:44 Ambient текстуры
1:57 Текстуры метализации
2:12 Текстуры шероховатости
3:20 Загрузка текстуры при помощи нативного JavaScript
6:30 Загрузка текстуры при помощи TextureLoader
7:32 Контролируем загрузку текстур при помощи LoaderManaget
8:40 Завершение
••••••••••••••
Ресурсы, про которые я говорила в ролике:
- Ссылка на загрузку текстур: 3dtextures.me/2019/04/16/door-wood-001/
- Код на начало проекта: github.com/GuVictory/threejs-course/tree/main/threejs_main
••••••••••••••
✈️ Telegram канал проекта: t.me/WebDevSandbox
👥 Чат в telegram: t.me/+_iXu3UIKOA1lODI6
⭐️ Канал в Дзен: dzen.ru/webdevsandbox
☕️ Угостить меня кофе: pay.cloudtips.ru/p/4013864b
Спасибо за внимание ♥︎
มุมมอง: 2 530
วีดีโอ
Обучение Three.js, за 6 шагов подготовки
มุมมอง 2.6K8 หลายเดือนก่อน
Изучение three.js задача не из простых, поэтому я хочу помочь вам в освоении данной библиотеки, подсказав план обучения, которого я придерживалась, когда сама делала первые шаги к освоению three.js. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Вступление 0:49 Базовая теория 1:16 Основные техники 1:32 Повышение уровня 1:52 Шейдеры 2:12 Интеграция с React 2:40 Three...
Загружаем и анимируем 3D модели в Three.js за 12 минут
มุมมอง 7K9 หลายเดือนก่อน
Перечитали кучу форумов, а загрузить 3D модель в приложение three.js не получается? Тогда это видео точно для вас. Разберемся как загрузить простые модели, составные модели заставим наши модели оживать, используя встроенные анимации. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Введение 0:26 Создаем проект 1:24 Добавляем исходники моделей 2:08 Подготовка сцены 4:2...
Инструменты отладки Three.js приложений
มุมมอง 1.6K9 หลายเดือนก่อน
В этом видео я расскажу как сделать процесс разработки на Three.js более удобным и приятным. Мы научимся: - Добавлять счетчик FPS с помощью библиотеки stats.js - Создавать GUI с настройками используя dat.gui - Добавлять слайдеры, чекбоксы, цвета и другие элементы управления - Группировать настройки в папки - Делать настройки свойств объектов и материалов После просмотра ты будешь четко представ...
Практикуем Three.js, интерактивная сетка из геометрий
มุมมอง 2.3K9 หลายเดือนก่อน
В новом практическом уроке по Three.js мы создадим интерактивную сетку из разных геометрий. Узнаем как: - Создавать сетку объектов с помощью циклов - Использовать Raycaster для обнаружения кликов - Менять цвет и добавлять вращение для активного объекта - Использовать Tween для плавных анимаций - Возвращать неактивные объекты на исходные позиции Полезный урок, чтобы закрепить навыки работы с объ...
Все основные геометрии в Three.js за 20 минут
มุมมอง 2.1K10 หลายเดือนก่อน
В этом видео мы подробно разберем все основные геометрии, которые есть в библиотеке Three.js - BoxGeometry, PlaneGeometry, CircleGeometry, ConeGeometry, CylinderGeometry и многие другие. Узнаем: - Какие бывают геометрии в Three.js - Как создавать базовые фигуры вроде куба, цилиндра, конуса, плоскости - Как строить сферы, торы, додекаэдры и другие многогранники - Зачем нужен класс BufferGeometry...
Three.js, как сделать резиновый canvas
มุมมอง 2.1K10 หลายเดือนก่อน
В этом видео я покажу как сделать canvas в Three.js, который будет подстраиваться под размер экрана пользователя. Узнаешь как настроить размер холста, соотношение пикселей и полноэкранный режим. В видео разберем: - Как задать размер canvas из JavaScript - Как подписаться на событие resize окна - Как правильно обновлять камеру и рендер при изменении размера - Как ограничить соотношение пикселей ...
Как защититься от XSS атак на основе DOM
มุมมอง 51610 หลายเดือนก่อน
В этом видео разбираем, что такое XSS атаки на основе DOM и как от них защититься. Узнаем, как работают фрагменты URI и почему они опасны. Рассмотрим практики защиты приложения - экранирование динамического контента и использование библиотеки node-esapi. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Введение 0:35 Что такое XSS на основе DOM 2:24 Способы защиты 3:23...
Three.js, элементы управления
มุมมอง 2.4K10 หลายเดือนก่อน
В этом видео мы разберем как добавить элементы управления в Three.js, чтобы пользователь мог взаимодействовать с 3D сценой. Рассмотрим как создавать свои собственные элементы управления и как использовать встроенные классы, такие как OrbitControls. Также поговорим о демпфировании и настройках. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Вступление 0:35 Нативная р...
Three.js, как устроены различные камеры
มุมมอง 1.9K10 หลายเดือนก่อน
Камеры играют важную роль в создании 3D-сцен. Когда дело доходит до работы с Three.js, мощной библиотекой JavaScript для 3D-рендеринга, камеры необходимы для управления перспективой и видом сцены. Именно поэтому в данном видео мы разберем какие типы камер существуют и как с ними работать! 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Введение 0:42 Класс Camera и Ar...
Практикуем Three.js, анимация и группировка
มุมมอง 2.9K11 หลายเดือนก่อน
Изучать программирование и практиковаться, глупая история, поэтому в этом видео мы с вами закрепим знания, полученные в предыдущих уроках, и реализуем небольшой проект, который покроет темы, трансформации, группировки и анимации! 100 ❤️ и я пойму, что вам хочется больше практики с использованием Three.js) •••••••••••••• 0:00 Вступление 0:38 Создание группы с кубами 3:31 Добавление рандомных цве...
Защищаем фронт от XSS атак, часть 2
มุมมอง 36711 หลายเดือนก่อน
Защита фронтенд-приложений от отраженных XSS атак - важная тема для всех разработчиков. Reflected XSS являются одним из типов атак на веб-приложения. В этом видео я расскажу что это и как предотвратить эту угрозу и сделать ваш фронтенд надежным. •••••••••••••• 0:00 Введение 0:30 Что такое Reflected XSS 1:45 Последствия атаки 2:55 Разница между отраженным XSS и хранимым XSS 3:21 Методы защиты 4:...
Three.js, анимируем движение объектов
มุมมอง 7K11 หลายเดือนก่อน
В двух прошлых уроках мы с вами разобрали основы трансформации объектов, если вы это не смотрели, то советую обязательно посмотреть: - Часть 1: th-cam.com/video/qtBom3GlLOY/w-d-xo.html - Часть 2: th-cam.com/video/PvCU9ZDTO9w/w-d-xo.html Сегодня же мы разберемся как создавать простую анимацию, и как создание подвижных сцен может зависеть от частоты кадров! •••••••••••••• 0:00 Вступление 0:47 req...
Three.js, перемещаем и масштабируем объекты
มุมมอง 4.3Kปีที่แล้ว
Three.js, перемещаем и масштабируем объекты
Web Dev Sandbox: Воплоти свои идеи в вебе!
มุมมอง 799ปีที่แล้ว
Web Dev Sandbox: Воплоти свои идеи в вебе!
Сборка проекта с three.js с помощью webpack: настройка дева и прода
มุมมอง 5Kปีที่แล้ว
Сборка проекта с three.js с помощью webpack: настройка дева и прода
Markdown Magic: Создание редактора с отображением превью!
มุมมอง 351ปีที่แล้ว
Markdown Magic: Создание редактора с отображением превью!
Как создать drag-n-drop функциональность без библиотек
มุมมอง 2.3Kปีที่แล้ว
Как создать drag-n-drop функциональность без библиотек
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
มุมมอง 19Kปีที่แล้ว
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
Шаг за шагом: создание hoverboard на CSS и JS
มุมมอง 472ปีที่แล้ว
Шаг за шагом: создание hoverboard на CSS и JS
Шаг за шагом: создание анимации при сколле на CSS и JS
มุมมอง 3Kปีที่แล้ว
Шаг за шагом: создание анимации при сколле на CSS и JS
Спасибо! Хотелось бы еще расширенное объяснение про BufferGeometry. Например, зачем нужен setIndex.
А где же ссылки? 😭
Кэп
Иулер? Серьёзно? 🤦🏻♂️
Привет, я стартую обучение от тебя на Three.js и, надеюсь, что у меня всё получится. Желаю тебе идей на море классного контента, а я погнал изучать)
Очень круто! Но когда продолжение?
лее, это чё за курсы, дай знать где ты находишься, дай знать
Продолжай записывать уроки, у тебя талант!
Какая милота)
в гитхаб нет three.min.js что делать
На гитхабе не могу найти three.min.js. Там сейчас в папке build только three.cjs, three.module.js и three.module.min.js. Можете, пожалуйста скинуть другую ссылку на three.min.js или подскажите, чем его можно заменить. Пробовала копировать код с import * as THREE from 'three'; не подключая скрипт через файл, но все равно ничего не работает.
three.module.min.js нужно экспорт переписать. или подключить скрипты используя type="module" + использовать import как на гите весь
Большое спасибо за курс.
качественный контент спросом не особо пользуется в ру сегменте)
Продвигаем полезный контент
Продвигаем полезный контент
у меня не получается подключить куб, просто пустая страница. Где у меня ошибка? Помогите, пожалуйста!
three.module.min.js нужно экспорт переписать. или подключить скрипты используя type="module" + использовать import как на гите весь
Для тех, кто так и не понял в чем ошибка исправьте строчку на : const intersections = raycaster.intersectObjects(scene.children);
курс устарел
Не, там можно найти в глубинах git hub этот файл, если нужно могу дать инструкцию
Three.module.min.js>Blame>last year>находишь three.min.js > view file
@@electroshok222 спасибо большое
@@electroshok222 спасибоо!
спасибо за такой полезный труд, только тут нашел нужную инфу
Всё очень понятно и кажется довольно простым, начинаешь пробовать и как бы сразу нет. На официальном гитхабе в папке build теперь лежит только модуль и three.cjs. И оба эти варианта не подходят для тех, кто решил делать по этому видео.
Я продолжил хождение по граблям, попробовал способ "Option 1: Install with NPM and a build tool" из официальной документации, не заработало с экзотической ошибкой "(node:17884) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' at Loader.moduleStrategy (internal/modules/esm/translators.js:149:18)" Идём дальше, второй вариант из документации "Option 2: Import from a CDN" делаю как написано, получаю ошибку "Cannot use import statement outside a module (at tree:25:1)" ещё один заход на SoF и проблема решена добавлением type="module" для тэга script. Всё заработало только с бубном, и это только самый простой пример из документации. Настоящий кошмар фронтенд разработчика, подозреваю, что дальше будет только хуже.
открыть releases и скачать rev159...
Шикарный урок! Огромное спасибо! Успехов вам)
Как теперь это залить на сайт?
Огромное спасибо за такое хорошее объяснение🥰
Ох этот звук при копи пасте, это нечто
Спасибо за видео и за курс.
Продуманная структура курса, хорошая подача. Все понятно объясняется. Спасибо!
Молодец. Спасибо.
Понравилось. Спасибо автору за труд.
Это мега круто! Шикарная подача материала, шикарная дикция! Прохожу курс на одном дыхании! Спасибо! 🥰
Спасибо за видео урок.
Спасибо Автору за урок.
При вводе npm run start выходит ошибка. С github скачал zip 6-ю версию, заново набрал команды npm init -y, длинный код с видео npm webpack, npm run start. Чтобы результат был как на видео удалил несколько строк с script.js
Получилось, спасибо большое за урок.
Спасибо за видео, было очень интересно.
а в чём сайты сечас делают? чё за прога. Я раньше в dreamveawer сидел
Visual Studio Code или WebStorm
Класс, интересно, где эта умная девушка всему научилась
Создал проект three.js. А как его на хостинге разместить (например на timeweb)?
А если на github нету файла three.min.js? Какой файл использовать для подключения three.js?
У меня тоже не получается подключить three.module.min.js. Выдаёт ошибку якобы не может найти THREE. Могли бы вы помочь пожалуйста. Всё что можно перепробовала
Вы не тот файл подключаете во первых. Во вторых в видео устарела информация.
Это оооочень круто! Больше практики бы ))
оч круто. спасибо.
Спасибо за качественный материал! А курс Three.js на Реакте уже есть или еще в разработке? Интересно узнать длительность и стоимость курса
Сейчас вместо three.min.js установили three.module.min.js. Можно поподробнее про установку. Сразу не получилось подключится.
круто. спасибо. Three.js уроки
спасибо Three.js курсы
спасибо three.js уроки.
господи, как все понятно. сейчас прохожу платный курс анимации у "одной академии". там все текстом написано. ниче не понятно........
Стоит ли ждать продолжения?
О спасибо за уроки, надеюсь будет продолжение, посмотрю все. Ещё интересно это делать нам react
курс есть или его пока нет, я что-то не понял?)