| ---
|
| title: I Ching 64 Hexagrams 易經六十四卦
|
| emoji: ☯️
|
| colorFrom: yellow
|
| colorTo: indigo
|
| sdk: static
|
| app_file: index.html
|
| pinned: false
|
| license: mit
|
| ---
|
|
|
| # 易經六十四卦 · I Ching 64 Hexagrams
|
|
|
| An interactive 3D exploration of the 64 hexagrams of the *Book of Changes* (易經 / *I Ching*),
|
| built with [three.js](https://threejs.org/). Click any hexagram floating in the ring to read its
|
| meaning in both **中文** and **English**.
|
|
|
| ## Features
|
|
|
| - 🌀 **3D interactive ring** of all 64 hexagrams, orbit with your mouse / touch.
|
| - 🖱️ **Click a hexagram** to open a detailed panel with its lines, trigrams and interpretation.
|
| - 🌏 **Bilingual** — toggle between Chinese (中文) and English at any time.
|
| - 🔍 **Search** by number, Chinese name, pinyin or English name.
|
| - ✨ Pure static site — no build step, no server.
|
|
|
| ## Run locally
|
|
|
| Because the app uses ES modules, open it through a small local server rather than `file://`:
|
|
|
| ```bash
|
| # Python
|
| python -m http.server 8000
|
| # then visit http://localhost:8000
|
| ```
|
|
|
| ## Deploy to Hugging Face Spaces
|
|
|
| 1. Create a new **Space** and choose **Static** as the SDK.
|
| 2. Upload all files (`index.html`, `css/`, `js/`) keeping the folder structure.
|
| 3. The front matter at the top of this `README.md` tells the Space to serve `index.html`.
|
|
|
| ## Structure
|
|
|
| ```
|
| index.html Entry point + import map for three.js
|
| css/style.css UI styling
|
| js/hexagrams.js Data for all 64 hexagrams (bilingual)
|
| js/main.js three.js scene, layout and interaction
|
| ```
|
|
|
| The interpretations are concise summaries intended for study and reflection, not divination advice.
|
|
|
