Tree.js

使用Three.js构建的程序化树生成器。提供30多个可调参数,并支持导出为.glb格式。

在线演示

https://dgreenheck.github.io/tree-js/

安装

树生成代码作为一个npm包发布,可以导入到你自己的项目中使用。

npm i @dgreenheck/tree-js

使用

// 创建新实例
const tree = new Tree();

// 设置参数
tree.options.trunk.length = 20;
tree.options.branch.levels = 3;

// 生成树并添加到场景
tree.generate();
scene.add(tree);

每当更改树的参数时,必须调用 generate() 来重新生成几何体。

更多信息,请参见演示应用程序,了解如何创建一棵树。

演示

演示应用程序是一个Three.js应用程序,允许您实时调整树的参数。它还提供了导出生成的网格为 .glb 文件以及当前视图的 .png 导出功能,用于2D应用程序。

在本地运行演示

npm install
npm run build:npm
npm run demo

使用Docker运行演示

docker compose build
docker compose up -d

参数

• seed - 随机数生成器的种子

主干

• color - 树干的颜色
• flatShading - 使用面法线进行着色,而不是顶点法线
• length - 基础树干的长度
• radius - 树干的起始半径

分支

• levels - 分支递归的层数(保持在5以下)
• children - 子分支的数量
• start - 定义子分支开始形成在父分支上的位置。值为0.6意味着子分支可以从父分支60%的位置开始形成
• stop - 定义子分支停止形成在父分支上的位置。值为0.9意味着子分支在父分支90%的位置停止形成
• angle - 子分支与父分支的角度(弧度)
• angleVariance - angle的变化量(弧度)
• lengthVariance - 分支长度的变化量
• lengthMultiplier - 子分支的长度相对于父分支的比例
• radiusMultiplier - 子分支的半径相对于父分支的比例
• taper - 分支末端的半径相对于起始部分的比例
• gnarliness - 添加到每个部分方向的随机角度的最大振幅
• twist - 沿垂直轴的扭转量

外部力

• direction - 影响树的生长方向
• strength - 太阳影响的强度

几何

• sections - 组成此分支的部分数量
• segments - 分支周围的面数
• lengthVariance - 名义部分长度的百分比变化
• radiusVariance - 名义部分半径的百分比变化
• randomization - 应用于顶点的随机化因子

叶子

• style - 叶子广告牌样式(单个或双层)
• type - 叶子类型(白蜡、白杨或橡树)
• color - 叶子颜色
• count - 每个分支上的叶子数量
• size - 叶子纹理的大小
• sizeVariance - 不同分支上的叶子大小变化