First experience of three.js: simulating the growth of a small branch

Code effect ：
Complete code ：

<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() {
    
      //  camera 
      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() {
    
      //  Rendering ： Anti aliasing 
      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
      //  camera 
      this.setCamera()
      //  scene 
      this.setScene()
      //  guide 
      this.setHelper()
      //  Rendering 
      this.setRender()
    },
    run() {
    
      //  Geometry 
      // const geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
      const geometry = new THREE.CylinderGeometry(0, 0.1, 0.2)
      //  Mesh normal vector material  rgb
      const material = new THREE.MeshNormalMaterial()
      //  Grid objects 
      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)//  Set the 3D coordinates of the geometric center of the mesh model 
      mesh.rotateZ(Math.PI / 4)//  Around the x Shaft rotation π/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: Super Mini edition , It can't be as like as two peas. , It's irrelevant , It is far from the desired effect hahahaaa…
There is only one video reference , I don't know what to write and whether I have my own modeling , How strange .

Pre reference ：
Vue The page introduce ThreeJS
ThreeJS： Model growth
Next, you may want to refer to the following , Save a file
Use Three.js Draw a three-dimensional tree model
utilize JavaScript stay canvas Draw a tree in
Three.js Simulation animation of random growth of branches