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

最新推荐文章于 2025-11-15 17:52:45 发布

原创

最新推荐文章于 2025-11-15 17:52:45 发布 · 2.1k 阅读

收录于

当前文章被以下社区和专栏收录：

这个博客展示了如何在Vue中使用ThreeJS库创建3D场景，并通过ThreeJS的几何体、材质和渲染器实现3个不同形状的圆柱体生长动画。代码详细解释了初始化相机、场景、辅助线、渲染器的过程，以及如何设置定时器控制模型的生长和位置变化。此外，还提及了参考资源，包括三维树模型绘制和ThreeJS树枝生长模拟动画。

代码效果：在这里插入图片描述
完整代码：

<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