不用外部模型文件，用 Claude 纯代码搓出 3D 丛林场景的实操指南

最近在尝试用 Claude 快速构建原型时发现一个很有意思的现象：它现在对 Three.js 的掌握程度已经到了可以用纯数学算法模拟环境的地步。很多人的习惯是让 AI 写代码，然后自己去下载 .gltf 或 .obj 模型文件导入，但其实完全可以跳过素材寻找阶段，直接让它用程序化生成（Procedural Generation）的方式在浏览器里“画”出一个 3D 场景。

我尝试让它构建一个可以第一视角行走的丛林小径，结果非常惊艳。它没有调用任何外部贴图，而是通过定义简单的几何体，配合随机分布函数，在一个纯 HTML 页面里模拟出了植被和光影。这种做法的核心在于将原本需要美术建模的工作，转化成了顶点坐标的数学计算。

如果你想复现这种效果，最关键的是要意识到，不能直接对 AI 说“给我一个森林”，因为那样它大概率会给你写一个加载外部模型的空壳代码。你得强制要求它使用“代码定义的几何体”。

在具体实现逻辑上，这里有几个关键的细节需要把控。首先是环境依赖，目前最稳妥的方案是引入 three 库。如果你是在本地开发，可以通过 npm install three 安装，然后运行 npm run dev 启动 Vite 等构建工具。

在核心代码实现上，Claude 采取的是一种“极简模拟法”：
第一步是定义基础几何体。它会使用 THREE.CylinderGeometry（圆柱体）来代替树干，而叶片则是通过随机扭曲的 THREE.SphereGeometry（球体）或平面来模拟。因为没有贴图，它会通过调整材质的颜色值，比如使用 #2d5a27（深绿）和 #556b2f（橄榄绿）来营造丛林的色彩基调。

第二步是处理随机分布。为了避免树木直接刷在玩家脸上，代码中需要写一个循环，在特定的 XZ 坐标范围内随机生成物体，但必须设置一个初始的“安全区”（例如半径 5 个单位的圆周内不生成物体），确保玩家在启动时处于空地。

第三步是氛围感的营造。这是纯代码场景最容易出戏的地方，但 Claude 聪明地加入了 THREE.Fog（雾化效果）。通过设置 new THREE.Fog(color, near, far)，让远处的物体逐渐没入雾色中，这样不仅掩盖了场景边缘的突兀感，还增加了空间的深度感。

最后是交互控制。它通过监听键盘事件，将 WASD 键位直接绑定到相机的 position 坐标偏移上。当你按下 'W' 时，相机的 Z 轴坐标随之改变，从而实现了在丛林中穿行的第一视角效果。

如果你想尝试，建议使用以下提示词方向：
“使用 Three.js 创建一个第一人称视角的可行走场景。要求：严禁使用任何外部 .gltf 或 .obj 模型，所有物体（如树木、草地）必须通过代码定义的几何体随机生成。必须加入 THREE.Fog 雾化效果以增加空间深度感，并实现 WASD 移动控制。”

这种工作流最大的优势在于极速迭代。你不需要在素材库里翻找几个小时去匹配风格，也不需要担心模型文件太大导致加载缓慢。只要对数学分布函数有基本的把控，纯代码驱动的 3D Demo 可以在几秒钟内生成并运行。对于需要快速验证想法的开发者来说，这比传统的建模流程高效得多。