Web Dev Sandbox
Web Dev Sandbox
  • 28
  • 89 079
Какие бывают текстуры и как их загружать в 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
Спасибо за внимание ♥︎
มุมมอง: 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...
Защищаем фронт от XSS атак, часть 1
มุมมอง 97311 หลายเดือนก่อน
Защищаем фронт от XSS атак, часть 1
Three.js, вращаем и группируем объекты
มุมมอง 3.5Kปีที่แล้ว
Three.js, вращаем и группируем объекты
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: Создание редактора с отображением превью!
Как создать простую сцену с three.js
มุมมอง 12Kปีที่แล้ว
Как создать простую сцену с three.js
Как создать drag-n-drop функциональность без библиотек
มุมมอง 2.3Kปีที่แล้ว
Как создать drag-n-drop функциональность без библиотек
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
มุมมอง 19Kปีที่แล้ว
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
Разбираем задачу Two Sum на LeetCode
มุมมอง 414ปีที่แล้ว
Разбираем задачу Two Sum на LeetCode
Шаг за шагом: создание hoverboard на CSS и JS
มุมมอง 472ปีที่แล้ว
Шаг за шагом: создание hoverboard на CSS и JS
Шаг за шагом: создание анимации при сколле на CSS и JS
มุมมอง 3Kปีที่แล้ว
Шаг за шагом: создание анимации при сколле на CSS и JS

