sylva README

The project's README from github.com/MengTo/sylva. As one markdown file: README.md.

Sylva

Sylva is an interactive Three.js landscape study: a procedural, moss-covered root grows through an editorial conservation hero and reacts to the pointer as if it were alive.

View the live experience

Sylva's living moss landscape and editorial interface

What is inside

How it is made

The complete page lives in index.html. It uses a vendored Three.js r149 build to create the root, moss, undergrowth, flowers, moths, pointer spray, light, and camera movement at runtime. The same seeded noise grows the same landscape on every load; no model file or pre-rendered moss plate is downloaded.

The interface is plain HTML and CSS around that scene. Pointer parallax, the navigation dock, the card reveals, and the WebGL renderer share one animation loop. The two liquid-metal controls remain isolated in sandboxed iframes so each control can own its WebGL2 state without leaking into the page.

Everything required at runtime is included in this repository. The page makes no external network request after it loads.

Run locally

Serve the repository root over HTTP:

python3 -m http.server 4173 --bind 127.0.0.1

Then visit http://127.0.0.1:4173/.

There is no install or build step. A browser with WebGL2 support is recommended; the page retains its layout and core content if the main Three.js scene cannot start.

Project structure

sylva/
├── index.html                  # Complete experience
├── sylva-assets/
│   ├── three.min.js             # Vendored Three.js r149 runtime
│   ├── lexend-latin.woff2       # Local Lexend variable font
│   ├── liquid-metal-explore.html
│   ├── liquid-metal-play.html
│   └── card-*.webp               # Field-note imagery
├── assets/                     # README preview
├── licenses/                   # Third-party license texts
└── README.md

With me

Design and attribution

The layout began as an independent study of an editorial conservation composition by Daniel Snows. Sylva preserves the broad compositional idea while replacing its foreground artwork with original procedural geometry, shaders, motion, and interactions. It is not affiliated with or endorsed by the original designer.

The local project notes record Higgsfield image generation and compositing for the supporting imagery. Three.js r149 is distributed under the MIT License, and Lexend is distributed under the SIL Open Font License 1.1; their license texts are included in licenses/.

No license is granted for reuse or redistribution of the Sylva code, design, or artwork. The bundled third-party components remain under their respective licenses.

sylva (MengTo/sylva)

Searching Database…

348 ·GitHub
这是什么?Sylva 是一个交互式的 Three.js 景观习作:一条程序化生成、覆盖苔藓的根穿过一个编辑风格的生态保护场景,并像活物一样对指针做出反应。
这是可复用的库,还是只是一个独立页面?它是一个独立、自包含的网页,不是你导入的库——整个体验都在一个 index.html 里,基于内置(vendored)的 Three.js r149 构建。
怎么在本地运行它?只需用任意 HTTP 服务器托管仓库根目录并打开页面——没有安装步骤,也没有构建流水线。
除了浏览器还需要什么?只需要一个支持 WebGL2 的浏览器;即使 Three.js 场景无法启动,页面仍会保留布局和核心内容。
苔藓景观每次访问都会随机不同吗?不会——它是确定性的:每次加载都由相同的种子噪声重新生成完全相同的根、苔藓和林下植被,也不会下载任何预渲染的苔藓贴图或 3D 模型。
页面加载后还会联系任何服务器吗?不会——运行时所需的全部几何体、噪声和图像都随仓库提供,页面加载后不会发出任何外部网络请求。
我可以复用代码、设计或美术吗?不可以——Sylva 自身的代码、设计和美术未授权用于复用或再分发,不过内置的 Three.js(MIT)和 Lexend 字体(OFL)保留各自的开源许可证。
我移动指针时苔藓会发生什么?当指针划过景观时,苔藓会在光标周围分开,并释放出一小段花粉轨迹,动画与场景的其他部分在同一个循环中进行。
Explore 和 Play 按钮属于主 3D 场景吗?不属于,每个液态金属按钮都在自己隔离的 WebGL2 iframe 中运行,因此它的着色器状态不会泄漏进主页面的渲染器。
它实际渲染了多少苔藓?在桌面上最多渲染 250,000 个实例化的苔藓叶片,由扫掠管状几何体加上递归分枝、蕨类、花朵和粒子构成。
最初的构图创意来自哪里?这一布局最初是对设计师 Daniel Snows 一幅编辑风格生态保护构图的独立研究;Sylva 把前景美术作品换成了原创的程序化几何与动效,并与原设计师没有任何关联。
Creator
MengTo
Size
1.8 MB
Stars
348
Updated
CommitAug 18
Age
1mo
Commits · 90 Days