使用three.js+vue3完成无人机上下运动

效果图如上

代码：

<template>
    <div class="drones">
      <div ref="dronesContainer" class="drones-container"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted, render } from 'vue';
  import * as THREE from 'three';
  // 导入无人机材质
  import droneTexture from '../../../assets/images/大疆无人机.png';
  const dronesContainer = ref(null);
  let scene, camera, renderer, droneMesh, droneGeometry, droneMaterial, animationId;
  
  onMounted(async () => {
    try {
      await init();
      animate();
    } catch (error) {
      console.error('Initialization error:', error);
    }
  });
  
  onUnmounted(() => {
    cancelAnimationFrame(animationId);
  });