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

掘金前端

答案answer

2025年11月18日 11:54

前言

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

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

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

安装

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

npm i @dgreenheck/ez-tree

pnpm add @dgreenheck/ez-tree

使用

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

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

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);
  }