183 ·GitHub
Что это?
Clay Safari — интерактивный трёхмерный мир для детей в стиле пластилиновой анимации, двуязычный (китайский/английский): вы гуляете по саванне, построенной на Three.js с моделями, созданными скриптами Blender, кликаете по 10 пластилиновым животным и 7 предметам и слышите их названия и звуки на обоих языках.
Clay Safari — интерактивный трёхмерный мир для детей в стиле пластилиновой анимации, двуязычный (китайский/английский): вы гуляете по саванне, построенной на Three.js с моделями, созданными скриптами Blender, кликаете по 10 пластилиновым животным и 7 предметам и слышите их названия и звуки на обоих языках.Это игра или обучающее приложение?Это браузерный двуязычный обучающий опыт, а не традиционная игра: клик по животному запускает анимацию, показывает карточку со словом, озвучивает английское название, воспроизводит крик животного, затем озвучивает китайское название, а собрав все 10 животных, вы открываете праздничную анимацию.
Это браузерный двуязычный обучающий опыт, а не традиционная игра: клик по животному запускает анимацию, показывает карточку со словом, озвучивает английское название, воспроизводит крик животного, затем озвучивает китайское название, а собрав все 10 животных, вы открываете праздничную анимацию.Как запустить его локально?Склонируйте репозиторий и выполните npm run dev с установленным Node.js 20.19+ или 22.12+. По умолчанию dev-сервер доступен только локально, поэтому добавьте --host, если хотите проверить его с телефона в той же сети.
Склонируйте репозиторий и выполните npm run dev с установленным Node.js 20.19+ или 22.12+. По умолчанию dev-сервер доступен только локально, поэтому добавьте --host, если хотите проверить его с телефона в той же сети.Нужен ли установленный Blender для запуска?Нет — 3D-модели уже экспортированы в public/models/, так что запускать и играть можно без установки Blender; Blender нужен, только если хотите заново сгенерировать модели животных.
Нет — 3D-модели уже экспортированы в public/models/, так что запускать и играть можно без установки Blender; Blender нужен, только если хотите заново сгенерировать модели животных.Нужно ли интернет-соединение для игры?Нет, он полностью работает офлайн — модели генерируются скриптами, текстуры создаются шумом, крики животных синтезируются через Web Audio API, и никакие внешние файлы графики или аудио не загружаются.
Нет, он полностью работает офлайн — модели генерируются скриптами, текстуры создаются шумом, крики животных синтезируются через Web Audio API, и никакие внешние файлы графики или аудио не загружаются.Работает ли он на телефонах, а не только на компьютере?Да — на компьютере используются перемещение на WASD, перетаскивание мышью и прокрутка, а на мобильных устройствах — виртуальный джойстик плюс перетаскивание касанием и масштабирование щипком для тех же действий.
Да — на компьютере используются перемещение на WASD, перетаскивание мышью и прокрутка, а на мобильных устройствах — виртуальный джойстик плюс перетаскивание касанием и масштабирование щипком для тех же действий.Как работает автоматическая экскурсия?Клик по иконке робота (или нажатие T) запускает автоматический обход по маршруту исследования, использующий поиск пути A*, чтобы огибать реку и переходить по мосту.
Клик по иконке робота (или нажатие T) запускает автоматический обход по маршруту исследования, использующий поиск пути A*, чтобы огибать реку и переходить по мосту.Благодаря чему в проекте «ноль файлов ассетов»?Внешних графических или аудиоассетов нет вовсе: модели животных создаются Python-скриптом Blender, пластилиноподобные текстуры — фрактальным шумом, звуки — синтезированными генераторами и фильтрами, а произносимые названия — Web Speech API.
Внешних графических или аудиоассетов нет вовсе: модели животных создаются Python-скриптом Blender, пластилиноподобные текстуры — фрактальным шумом, звуки — синтезированными генераторами и фильтрами, а произносимые названия — Web Speech API.Как добавить новое животное?Напишите функцию buildXxx() в blender/build_animals.py, которая закрепляет подвижные части за Empty-объектами через pivot(), зарегистрируйте её в BUILDERS и выполните npm run models, затем добавьте запись в src/data.js, реакции на простой/клик в src/animals.js и вызов в src/audio.js.
Напишите функцию buildXxx() в blender/build_animals.py, которая закрепляет подвижные части за Empty-объектами через pivot(), зарегистрируйте её в BUILDERS и выполните npm run models, затем добавьте запись в src/data.js, реакции на простой/клик в src/animals.js и вызов в src/audio.js.Как у него с производительностью?Рендеринг на компьютере — это около 600 draw call и 900 тысяч треугольников с теневыми картами 4096px и блумом, стабильные 60fps на Mac с Apple Silicon; на мобильных устройствах постобработка автоматически отключается, а разрешение теней снижается для плавности.
Рендеринг на компьютере — это около 600 draw call и 900 тысяч треугольников с теневыми картами 4096px и блумом, стабильные 60fps на Mac с Apple Silicon; на мобильных устройствах постобработка автоматически отключается, а разрешение теней снижается для плавности.What are similar projects?RhineLabUI, sylva, model-x-studio, vistep, LinearAbilityExtThreeJS, threejs-architecture-effects, natural-disasters, Jelly-Baby
RhineLabUI, sylva, model-x-studio, vistep, LinearAbilityExtThreeJS, threejs-architecture-effects, natural-disasters, Jelly-BabyWhich topics is it in?webaudio, gltf, blender, procedural-generation, bilingual, educational, shaders, zero-dependency, speech-synthesis, cloudflare-workers, interactive, threejs
webaudio, gltf, blender, procedural-generation, bilingual, educational, shaders, zero-dependency, speech-synthesis, cloudflare-workers, interactive, threejs