用Three.js做的薄雾密林:数千棵树与海量实例化草丛

GPT-6 Astra花数小时做出实时Three.js森林,含自定义着色器、数百万草丛、蕨类和蜿蜒小径。

在线演示

Claude Code + Three.js(仅代码)Wandy 2
真实模型 · 360°两者都基于同一张照片:左边是 Claude Code(Opus 5.5)用 Three.js 代码建模的一次未经修改的运行结果;右边是 Wandy 2。

创建精细的 3D 模型

单靠代码只能做出简单的形状。Wandy 2 能用一张照片生成带纹理的 3D 模型,直接用在同一个场景里。

Wandy3D 制作说明

作者没有公开提示词,因此我们写下了复现这个作品的方法。

Build a highly detailed procedural forest in Three.js that the viewer explores from a first-person camera. Fill a large terrain with thousands of individual trees of varied shapes, millions of instanced grass clumps and tens of thousands of ferns, plus moss-covered logs, small white flowers and a worn dirt path winding between the trunks. Use custom GLSL shaders for wind-swayed grass and foliage, soft misty fog that fades distant trees into pale green haze, and filtered light coming through the canopy. Keep the palette natural: deep greens, brown bark, warm earth tones and a bright overcast sky. Use instancing and level of detail so it runs smoothly in a browser. Let the camera walk along the path and tilt up to show branches and leaves against the sky. Done means a web page that loads and runs in real time with convincing density and depth.

如何使用这条提示词

  1. 在你的编程智能体里把构建说明交给GPT-6 Astra,要求生成Three.js网页。

  2. 修改生态类型、树木数量、雾浓度和光照,做成松林、丛林或秋林。

  3. 打开页面检查性能,卡顿时让它优化实例化或细节层级。

原帖你是作者吗? 请联系我们修改或删除此页面