一片可以在里面四处走走的 three.js 森林，就在这个页面里：起伏的山坡、自己拐着弯往下淌的小溪、迎风侧身的草和树叶，还有在花丛上方飘来飘去的蝴蝶。红裙子的小姑娘在水边等着。在地面任意位置点一下，她就走过去——她不再按固定路线绕圈了，你指哪儿她去哪儿。免费，什么都不用装。
左键点地面走过去 · 右键拖动转视角 · 滚轮缩放
在你动手之前，镜头会自己慢慢环绕；第一次点击或拖动之后，控制权就完全交给你了。
地形。地面是一张 240 × 240 的网格，每个顶点的高度都由同一个高度函数决定：几道相互叠加的正弦波形成起伏的山坡，小溪流经的地方挖出一道河谷，两岸被压平，岸边还微微隆起一道边沿。每一根草、每一块石头、每一步脚印都由这个函数来定位，所以没有东西悬空，也没有东西陷进地里。
小溪。一条曲线蜿蜒穿过河谷，水面就是沿着它铺开的一条带子。它每一帧都在泛起涟漪，用的是物理材质，透明且会折射，水下的卵石和河床会随之弯折。十条小鱼在水流里上下游动，不时甩一甩尾巴。
草与树。两岸铺满了大约 25,000 根独立的草叶，每一根都有收尖、弯曲、各自的色调，并随风摇摆。一棵大树和六棵小树各自挂着成千上万张叶片卡，在同一阵风里摇曳；更远处，一圈颜色更深的针叶树隐入雾中。
小生灵。九十朵六种颜色的花点缀着草地，六只蝴蝶在上方慢悠悠地绕圈，大树上不断有叶子飘落，空气里还悬浮着花粉微粒。
光线。低垂的黄昏太阳挂在地平线上方十六度，天空采用基于物理的模型，投下柔和的阴影，阳光穿过树冠形成一道道光束。云在头顶缓缓飘过，再加上轻柔的辉光和调色，画面就完整了。
森林漫步是一个跑在 WebGL 2 上的 three.js 单场景，没有下载任何模型或图片贴图——页面打开时，所有网格和贴图都由代码生成。草和树叶是实例化网格（InstancedMesh），在标准材质的顶点着色器里补上几行代码让它们随风摆动，对地形做一次射线检测把你的点击变成目的地，每一帧画面在显示之前还要经过辉光和调色两道后期处理。
我们把整个制作过程写成了一篇文章，附真实源码片段：我们如何用 three.js 做出一片可以漫步的 3D 森林。
免费。森林漫步完全免费，直接在浏览器里运行，不用下载、不用安装，也不用注册。
能，任何支持 WebGL 2 的较新手机浏览器都可以。点一下地面让她走过去，单指拖动环绕视角，双指捏合缩放。这个场景比较吃性能，老手机上帧率可能会低一些。
左键点地面上的一个位置，她就走过去。右键拖动或左键拖动都能绕着她转视角；滚轮或双指捏合可以从树冠高度一直推近到花丛。拖动永远不会让她走动，只有短促、干净的一次单击才算指路。
three.js（r160），运行在 WebGL 2 上。没有下载任何 3D 模型或图片贴图：地形、树、草、水、角色和所有贴图都是页面加载时用代码生成的。具体做法我们写在了我们如何用 three.js 做出一片可以漫步的 3D 森林里。
这个场景每一帧要画大约 25,000 根草叶和两万多片叶片卡，还叠加了柔和阴影、透明折射水面、辉光和调色。较老的显卡或集成显卡可能吃不消。退出全屏或把浏览器窗口调小会有帮助，因为要画的像素少了。
欢迎随便玩、分享链接。复制、嵌入或商用其代码与美术资产需要书面许可；请看下方的版权与使用，或发邮件到 service@shengyugames.com。
《森林漫步》的场景、美术、动画与源代码 © 2026 胜遇工作室（ShengyuStudio），保留所有权利。
欢迎随便玩、随手把链接分享给朋友。但未经书面许可，请勿复制、转载或二次分发本页的代码与美术资产，也请勿用于任何商业用途——包括嵌入其他网站、打包进应用，或作为商品的一部分出售。
需要商用授权、素材授权或者想聊聊合作，发邮件到 service@shengyugames.com 就行，我们很好说话。
本场景基于开源库 three.js 构建，遵循 MIT 协议，其版权归 three.js 各自作者所有——许可证全文。上述权利声明不及于该开源部分。