Добавьте 3D на свой сайт Nuxt с помощью ThreeJS скачать в хорошем качестве

Добавьте 3D на свой сайт Nuxt с помощью ThreeJS

ОБНОВЛЕНИЕ 🎉 Мы только что запустили официальный модуль TresJS Nuxt для бесшовной интеграции 😊 Посмотрите это новое видео, чтобы узнать, как им пользоваться:    • TresJS - Add 3D to your nuxt app using the...   Вы когда-нибудь задумывались, как веб-сайты добавляют эти красивые 3D-эффекты? Знаете ли вы, что это можно сделать с помощью Nuxt и ThreeJS? Этот урок дополняет мой доклад @Nuxtnation в ноябре прошлого года и более подробно объясняет, как: создать 3D-сцену с помощью ThreeJS; создать рендер на основе элемента холста с помощью шаблонов Refs; сделать сцену адаптивной; рендерить сцену только на клиенте с помощью Nuxt; добавить модель GLTF; использовать компонуемые элементы; И многое другое. Ресурсы Ссылка на репозиторий: https://github.com/alvarosabu/nuxt-th... ThreeJS: https://threejs.org/ Nuxt v3: https://nuxt.com/ ---- Наши спонсоры Встречайте Storyblok (не Storybook, это другое дело). Первая в мире headless CMS, которая подходит как разработчикам, так и бизнес-пользователям. Должен предупредить вас: начав использовать её, вы больше никогда не вернётесь к другим CMS. Попробуйте её по ссылке: https://t.co/aaEZxcPC4W 😜 00:00 - Вступление 01:18 - Что мы будем создавать? 01:56 — Создание приложения Nuxt 02:44 — Базовая настройка 04:51 — ThreeJS 06:38 — Установка ThreeJS 07:02 — Визуальное описание 3D-сцены 08:25 — TheExperience.vue 10:06 — Добавление камеры и сферы 14:08 — Шаблон рендерера и холста (Ref) 19:54 — Настройка рендерера по размеру окна 21:58 — Nuxt ClientOnly 23:57 — useWindowSize 27:49 — Цикл рендеринга 31:51 — Добавление модели GLTF 41:46 — Использование компонуемых объектов 46:51 — Заключение