three.js初体验：模拟一个小树杈的生长

代码效果：
完整代码：

<template>
  <div>
    <button @click="run" class="btn">run</button>
    <div class="container" ref="container" />
  </div>
</template>

<script>
import * as THREE from 'three'

export default {
  name: 'ThreeTest',
  data() {
    return {
      container: null,
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      timer: null
    }
  },
  mounted() {
    this.init()
    // this.run()
  },
  methods: {
    setScene() {
      this.scene = new THREE.Scene()
    },
    setCamera() {
      // 照相机
      this.camera = new THREE.PerspectiveCamera(70, this.container.clientWidth / this.container.clientHeight, 0.01, 10)
      this.camera.position.z = 2
      this.camera.position.y = 1
      // this.camera.lookAt(new Three.Vector3(0, -0.01, 0.1))
    },
    setHelper() {
      this.scene.add(new THREE.AxesHelper(30))
      const gridHelper = new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888)
      gridHelper.position.y = -1
      this.scene.add(gridHelper)
    },
    setRender() {
      // 渲染：反锯齿
      this.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)
      this.container.appendChild(this.renderer.domElement)
    },
    init() {
      this.container = this.$refs.container
      // 照相机
      this.setCamera()
      // 场景
      this.setScene()
      // 辅助线
      this.setHelper()
      // 渲染
      this.setRender()
    },
    run() {
      // 几何体
      // const geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
      const geometry = new THREE.CylinderGeometry(0, 0.1, 0.2)
      // 网格法向量材质 rgb
      const material = new THREE.MeshNormalMaterial()
      // 网格对象
      this.mesh = new THREE.Mesh(geometry, material)
      this.scene.add(this.mesh)
      this.timer = setInterval(() => {
        if (this.mesh.scale.y < 3) {
          this.mesh.scale.y += 0.1
          this.mesh.position.y += 0.01
        } else {
          this.stop()
          this.run2()
        }
        this.renderer.render(this.scene, this.camera)
      }, 30)
    },
    run2() {
      const mesh = new THREE.Mesh(new THREE.CylinderGeometry(0, 0.1 * 0.7, 0.2), new THREE.MeshNormalMaterial())
      mesh.position.set(-0.05, 0.05, 0)// 设置网格模型几何中心三维坐标
      mesh.rotateZ(Math.PI / 4)// 绕x轴旋转π/4
      this.scene.add(mesh)
      this.timer = setInterval(() => {
        if (mesh.scale.y < 2) {
          mesh.scale.y += 0.1
          mesh.position.x -= 0.01
          mesh.position.y += 0.01
        } else {
          this.stop()
          this.run3()
        }
        this.renderer.render(this.scene, this.camera)
      }, 30)
    },
    run3() {
      const mesh = new THREE.Mesh(new THREE.CylinderGeometry(0, 0.1 * 0.5, 0.2), new THREE.MeshNormalMaterial())
      mesh.position.set(0.05, 0.2, 0)
      mesh.rotateZ(-Math.PI / 4)
      this.scene.add(mesh)
      this.timer = setInterval(() => {
        if (mesh.scale.y < 1.5) {
          mesh.scale.y += 0.1
          mesh.position.x += 0.01
          mesh.position.y += 0.01
        } else {
          this.stop()
        }
        this.renderer.render(this.scene, this.camera)
      }, 30)
    },
    stop() {
      clearInterval(this.timer)
      this.timer = null
    }
    // animate() {
    //   requestAnimationFrame(this.animate)
    //   this.mesh.rotation.x += 0.01
    //   this.mesh.rotation.y += 0.02
    //   this.renderer.render(this.scene, this.camera)
    // }
  }
}
</script>
<style scoped>
.container {
  height: 80vh;
}
.btn{
  position: fixed;
  top: 50vh;
  left: 50vw;
}
</style>

ps:超级Mini版，不能说一模一样，只能说毫不相干，跟想实现的效果差了十万八千里hahahaaa…
仅有一个视频参考，不知道拿什么写的有没有自己建模，真好奇啊。

前置参考：
Vue页面引入ThreeJS
ThreeJS：模型生长
接下去做的话可能要参考下面这些，存个档
使用 Three.js 绘制三维树模型
利用JavaScript在canvas中画一棵树
Three.js 树枝随机生长模拟动画