genshin-world

Genshin Impact's world as a fan recreation: the catalogue of regions and areas, each region's authored data, and the TresJS components that build it on genshin-engine.
649 23
Install
npm install genshin-world
Latest Version:4.3.3
Vue:3
License:Apache-2.0
Last Updated:Oct 23, 2026
Links: GitHub  ·  npm
Maintainer: q16solver

genshin-world

Apache-2.0 licensed NPM version NPM downloads NPM Unpacked Size (with version)

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

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

@tresjs/core

Declarative ThreeJS using Vue Components

1,355,627 3,774
@tresjs/cientos

Collection of useful helpers and fully functional, ready-made abstractions for T...

993,536 3,774
@tresjs/post-processing

Post-processing library for TresJS

386,088 3,771
vue-gl

Vue.js components rendering 3D graphics reactively via three.js

8,863 682
@tresjs/rapier

TresJs physics support, powered by rapier

2,066 3,772

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