genshin-world
| Install | |
|---|---|
npm install genshin-world |
|
| Latest Version: | 4.3.3 |
| Vue: | 3 |
| License: | Apache-2.0 |
| Last Updated: | Oct 23, 2026 |
| Links: | GitHub · npm |
genshin-world
Genshin Impact's world, rebuilt as an unofficial, non-commercial fan work on genshin-engine and not affiliated with HoYoverse. It holds everything that is the game's rather than any engine's:
- the catalogue of regions, areas and subareas;
- each region's authored data: its heights, colours, look and landmarks;
- the TresJS components and composables that build all of it;
- the game's screens — its opening's splashes, login screen and startup loading — built from
genshin-interface's pieces.
It ships no image, model or sound from the game: every mesh, texture and shader is generated by code, and each mark on a screen is a vector path traced from the game's own or taken from a published vector of it.
Table of Contents
- 🚀 Getting Started
- 📖 Documentation
- ⚖️ License
🚀 Getting Started
pnpm i genshin-world genshin-engine genshin-interface @esposter/shared @tresjs/core @vueuse/core three vue zod
Mount WorldScreen, which brings its own canvas, and pass in only what your bundler and server decide, and load the screens' styles once:
<script setup lang="ts">
import { WorldScreen } from "genshin-world";
import TerrainTileWorker from "genshin-world/terrainTileWorker?worker";
import "genshin-interface/style.css";
import "genshin-world/style.css";
</script>
<template>
<WorldScreen
:create-terrain-worker="() => new TerrainTileWorker()"
:is-tuning="isDevelopment || undefined"
:quality-tier
game-data-base-url="https://your-host.example/game-data"
region-data-base-url="genshin"
/>
</template>
Region data lives in src/data/regions/<region>.json, and your server serves it at the base URL, so a region is fetched as the camera comes within reach and released as it leaves.
The game's data is not bundled. Every record the world reads — the opening's title logo and login screen, the world's ground, catalogue and animals, the game's tables and words, the character profiles and the book bodies — is fetched from game-data-base-url, which GameOpening takes as WorldScreen does, and every reader the package exports (readGameData, readStatTables and the rest) takes the same base as its first argument. Your host must serve every object and index entry that the package's gameDataLock.json names, each as <base>/<sha256>.json, with CORS for your page's origin. Esposter's own accounts admit only Esposter's origins, so another host must publish its own copy.
📖 Documentation
We highly recommend you take a look at the documentation to level up. How each screen is matched to the game is described on the parity page.
⚖️ License
This project is licensed under the Apache-2.0 license.
Related Packages
Collection of useful helpers and fully functional, ready-made abstractions for T...
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 4.3.3 | ^3.5.44 | Apache-2.0 | |
| 4.3.1 | ^3.5.44 | Apache-2.0 | |
| 4.2.0 | ^3.5.44 | Apache-2.0 | |
| 4.1.2 | ^3.5.44 | Apache-2.0 | |
| 4.1.1 | ^3.5.44 | Apache-2.0 | |
| 4.1.0 | ^3.5.44 | Apache-2.0 | |
| 4.0.0 | ^3.5.43 | Apache-2.0 | |
| 3.9.0 | ^3.5.43 | Apache-2.0 | |
| 3.8.1 | ^3.5.43 | Apache-2.0 | |
| 3.7.0 | ^3.5.43 | Apache-2.0 |