◀ VibeCruiser

huaguoshan

A free shader demo — play it in your browser, no install. 《西游记》花果山 · 齐天大圣故里 —— 纯程序化生成的 Three.js 实时 3D 场景,无外部模型与贴图,整座岛在浏览器里算出来

by @mizzlelover · mizzlelover/huaguoshan on GitHubLANG JavaScriptHOSTED ON MIZZLELOVER.GITHUB.IOUPDATED 1 Oct 2026

Vote and save it — continue with GitHub or sign in free

Made this, @mizzlelover? See how many people played it → or use email

Best with a keyboard.

▶ Play full screen ▲ Vote with GitHub ▲ Vote with email

GitHub asks to share your profile and email with us. We never post anything.

Open the live demo Source on GitHub

From the README

一个基于 Three.js 的实时 3D 场景:青绿山水配低多边形的造型,整座岛在浏览器里当场算出来——地形、岩石、海水、云海、草木、猴群,没有一个外部模型文件,也没有一张贴图,断网照样跑。

Three.js 以 ES Module 引入,必须经 HTTP 打开(file:// 下浏览器不允许加载模块):

HUD 里有罗盘条、小地图、模式标签,以及坐标 / 高度 / 时刻读数。

植被共 2023 个实例、约 26 万顶点;全场景约 30.5 万三角形,同类植被各由一个 InstancedMesh 承载。

terrain.js 用五层八度噪声叠上山脊算子烘出高度场,并导出 WORLD、RAVINE、GORGE_Z 和 SITE。水帘洞、瀑布、铁板桥、山门、蟠桃林的坐标全部以 SITE 为准——地形一改,山上的东西跟着挪,不会各说各话。

Rayleigh + Mie 单次散射,配一套按时刻插值的调色板:日出、正午、黄昏、月夜。按 N 切昼夜循环时,天光、雾色、水色、云色是一起走的,不会各变各的。

云海是一片跟随相机的巨型平面,着色器里按 length(vXZ) 做 smoothstep 淡出,俯视时再把厚度压一层,于是它只出现在岛外的远海,不会糊在山上切出白斑。

Read the full README on GitHub →

Built something like this? Submit your vibe — free account, takes a minute. How listing works.

More like this

Made this?

Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.

Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.

On VibeCruiser

How listing, the badge and claiming work →