一个超级真实的Three.js树🌲生成器插件

答案answer2025-11-18 12:06

前言

分享一个基于Three.js封装的树生成器插件，可以实现创建不同类型且渲染效果真实的3D树

说实话，第一次在这个插件官网 看到这个效果时我一度以为这只是一个视频，树的内容不仅仅是动态的而且整体的渲染效果也十分真实。

在three.js中使用起来也是非常的简单的仅仅需几行代码就可以搞定，下面给大家简单的介绍一下。

安装

通过 npm/pnpm 安装到项目本地即可

js 复制代码

npm i @dgreenheck/ez-tree

pnpm add @dgreenheck/ez-tree

使用

使用起来也是非常简单的，只需要将插件import 引入然后在 new 实例化出来在添加到场景中就可以了

最后在一个requestAnimationFrame 动画函数中更新树的内容就行了

js 复制代码

import { Tree } from '@dgreenheck/ez-tree';

createTree(){

      const tree = new Tree();
      tree.generate();
      // 设置一下位置
      tree.position.set(0, 0, 0);
      // 设置一下大小缩放
      tree.scale.set(0.1, 0.1, 0.1);
      // 添加到场景中
      this.scene.add(tree);
      
}

  sceneAnimation(): void {
    // 确保动画循环持续进行
    this.renderAnimation = requestAnimationFrame(() => this.sceneAnimation());

      // 更新时钟
      const elapsedTime = this.clock.getElapsedTime();


      // 更新控制器 如果当前是第一人称控制器则不更新
      if (!this.pointerLockControls) {
        this.controls.update();
      }

      // 更新 Tree 动态效果（风动效果等）
      if (this.tree) {
        this.tree.update(elapsedTime);
      }
      // 渲染场景
      this.renderer.render(this.scene, this.camera);
  }

本地项目效果

因为本地项目对光照等参数没有专门调试所以和官网展示的效果有一定的差距

将相机放大查看树渲染的效果细节处理个人觉得是非常nice的，十分真实

参数

该插件还提供了创建不同类型树的方法，通过官网的在线调试就可以看到效果了

创建一个别的类型树

修改树枝的方向

树叶的多少

项目地址

该项目插件是一个外国大佬开发，如果你的项目或者个人网站需要丰富一下页面内容，那么这个插件或许是个不错的选择

官网：www.eztree.dev/

项目地址：github.com/dgreenheck/...