程序化树木生成器（ThreeJS EZ-Tree 开源项目）

项目备份：

「19 EZ-Tree 程序化树木生成器」
/~67e63LxBCl~:/
链接：https://pan.quark.cn/s/a23230adf3ba

🌳 关于项目

EZ-Tree是一个功能强大的程序化树木生成器，拥有数十个可调参数。该项目由两部分组成：

1. 核心库- 独立的树木生成代码库，可以导入到您自己的应用程序中，动态生成树木

2. Web应用- 独立的Web应用程序，允许您在浏览器中创建树木并导出为 .PNG 或 .GLB 文件

✨ 主要特性

• 🎨完全可定制- 通过参数控制树木的各个方面

• 🌍多语言支持- 支持英语和中文界面

• 📦易于集成- 可作为npm包安装使用

• 🖼️多种导出格式- 支持PNG图片和GLB 3D模型导出

• ⚡实时预览- 在浏览器中实时查看树木生成效果

• 🎲随机种子- 使用种子确保可重复的树木生成

🌐 在线应用

访问官方网站体验：https://eztree.dev

📦 安装

npm install @dgreenheck/ez-tree

🚀 快速开始

基本使用

import { Tree } from '@dgreenheck/ez-tree'; ​ // 创建新实例 const tree = new Tree(); ​ // 设置参数 tree.options.seed = 12345; // 设置随机种子 tree.options.branch.levels = 3; // 分支层级 tree.options.branch.length[0] = 20; // 树干长度 ​ // 生成树木并添加到Three.js场景 tree.generate(); scene.add(tree);

使用预设

import { Tree, TreePreset } from '@dgreenheck/ez-tree'; ​ const tree = new Tree(); ​ // 加载预设 tree.loadPreset(TreePreset.AshMedium); ​ tree.generate(); scene.add(tree);

注意：每次修改树木参数后，必须调用generate()方法来重新生成几何体。

💻 本地运行

方法一：使用npm运行

# 安装依赖 npm install ​ # 运行应用 npm run app

应用将在 http://localhost:5173 启动

方法二：使用Docker

# 构建镜像 docker compose build ​ # 启动容器 docker compose up -d

🎯 可用脚本

命令	说明
npm run build:lib	构建核心库
npm run build:watch	监听模式构建库
npm run app	运行Web应用
npm run build:app	构建应用
npm run preview	预览构建结果

📚 树木参数详解

TreeOptions类定义了控制程序化树木生成的各种参数。每个属性都允许自定义树木的外观，包括树皮、分支和树叶。

🔧 通用属性

参数	类型	说明
seed	number	随机数生成的初始值，使用相同种子可生成一致的树木
type	TreeType	树木类型，可选值见TreeType枚举

🌲 树皮参数 (Bark)

bark对象控制树干的外观和属性。

参数	类型	说明
type	BarkType	树皮纹理类型，从BarkType枚举中选择
tint	number	应用于树皮的颜色色调，十六进制颜色值（如0xffffff）
flatShading	boolean	是否使用平面着色（true）或平滑着色（false）
textured	boolean	是否将纹理应用于树皮
textureScale.x	number	X轴方向的树皮纹理缩放比例
textureScale.y	number	Y轴方向的树皮纹理缩放比例

🌿 分支参数 (Branch)

branch对象定义树干和分支层级的参数。

参数	类型	说明
levels	number	递归分支层级数。0表示只有树干，更高的值添加更多分支
angle	object	子分支相对于父分支的生长角度（度），每个层级单独指定
children	object	每个层级的子分支数量，索引表示层级
force.direction	object	促使树木生长的外部方向力，向量对象{ x, y, z }
force.strength	number	外部力的强度
gnarliness	object	每个分支层级的扭曲或卷曲程度
length	object	每个层级分支的长度
radius	object	每个层级分支的半径（粗细）
sections	object	每个分支层级的长度段数，控制分支网格的分辨率
segments	object	组成每个分支的径向段数，值越高圆柱越平滑
start	object	子分支沿父分支开始形成的位置（0到1之间的分数）
taper	object	每个层级分支的锥度，0到1之间的值定义从基部到尖端的半径减小
twist	object	应用于每个分支层级的扭曲量

🍃 树叶参数 (Leaves)

leaves对象定义控制树叶外观和放置的属性。

参数	类型	说明
type	LeafType	树叶纹理类型，从LeafType枚举中选择
billboard	Billboard	树叶的渲染方式，Single或Double（单面或垂直双面）
angle	number	树叶相对于父分支的角度（度）
count	number	要生成的树叶数量
start	number	树叶开始沿分支生长的位置（0到1之间）
size	number	树叶的大小
sizeVariance	number	每个树叶实例的大小差异，使树叶看起来更自然
tint	number	应用于树叶的色调颜色，十六进制颜色值
alphaTest	number	树叶透明度的alpha阈值，控制树叶纹理的透明度

🏗️ 藤架参数 (Trellis)

trellis对象定义用于训练树木生长的藤架结构。

参数	类型	说明
enabled	boolean	是否启用藤架
visible	boolean	藤架是否可见
position	object	藤架的3D位置{ x, y, z }
width	number	藤架的宽度
height	number	藤架的高度
spacing	number	藤架线条之间的间距
force.strength	number	藤架对树枝的吸引力强度
force.maxDistance	number	藤架影响的最大距离
force.falloff	number	力的衰减系数
cylinderRadius	number	藤架圆柱的半径
color	number	藤架的颜色

🎥 相机参数 (Camera)

控制相机行为。

参数	类型	说明
autoRotate	boolean	相机是否自动旋转
rotateSpeed	number	自动旋转的速度

🌤️ 环境参数 (Environment)

控制场景环境。

参数	类型	说明
sunAngle	number	太阳的角度（0-360度）
grassCount	number	草的数量（0-25000）

🌐 多语言支持

项目现已支持中文界面！在应用右上角选择语言即可切换：

• English- 英语（默认）

• 中文- 简体中文

语言偏好会自动保存到本地存储，下次访问时自动应用。

🎨 导出功能

导出为PNG图片

在应用中点击"Export PNG"按钮，可以将当前树木渲染为高分辨率PNG图片。

导出为GLB 3D模型

点击"Export GLB"按钮，可以将树木导出为GLB格式的3D模型，可在其他3D软件中使用。

保存/加载预设

• Save Preset- 将当前树木配置保存为JSON文件

• Load Preset- 从JSON文件加载树木配置

🛠️ 技术栈

• Three.js- 3D图形库

• Vite- 构建工具

• TypeScript- 类型系统

• JavaScript- 核心逻辑

📄 许可证

本项目采用开源许可证。详见 LICENSE 文件。

👨‍💻 作者

Daniel Greenheck

• GitHub: @dgreenheck

• YouTube: Daniel Greenheck

• Twitter: @dangreenheck

🤝 贡献

欢迎贡献！如果您想为项目做出贡献：

1. Fork 本仓库

2. 创建特性分支 (git checkout -b feature/AmazingFeature)

3. 提交更改 (git commit -m 'Add some AmazingFeature')

4. 推送到分支 (git push origin feature/AmazingFeature)

5. 开启 Pull Request

📮 反馈与支持

如果您有任何问题或建议，请：

• 提交 Issue

• 发起 Discussion

• 关注作者的 YouTube 频道获取最新教程