Web Dev Sandbox
Web Dev Sandbox
  • 28
  • 114 497
Какие бывают текстуры и как их загружать в 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
Спасибо за внимание ♥︎
มุมมอง: 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...
Защищаем фронт от XSS атак, часть 1
มุมมอง 1.1Kปีที่แล้ว
Защищаем фронт от XSS атак, часть 1
Three.js, вращаем и группируем объекты
มุมมอง 4.6Kปีที่แล้ว
Three.js, вращаем и группируем объекты
Three.js, перемещаем и масштабируем объекты
มุมมอง 6Kปีที่แล้ว
Three.js, перемещаем и масштабируем объекты
Web Dev Sandbox: Воплоти свои идеи в вебе!
มุมมอง 817ปีที่แล้ว
Web Dev Sandbox: Воплоти свои идеи в вебе!
Сборка проекта с three.js с помощью webpack: настройка дева и прода
มุมมอง 7Kปีที่แล้ว
Сборка проекта с three.js с помощью webpack: настройка дева и прода
Markdown Magic: Создание редактора с отображением превью!
มุมมอง 407ปีที่แล้ว
Markdown Magic: Создание редактора с отображением превью!
Как создать простую сцену с three.js
มุมมอง 15Kปีที่แล้ว
Как создать простую сцену с three.js
Как создать drag-n-drop функциональность без библиотек
มุมมอง 2.9Kปีที่แล้ว
Как создать drag-n-drop функциональность без библиотек
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
มุมมอง 25Kปีที่แล้ว
Three.js курс: с нуля до потрясающих трёхмерных визуализаций
Разбираем задачу Two Sum на LeetCode
มุมมอง 471ปีที่แล้ว
Разбираем задачу Two Sum на LeetCode
Шаг за шагом: создание hoverboard на CSS и JS
มุมมอง 518ปีที่แล้ว
Шаг за шагом: создание hoverboard на CSS и JS
Шаг за шагом: создание анимации при сколле на CSS и JS
มุมมอง 3.2Kปีที่แล้ว
Шаг за шагом: создание анимации при сколле на CSS и JS