ความคิดเห็น

  • @xeleos
    @xeleos 3 วันที่ผ่านมา

    Спасибо! Хотелось бы еще расширенное объяснение про BufferGeometry. Например, зачем нужен setIndex.

  • @evdokiadergileva550
    @evdokiadergileva550 20 วันที่ผ่านมา

    А где же ссылки? 😭

  • @mit7871
    @mit7871 23 วันที่ผ่านมา

    Кэп

  • @pick-pock
    @pick-pock 27 วันที่ผ่านมา

    Иулер? Серьёзно? 🤦🏻‍♂️

  • @errorerror3564
    @errorerror3564 หลายเดือนก่อน

    Привет, я стартую обучение от тебя на Three.js и, надеюсь, что у меня всё получится. Желаю тебе идей на море классного контента, а я погнал изучать)

  • @jeka34volga
    @jeka34volga หลายเดือนก่อน

    Очень круто! Но когда продолжение?

  • @sharpsss7666
    @sharpsss7666 หลายเดือนก่อน

    лее, это чё за курсы, дай знать где ты находишься, дай знать

  • @user-hn1os6nk1x
    @user-hn1os6nk1x หลายเดือนก่อน

    Продолжай записывать уроки, у тебя талант!

  • @alexvimpel9015
    @alexvimpel9015 หลายเดือนก่อน

    Какая милота)

  • @MolokoSlivki-cw4sb
    @MolokoSlivki-cw4sb หลายเดือนก่อน

    в гитхаб нет three.min.js что делать

  • @unmercif3309
    @unmercif3309 หลายเดือนก่อน

    На гитхабе не могу найти three.min.js. Там сейчас в папке build только three.cjs, three.module.js и three.module.min.js. Можете, пожалуйста скинуть другую ссылку на three.min.js или подскажите, чем его можно заменить. Пробовала копировать код с import * as THREE from 'three'; не подключая скрипт через файл, но все равно ничего не работает.

    • @antoniochili2545
      @antoniochili2545 หลายเดือนก่อน

      three.module.min.js нужно экспорт переписать. или подключить скрипты используя type="module" + использовать import как на гите весь

  • @iktnbDev-fk6qd
    @iktnbDev-fk6qd หลายเดือนก่อน

    Большое спасибо за курс.

  • @klirmio21
    @klirmio21 หลายเดือนก่อน

    качественный контент спросом не особо пользуется в ру сегменте)

  • @yusheeroshorts
    @yusheeroshorts หลายเดือนก่อน

    Продвигаем полезный контент

  • @yusheeroshorts
    @yusheeroshorts หลายเดือนก่อน

    Продвигаем полезный контент

  • @olgakobleva134
    @olgakobleva134 2 หลายเดือนก่อน

    у меня не получается подключить куб, просто пустая страница. Где у меня ошибка? Помогите, пожалуйста!

    • @antoniochili2545
      @antoniochili2545 หลายเดือนก่อน

      three.module.min.js нужно экспорт переписать. или подключить скрипты используя type="module" + использовать import как на гите весь

  • @user-rb1sp2iu2l
    @user-rb1sp2iu2l 2 หลายเดือนก่อน

    Для тех, кто так и не понял в чем ошибка исправьте строчку на : const intersections = raycaster.intersectObjects(scene.children);

  • @viktorkondrat
    @viktorkondrat 2 หลายเดือนก่อน

    курс устарел

    • @electroshok222
      @electroshok222 2 หลายเดือนก่อน

      Не, там можно найти в глубинах git hub этот файл, если нужно могу дать инструкцию

    • @electroshok222
      @electroshok222 2 หลายเดือนก่อน

      Three.module.min.js>Blame>last year>находишь three.min.js > view file

    • @MolokoSlivki-cw4sb
      @MolokoSlivki-cw4sb หลายเดือนก่อน

      @@electroshok222 спасибо большое

    • @anass155
      @anass155 หลายเดือนก่อน

      @@electroshok222 спасибоо!

  • @user-mp4dm4bn2o
    @user-mp4dm4bn2o 2 หลายเดือนก่อน

    спасибо за такой полезный труд, только тут нашел нужную инфу

  • @zakr2
    @zakr2 2 หลายเดือนก่อน

    Всё очень понятно и кажется довольно простым, начинаешь пробовать и как бы сразу нет. На официальном гитхабе в папке build теперь лежит только модуль и three.cjs. И оба эти варианта не подходят для тех, кто решил делать по этому видео.

    • @zakr2
      @zakr2 2 หลายเดือนก่อน

      Я продолжил хождение по граблям, попробовал способ "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. Всё заработало только с бубном, и это только самый простой пример из документации. Настоящий кошмар фронтенд разработчика, подозреваю, что дальше будет только хуже.

    • @evgenytikhonov1105
      @evgenytikhonov1105 2 หลายเดือนก่อน

      открыть releases и скачать rev159...

  • @lowmikow1099
    @lowmikow1099 2 หลายเดือนก่อน

    Шикарный урок! Огромное спасибо! Успехов вам)

  • @katerinamancova9333
    @katerinamancova9333 2 หลายเดือนก่อน

    Как теперь это залить на сайт?

  • @lowmikow1099
    @lowmikow1099 2 หลายเดือนก่อน

    Огромное спасибо за такое хорошее объяснение🥰

  • @trustambassador
    @trustambassador 2 หลายเดือนก่อน

    Ох этот звук при копи пасте, это нечто

  • @trustambassador
    @trustambassador 2 หลายเดือนก่อน

    Спасибо за видео и за курс.

  • @user-tg2ep1hx1r
    @user-tg2ep1hx1r 2 หลายเดือนก่อน

    Продуманная структура курса, хорошая подача. Все понятно объясняется. Спасибо!

  • @antoha9486
    @antoha9486 2 หลายเดือนก่อน

    Молодец. Спасибо.

  • @antoha9486
    @antoha9486 2 หลายเดือนก่อน

    Понравилось. Спасибо автору за труд.

  • @user-hl4xr6zm6l
    @user-hl4xr6zm6l 2 หลายเดือนก่อน

    Это мега круто! Шикарная подача материала, шикарная дикция! Прохожу курс на одном дыхании! Спасибо! 🥰

  • @trustambassador
    @trustambassador 3 หลายเดือนก่อน

    Спасибо за видео урок.

  • @trustambassador
    @trustambassador 3 หลายเดือนก่อน

    Спасибо Автору за урок.

  • @trustambassador
    @trustambassador 3 หลายเดือนก่อน

    При вводе npm run start выходит ошибка. С github скачал zip 6-ю версию, заново набрал команды npm init -y, длинный код с видео npm webpack, npm run start. Чтобы результат был как на видео удалил несколько строк с script.js

  • @trustambassador
    @trustambassador 3 หลายเดือนก่อน

    Получилось, спасибо большое за урок.

  • @trustambassador
    @trustambassador 3 หลายเดือนก่อน

    Спасибо за видео, было очень интересно.

  • @user-wx6qb6xv1l
    @user-wx6qb6xv1l 3 หลายเดือนก่อน

    а в чём сайты сечас делают? чё за прога. Я раньше в dreamveawer сидел

    • @kvidon1357
      @kvidon1357 3 หลายเดือนก่อน

      Visual Studio Code или WebStorm

  • @sergmalin210
    @sergmalin210 3 หลายเดือนก่อน

    Класс, интересно, где эта умная девушка всему научилась

  • @gaa972
    @gaa972 3 หลายเดือนก่อน

    Создал проект three.js. А как его на хостинге разместить (например на timeweb)?

  • @user-ig2jk2hu2y
    @user-ig2jk2hu2y 3 หลายเดือนก่อน

    А если на github нету файла three.min.js? Какой файл использовать для подключения three.js?

  • @user-jc3sy6hn2v
    @user-jc3sy6hn2v 3 หลายเดือนก่อน

    У меня тоже не получается подключить three.module.min.js. Выдаёт ошибку якобы не может найти THREE. Могли бы вы помочь пожалуйста. Всё что можно перепробовала

    • @user-xd1yg1rf6s
      @user-xd1yg1rf6s 2 หลายเดือนก่อน

      Вы не тот файл подключаете во первых. Во вторых в видео устарела информация.

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u 3 หลายเดือนก่อน

    Это оооочень круто! Больше практики бы ))

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u 3 หลายเดือนก่อน

    оч круто. спасибо.

  • @SobolevMsta
    @SobolevMsta 4 หลายเดือนก่อน

    Спасибо за качественный материал! А курс Three.js на Реакте уже есть или еще в разработке? Интересно узнать длительность и стоимость курса

  • @user-bp9yn7br6p
    @user-bp9yn7br6p 4 หลายเดือนก่อน

    Сейчас вместо three.min.js установили three.module.min.js. Можно поподробнее про установку. Сразу не получилось подключится.

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u 4 หลายเดือนก่อน

    круто. спасибо. Three.js уроки

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u 4 หลายเดือนก่อน

    спасибо Three.js курсы

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u 4 หลายเดือนก่อน

    спасибо three.js уроки.

  • @user-rr1ju1ck2u
    @user-rr1ju1ck2u 4 หลายเดือนก่อน

    господи, как все понятно. сейчас прохожу платный курс анимации у "одной академии". там все текстом написано. ниче не понятно........

  • @arti532
    @arti532 4 หลายเดือนก่อน

    Стоит ли ждать продолжения?

  • @Kubzay
    @Kubzay 4 หลายเดือนก่อน

    О спасибо за уроки, надеюсь будет продолжение, посмотрю все. Ещё интересно это делать нам react

  • @user-te9ci1tx4x
    @user-te9ci1tx4x 4 หลายเดือนก่อน

    курс есть или его пока нет, я что-то не понял?)