Автор: The Bugged Dev
Попробовать онлайн О проекте
Anatomy Atelier объединяет сердце, мозг, лёгкие, печень, почки, глаз, кишечник, поджелудочную железу и кожу в доступную для поиска библиотеку из девяти органов. Каждый раздел сочетает вращаемый и масштабируемый 3D-образец с интерактивными точками строения, ключевыми фактами и учебными карточками, а также инструментами для срезов, слоёв, изоляции и сравнения органов.
Исследование не ограничивается моделью: доступны уроки, простые анимированные иллюстрации и тесты. GLTFLoader и декодер Meshopt загружают каждый ассет, а кэш трёх органов, предварительная загрузка и рендеринг по требованию обеспечивают быстрые переключения.
Ключевые моменты
- Ищите и переключайтесь между девятью органами: сердцем, мозгом, лёгкими, печенью, почками, глазом, кишечником, поджелудочной железой и кожей.
- Перетаскивайте для вращения, прокручивайте для масштабирования и выбирайте интерактивные точки с пояснениями о строении; для непрерывного обзора можно оставить автовращение включённым.
- Используйте срезы для изучения внутреннего строения, переключайтесь на каркасное отображение слоёв или приглушайте подставку и контактную тень в режиме изоляции; режим сравнения показывает два органа рядом.
- Переходите от фактов об органах и учебных карточек к урокам и тестам, дополняя свободное исследование направленным обучением.
Технический разбор
3D-ассеты · библиотека органов Tripo
Девять органов поставляются отдельными GLB-ассетами, узлы сцены и материалы которых содержат идентификаторы Tripo. GLTFLoader вместе с декодером Meshopt загружает, масштабирует и центрирует каждый орган в едином пространстве просмотра, чтобы интерактивные точки и инструменты просмотра использовали общую систему координат.
Взаимодействие с просмотрщиком · управление и интерактивные точки в экранных координатах
OrbitControls управляет вращением, масштабированием и автовращением. Интерактивные точки используют проекцию в экранные координаты для выбора с помощью указателя, а проверки буфера глубины и ориентации управляют видимостью без повторных трассировок лучей по мешу. Плоскости отсечения создают срезы, переключатель каркаса показывает слои, а режим изоляции приглушает подставку и контактную тень; режим сравнения размещает два органа рядом и добавляет сведения о функции и масштабе текущего органа.
Стратегия загрузки · кэш трёх моделей и предварительная загрузка
Менеджер ассетов хранит три последних использованных органа и повторно использует уже выполняющиеся запросы загрузки. При наведении или фокусе на органе запускается низкоприоритетная предварительная загрузка GLB, а при переключении органа связанные иллюстрации также заранее помещаются в кэш браузера.
Рендеринг и обучение · обновления по требованию
Постоянный цикл анимационных кадров вызывает рендерер только при взаимодействии, анимации или изменении состояния, поэтому неподвижная сцена не перерисовывается непрерывно. React управляет поиском, выбором органов, сравнением, уроками и тестами, а GSAP добавляет лёгкую анимацию появления при смене выбранного содержимого.
