Drukarnia.BLOG

3д модель в браузері

Бачу що ніхто не розповідав про такі штуки на цій платформі. Є така бібліотке Three js яка дозволяє завантажити модель в браузері, це можуть бути як ваші згенеровані частки, чи ваші моделі з текстурами, нормалмапами та всім іншим звичним для тридешників.

— Якщо треба одяг сфінксам - давай сюди https://www.instagram.com/floksi_pet/ :D

Як це працює - Ви додаєте сцену, світло те що хочете бачити на сцені.
Те що ви бачите це типу плоске зображення яке відображується на проміжному екрані.

Не потрібен ниякий софт, тільки ця бібліотека, або якщо потрібна фізика то ще одна.

На ній роблять всякі круті штуки з 3д об’ектами по типу шутерів, конструктерів чи просто фонових зображень, просто демонстраційних вікон з товаром чи буд чого іншого)

Доволі давно вона існує, а не так давно разраби зробили абдейт коду, тому зазвичай приклади що є в інтернеті на ютубі чи десь ще не дуже корректно працюють, чи не працюють взагалі через зміну назв файлів бібліотеки які потрібно підключати до проекту як мінімум.

Тому користуйтеся прикладами з офіційного сайту та всіми любим Chat GPT. Він мені дуже допомогає в моїй писанині кода і мабуть вже скоро програмісти будуть “оптимізовані”, а створити софт який потрібно буде достатьно написати що саме тобі потрібно і вносити необхідні правки.

На офіційному сайті можете поклацати та подивится роботи інших, та надихнутися тим, а в розділі прикладів https://threejs.org/examples/ можна пощупати приклади і переглянути його код. якщо не буде працювати закидуйте в чат і просіть виправити помилки )

Я користуюся VS Code та лів сервер для звичайних проектів хтмл, цсс, джс , а для PHP є інший плагін PHP Server.

не хочеться лупити скріншоти і тому подібне, тому я додам з CodePen пару своїх прикладів) бо я початківець в программуванні і в мене є мета створити сайт з 3д графікою, бо мені то дуже цікаве та більш інформативне для користувача, а ті проекти про які можете почитати у мене в блозі були як практика і є саме для нього :)

Тож беріть на озброєння цей інструмент, бо він доступний для всіх, не потребує якогось серйозного софту і тому може буде використаний і виконаний будь ким за наявності стандартного браузеру завдяки якому ви це читаєте.

3д куб з фізикою в браузері за допомогою бібліотеки three js
3д “конструктор” з вашими текстурами ( нажаль неможна додати текстури за посланням)

Ось на базі цього я планую зробити щось серйозне )


Ось ще трохи посилань з прикладів які мені сподобалися та на буду розбиратися (насправді їх дуже там багато і всі вони варті уваги)
https://threejs.org/examples/#webgl_lights_physical
https://threejs.org/examples/#webgl_loader_gltf
https://threejs.org/examples/#webgl_loader_gltf_variants

https://threejs.org/examples/#webgl_materials_car
https://threejs.org/examples/#webgl_materials_bumpmap

Бажаю успіху та якнайшвидшої реалізаціх ваших ідей та мрій :)

Articoli su attività commerciali locali e persone interessanti:

Condividi le tue idee in una nuova pubblicazione.
Aspettiamo la tua longread!
Floksi Pet

Floksi Pet

@Floksipet

Сфінкси + программування :D

10Longread
1KViste
8Seguaci
Supporto
Su Drukarnia da allora 12 aprile 2024

Altro dall'autore

Potrebbe interessarti anche:

  • Apple патентує 3D-дисплеї

    В одному з недавніх патентів компанія пропонує використовувати дисплеї з мікролінзами, які змінюють зображений контент залежно від кута огляду користувача, створюючи тим самим ефект об'єму.

    Argomenti di questa lunga lettura:

    Технології
  • Зробив трекер друку для Klipper, який справді рахує кількість надрукованих об'єктів

    Автоматичний трекер для Klipper, який рахує надруковані об'єкти (не завдання) і логує їх у Google Таблиці. Працює через макроси G-code та Apps Script. Ідеально для тих, хто друкує багато схожих деталей і хоче автоматизувати облік.

    Argomenti di questa lunga lettura:

    3d Друк
  • Трохи про ігрову оптимізацію

    Публікація про оптимізацію ігор: як виявляти та усувати "вузькі місця" продуктивності (FPS, CPU, GPU, пам’ять), профілювання, оптимізацію рендерингу, моделей, текстур і шейдерів, зниження навантаження та покращення користувацького досвіду.

    Argomenti di questa lunga lettura:

    Gamedev

Commenti (7)

Дуже спамлять ці крипто “тємщики” в мене теж 1 залишив коментар, також без змісту. Напевно щоб їхній “тємки” або може профілі більше в пошукових системах розкручувалися.

Potrebbe interessarti anche:

  • Apple патентує 3D-дисплеї

    В одному з недавніх патентів компанія пропонує використовувати дисплеї з мікролінзами, які змінюють зображений контент залежно від кута огляду користувача, створюючи тим самим ефект об'єму.

    Argomenti di questa lunga lettura:

    Технології
  • Зробив трекер друку для Klipper, який справді рахує кількість надрукованих об'єктів

    Автоматичний трекер для Klipper, який рахує надруковані об'єкти (не завдання) і логує їх у Google Таблиці. Працює через макроси G-code та Apps Script. Ідеально для тих, хто друкує багато схожих деталей і хоче автоматизувати облік.

    Argomenti di questa lunga lettura:

    3d Друк
  • Трохи про ігрову оптимізацію

    Публікація про оптимізацію ігор: як виявляти та усувати "вузькі місця" продуктивності (FPS, CPU, GPU, пам’ять), профілювання, оптимізацію рендерингу, моделей, текстур і шейдерів, зниження навантаження та покращення користувацького досвіду.

    Argomenti di questa lunga lettura:

    Gamedev