十四、vue3项目如何使用three.js

       近期在开发过程中，因为项目已经接近尾声，就需要对项目中的数据进行整合，而数据看板不失为一个比较直观的展现形式。在数据看板中3D的展现形式是比较流行的展现形式，那么如何在项目引入一个大的场景，并且能够和后台发生交互呢。

        我们首先想到的肯定是大型团队都使用的ue4(虚幻)和unity3d，但是在没有个专门的团队的帮助下，谈这些技术都是扯，最后我还是决定使用three.js这个技术，虽然有一定的上手难度，但是最起码前端配合ui就能玩的转一些小的场景。

        我使用的是vue3项目的vben框架，如果有不同的前端技术我想差别应该不大。

        一、项目位置

        我想我们的项目位置在src/components/Scene创建一个vue页面用于展示页面，在需要展示的地方引入该页面即可

 

       二、首先我们来看一下threejs运行的四个条件

        scene场景、renderer渲染器、camera相机、object对象在我的项目中是是如何使用的呢

来看具体代码

<script lang="ts" setup>
  import { onMounted, onUnmounted, ref, watch } from 'vue';
  // 导入场景
  import scene from '/@/threes/scene';
  //相机
  import cameraModule from '/@