ความคิดเห็น

  • @samsaller
    @samsaller 9 วันที่ผ่านมา

    Я использовал display: block; чтобы убрать скроллы. Так браузеры высчитывают так же, как и высчитывали бы для div. И мне кажется так удобнее если нужно ставить канвас адаптивно в какойто блок верстки)

  • @ilyalisovski6691
    @ilyalisovski6691 15 วันที่ผ่านมา

    Возвращайся плиз(

  • @fuad2069
    @fuad2069 16 วันที่ผ่านมา

    Спасибо, у меня вопрос. Перед мной стоит задача распарсить dxf файл и отрисовать содержимое. Все хорошо получается только вот есть проблема когда дело касается больших файлов, комп умирает, это из за того что элементов очень много (линий и 3dfaces). Можно ли как то разгрузить работу компа, или же есть ли способы самой библиотеки которая могла бы упростить работу с отрисовкой ? PS: виснет когда начинаю крутить скролом мыши и вращать фигуру

  • @Пупупу-г7к
    @Пупупу-г7к 23 วันที่ผ่านมา

    Какая хорошая

  • @Dawin4e
    @Dawin4e 24 วันที่ผ่านมา

    Ну фиг знает , я конечно рад что у кого-то всё получается с первого раза, у меня не получилось . Браузер показывает пустую страницу. Пробовал менять код с скрипте и в файле index не помогло.

  • @kukla1926
    @kukla1926 26 วันที่ผ่านมา

    Спасибо за курс! Хотелось бы уточнить касательно первого ролика. У меня не получается все правильно подключить. Могу за донат если возможно.

  • @kukla1926
    @kukla1926 27 วันที่ผ่านมา

    Блин тут все для мака.

  • @kukla1926
    @kukla1926 27 วันที่ผ่านมา

    Здравствуйте. У меня рендерит белый экран почему-то. Думаю из-за того что я добавил в src в индексном файле не three.min.js который нигде не могу найти, а файл three.module.js. Помогите пожалуйста разобраться.

  • @lililight-e5f
    @lililight-e5f หลายเดือนก่อน

    у меня тоже нет 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. потом его разархивировать и забрать оттуда этот файл.

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

    там нет файла three.min.js больше что теперь делать?

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

      Посмотри документацию

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

    setTimeout помещается в очередь макрозадач, а не микрозадач. Дизлайк...........

  • @СергейК-б6н
    @СергейК-б6н หลายเดือนก่อน

    Умная еще и красивая🥰

  • @СергейК-б6н
    @СергейК-б6н หลายเดือนก่อน

    Супер!

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

    а есть курс, где полноценно сайт получается?

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

    Большое спасибо за урок, объясняете очень подробно, то, что надо 🖤 Подписка, лайк.

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

    Почему у вас *clasList* не выдает ошибку ? Или я ошибаюсь, разве не с двумя буквами пишется *classList* ?

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

    Ты большая молодец! Спасибо за урок, продолжай в том же духе

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

    выдает ошибку - [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? } , может где накосячил, все в лучших традициях - магия не работает

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

      да у меня тоже

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

      Уберите опции onAfterSetupMiddleware и https в объекте devServer. Они не соответствуют API. Что-то видимо за это время поменялось. Магия работает!

  • @ТимофейМарьин-в9н
    @ТимофейМарьин-в9н 2 หลายเดือนก่อน

    Спасибо за крутой курс! Надеюсь ты жива 😅

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

    Небольшое замечание. Тут нет смысла использовать requestAnimationFrame(в первой части видео), так как он будет срабатывать в зависимости от частоты обновления экрана. У меня допустим каждые 16 миллисекунд. Почему не нужно, да потому что у нас анимация происходи когда мы двигаем мышью, соответственно обновлять кадр нам не нужно когда мышь не двигается. Соответственно функцию тик нам нужно запускать каждый раз когда идет движение мыши. Поэтому удаляем requestAnamationFrame, и запуск тик переносим в обработчик mousemove. В функцию тик можно передавать координаты в качестве аргумента, а можно брать из глобального объекта - работать будет одинаково. А так контент супер, не знаю что бы делал без вас

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

    Здравствуйте я только смотрю ролик но там нет силки three.min.js

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

    Не слышно буквально ничего, очень тихо, но урок отличный, спасибо!

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

    Доходчиво все супер

  • @ИринаКольская
    @ИринаКольская 3 หลายเดือนก่อน

    Что за консоль со светофором сверху слева, подскажите, пожалуйста.

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

      Это не какая-то определённая консоль, это интерфейс на всех макбуках

  • @ДмитрийЗаруцкий-н3у
    @ДмитрийЗаруцкий-н3у 3 หลายเดือนก่อน

    Спасибо, отличный курс

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

    Здравствуйте можете снять видео по drag-n- drop на фреймворке angular

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

    Кто смотрит эту туфту еще и не лайкает Спасибо за труд

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

    Начала курс и забила....вот и верь после такого людям

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

    Где найти окно на 0:52?

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

    Не получается применить dds текстуру к obj геометрии в three.js, текстура не отображается. Использую соответствующие лоадеры.

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

    Привет бедолаги в html файле: <script type="module" src="./script.js"></script> в js фале: import * as THREE from "./three.module.js";

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

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

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

    Вика - вы умница! Спасибо за классный курс!

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

    спасибо

  • @Аннанежная-м8я
    @Аннанежная-м8я 4 หลายเดือนก่อน

    Очень жду продолжения курса! Спасибо большое за такой крутой контент.

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

    Спасибо очень понятно обьясняете

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

    Что делать, если на цилиндре текстура не отображается, а лишь её цвет?

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

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

  • @АндрейИльченко-т7ж
    @АндрейИльченко-т7ж 5 หลายเดือนก่อน

    🔥🔥🔥

  • @АртемП-у6ч
    @АртемП-у6ч 5 หลายเดือนก่อน

    Просто волшебный курс по three js

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

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

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

    Что за программа, кто подскажет?

  • @КонсуэлоШуль-т2щ
    @КонсуэлоШуль-т2щ 5 หลายเดือนก่อน

    Музыка мешает.

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

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

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

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

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

    Кэп

  • @pick-pock
    @pick-pock 6 หลายเดือนก่อน

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

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

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

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

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

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

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