- 28
- 114 497
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
Спасибо за внимание ♥︎
มุมมอง: 3 464
วีดีโอ
Обучение Three.js, за 6 шагов подготовки
มุมมอง 3.4Kปีที่แล้ว
Изучение 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 минут
มุมมอง 11Kปีที่แล้ว
Перечитали кучу форумов, а загрузить 3D модель в приложение three.js не получается? Тогда это видео точно для вас. Разберемся как загрузить простые модели, составные модели заставим наши модели оживать, используя встроенные анимации. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Введение 0:26 Создаем проект 1:24 Добавляем исходники моделей 2:08 Подготовка сцены 4:2...
Инструменты отладки Three.js приложений
มุมมอง 2.1Kปีที่แล้ว
В этом видео я расскажу как сделать процесс разработки на Three.js более удобным и приятным. Мы научимся: - Добавлять счетчик FPS с помощью библиотеки stats.js - Создавать GUI с настройками используя dat.gui - Добавлять слайдеры, чекбоксы, цвета и другие элементы управления - Группировать настройки в папки - Делать настройки свойств объектов и материалов После просмотра ты будешь четко представ...
Практикуем Three.js, интерактивная сетка из геометрий
มุมมอง 3Kปีที่แล้ว
В новом практическом уроке по Three.js мы создадим интерактивную сетку из разных геометрий. Узнаем как: - Создавать сетку объектов с помощью циклов - Использовать Raycaster для обнаружения кликов - Менять цвет и добавлять вращение для активного объекта - Использовать Tween для плавных анимаций - Возвращать неактивные объекты на исходные позиции Полезный урок, чтобы закрепить навыки работы с объ...
Все основные геометрии в Three.js за 20 минут
มุมมอง 2.8Kปีที่แล้ว
В этом видео мы подробно разберем все основные геометрии, которые есть в библиотеке Three.js - BoxGeometry, PlaneGeometry, CircleGeometry, ConeGeometry, CylinderGeometry и многие другие. Узнаем: - Какие бывают геометрии в Three.js - Как создавать базовые фигуры вроде куба, цилиндра, конуса, плоскости - Как строить сферы, торы, додекаэдры и другие многогранники - Зачем нужен класс BufferGeometry...
Three.js, как сделать резиновый canvas
มุมมอง 2.8Kปีที่แล้ว
В этом видео я покажу как сделать canvas в Three.js, который будет подстраиваться под размер экрана пользователя. Узнаешь как настроить размер холста, соотношение пикселей и полноэкранный режим. В видео разберем: - Как задать размер canvas из JavaScript - Как подписаться на событие resize окна - Как правильно обновлять камеру и рендер при изменении размера - Как ограничить соотношение пикселей ...
Как защититься от XSS атак на основе DOM
มุมมอง 729ปีที่แล้ว
В этом видео разбираем, что такое XSS атаки на основе DOM и как от них защититься. Узнаем, как работают фрагменты URI и почему они опасны. Рассмотрим практики защиты приложения - экранирование динамического контента и использование библиотеки node-esapi. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Введение 0:35 Что такое XSS на основе DOM 2:24 Способы защиты 3:23...
Three.js, элементы управления
มุมมอง 3.1Kปีที่แล้ว
В этом видео мы разберем как добавить элементы управления в Three.js, чтобы пользователь мог взаимодействовать с 3D сценой. Рассмотрим как создавать свои собственные элементы управления и как использовать встроенные классы, такие как OrbitControls. Также поговорим о демпфировании и настройках. 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Вступление 0:35 Нативная р...
Three.js, как устроены различные камеры
มุมมอง 2.5Kปีที่แล้ว
Камеры играют важную роль в создании 3D-сцен. Когда дело доходит до работы с Three.js, мощной библиотекой JavaScript для 3D-рендеринга, камеры необходимы для управления перспективой и видом сцены. Именно поэтому в данном видео мы разберем какие типы камер существуют и как с ними работать! 100 ❤️ и я пойму, что вам хочется больше подобных видео •••••••••••••• 0:00 Введение 0:42 Класс Camera и Ar...
Практикуем Three.js, анимация и группировка
มุมมอง 3.7Kปีที่แล้ว
Изучать программирование и практиковаться, глупая история, поэтому в этом видео мы с вами закрепим знания, полученные в предыдущих уроках, и реализуем небольшой проект, который покроет темы, трансформации, группировки и анимации! 100 ❤️ и я пойму, что вам хочется больше практики с использованием Three.js) •••••••••••••• 0:00 Вступление 0:38 Создание группы с кубами 3:31 Добавление рандомных цве...
Защищаем фронт от XSS атак, часть 2
มุมมอง 436ปีที่แล้ว
Защита фронтенд-приложений от отраженных XSS атак - важная тема для всех разработчиков. Reflected XSS являются одним из типов атак на веб-приложения. В этом видео я расскажу что это и как предотвратить эту угрозу и сделать ваш фронтенд надежным. •••••••••••••• 0:00 Введение 0:30 Что такое Reflected XSS 1:45 Последствия атаки 2:55 Разница между отраженным XSS и хранимым XSS 3:21 Методы защиты 4:...
Three.js, анимируем движение объектов
มุมมอง 8Kปีที่แล้ว
В двух прошлых уроках мы с вами разобрали основы трансформации объектов, если вы это не смотрели, то советую обязательно посмотреть: - Часть 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, перемещаем и масштабируем объекты
มุมมอง 6Kปีที่แล้ว
Three.js, перемещаем и масштабируем объекты
Web Dev Sandbox: Воплоти свои идеи в вебе!
มุมมอง 817ปีที่แล้ว
Web Dev Sandbox: Воплоти свои идеи в вебе!
Сборка проекта с three.js с помощью webpack: настройка дева и прода
มุมมอง 7Kปีที่แล้ว
Сборка проекта с three.js с помощью webpack: настройка дева и прода
Markdown Magic: Создание редактора с отображением превью!
มุมมอง 407ปีที่แล้ว
Markdown Magic: Создание редактора с отображением превью!
Как создать drag-n-drop функциональность без библиотек
มุมมอง 2.9Kปีที่แล้ว
Как создать drag-n-drop функциональность без библиотек
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
มุมมอง 25Kปีที่แล้ว
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
Шаг за шагом: создание hoverboard на CSS и JS
มุมมอง 518ปีที่แล้ว
Шаг за шагом: создание hoverboard на CSS и JS
Шаг за шагом: создание анимации при сколле на CSS и JS
มุมมอง 3.2Kปีที่แล้ว
Шаг за шагом: создание анимации при сколле на CSS и JS
Я использовал display: block; чтобы убрать скроллы. Так браузеры высчитывают так же, как и высчитывали бы для div. И мне кажется так удобнее если нужно ставить канвас адаптивно в какойто блок верстки)
Возвращайся плиз(
Спасибо, у меня вопрос. Перед мной стоит задача распарсить dxf файл и отрисовать содержимое. Все хорошо получается только вот есть проблема когда дело касается больших файлов, комп умирает, это из за того что элементов очень много (линий и 3dfaces). Можно ли как то разгрузить работу компа, или же есть ли способы самой библиотеки которая могла бы упростить работу с отрисовкой ? PS: виснет когда начинаю крутить скролом мыши и вращать фигуру
Какая хорошая
Ну фиг знает , я конечно рад что у кого-то всё получается с первого раза, у меня не получилось . Браузер показывает пустую страницу. Пробовал менять код с скрипте и в файле index не помогло.
Спасибо за курс! Хотелось бы уточнить касательно первого ролика. У меня не получается все правильно подключить. Могу за донат если возможно.
Блин тут все для мака.
Здравствуйте. У меня рендерит белый экран почему-то. Думаю из-за того что я добавил в src в индексном файле не three.min.js который нигде не могу найти, а файл three.module.js. Помогите пожалуйста разобраться.
у меня тоже нет three.min.js. я скачал github download он весит 345Mb потом оттуда я использовал three.module.js. в html внизу <script type="module" src="./script.js"></script> а в script.js в самом вверху import * as THREE from "./three.module.js"; и кубик вращается. и самое интересное three.module.js годен только из download. потом его разархивировать и забрать оттуда этот файл.
там нет файла three.min.js больше что теперь делать?
Посмотри документацию
setTimeout помещается в очередь макрозадач, а не микрозадач. Дизлайк...........
Умная еще и красивая🥰
Супер!
а есть курс, где полноценно сайт получается?
Большое спасибо за урок, объясняете очень подробно, то, что надо 🖤 Подписка, лайк.
Почему у вас *clasList* не выдает ошибку ? Или я ошибаюсь, разве не с двумя буквами пишется *classList* ?
Ты большая молодец! Спасибо за урок, продолжай в том же духе
выдает ошибку - [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'onAfterSetupMiddleware'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, ipc?, liveReload?, onListening?, open?, port?, proxy?, server?, app?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } , может где накосячил, все в лучших традициях - магия не работает
да у меня тоже
Уберите опции onAfterSetupMiddleware и https в объекте devServer. Они не соответствуют API. Что-то видимо за это время поменялось. Магия работает!
Спасибо за крутой курс! Надеюсь ты жива 😅
Небольшое замечание. Тут нет смысла использовать requestAnimationFrame(в первой части видео), так как он будет срабатывать в зависимости от частоты обновления экрана. У меня допустим каждые 16 миллисекунд. Почему не нужно, да потому что у нас анимация происходи когда мы двигаем мышью, соответственно обновлять кадр нам не нужно когда мышь не двигается. Соответственно функцию тик нам нужно запускать каждый раз когда идет движение мыши. Поэтому удаляем requestAnamationFrame, и запуск тик переносим в обработчик mousemove. В функцию тик можно передавать координаты в качестве аргумента, а можно брать из глобального объекта - работать будет одинаково. А так контент супер, не знаю что бы делал без вас
Здравствуйте я только смотрю ролик но там нет силки three.min.js
Не слышно буквально ничего, очень тихо, но урок отличный, спасибо!
Доходчиво все супер
Что за консоль со светофором сверху слева, подскажите, пожалуйста.
Это не какая-то определённая консоль, это интерфейс на всех макбуках
Спасибо, отличный курс
Здравствуйте можете снять видео по drag-n- drop на фреймворке angular
Кто смотрит эту туфту еще и не лайкает Спасибо за труд
Начала курс и забила....вот и верь после такого людям
Где найти окно на 0:52?
Не получается применить dds текстуру к obj геометрии в three.js, текстура не отображается. Использую соответствующие лоадеры.
Привет бедолаги в html файле: <script type="module" src="./script.js"></script> в js фале: import * as THREE from "./three.module.js";
Спасибо за простой и понятный урок. Помогли разобраться в теме с первого просмотра.
Вика - вы умница! Спасибо за классный курс!
спасибо
Очень жду продолжения курса! Спасибо большое за такой крутой контент.
Спасибо очень понятно обьясняете
Что делать, если на цилиндре текстура не отображается, а лишь её цвет?
как программист с 20+ летним стажем на С++ и прочем, замечу, что сленг - "накидываем", уж слишком режет слух. накидывают г-но лопатой. а код - добавляют, вставляют, реализуют и все такое. не дай бог "накидывать" в публичных лекциях.
🔥🔥🔥
Просто волшебный курс по three js
который видео показал больше такого нету возможности делать 😢, снимай новый видео именно 2024 год, у тебя не плохо получается
Что за программа, кто подскажет?
Музыка мешает.
Спасибо! Хотелось бы еще расширенное объяснение про BufferGeometry. Например, зачем нужен setIndex.
А где же ссылки? 😭
Кэп
Иулер? Серьёзно? 🤦🏻♂️
Привет, я стартую обучение от тебя на Three.js и, надеюсь, что у меня всё получится. Желаю тебе идей на море классного контента, а я погнал изучать)
Очень круто! Но когда продолжение?
лее, это чё за курсы, дай знать где ты находишься, дай знать