Как добавить 3D в Astro с помощью TresJS

Нейроперевод Как добавить 3D в Astro с помощью TresJS Описание На прошлой неделе команда Astro выпустила долгожданную версию 3.0 с новыми интересными возможностями, такими как: Переходы между представлениями (View transitions) Улучшенная оптимизация изображений Повышенная производительность рендеринга Улучшения SSR для Serverless-архитектуры А также они представили Хьюстона — самого очаровательного питомца в мире Open Source! Мне стало интересно, насколько легко будет добавить 3D-графику с использованием библиотеки TresJS (рендерер для Vue) в Astro. Результат? Меньше чем за пять минут я добавил 3D-сцену в шаблон блога Astro, используя интеграцию @astrojs/vue и Tres. В этом уроке я покажу, как начать работу с шаблоном блога Astro, установить интеграцию Vue, добавить TresJS и отрисовать 3D-сцену. В дополнение, я расскажу, как я создал 3D-модель Хьюстона и импортировал её в сцену, воссоздав эффект градиента с помощью GLSL-шейдеров. Ресурсы Содержание видео: 00:00 - Введение 00:23 - Новые возможности Astro v3 01:11 - Создание нового сайта Astro через CLI 02:52 - Шаблон блога Astro 04:27 - Установка TresJS 05:25 - Добавление Vue в Astro 07:28 - Использование TresCanvas и гидратация с client:load 11:30 - Добавление 3D-объекта 12:51 - Добавление частиц звёзд 14:01 - Добавление модели Houston (.glb) 21:37 - Добавление источников света 23:49 - (Опционально) Добавление цветового градиента к модели Houston с помощью шейдеров 34:45 - Обзор 35:13 - Заключение