In the recent development process, because the project is coming to an end, it is necessary to integrate the data in the project, and the data dashboard is a more intuitive display form. The 3D presentation form in the data dashboard is a relatively popular presentation form, so how to introduce a large scene into the project and be able to interact with the background.
Our first thought must be ue4 (Unreal) and unity3d, which are used by large teams, but without the help of a dedicated team, talking about these technologies is nonsense. In the end, I decided to use the three.js technology. It is difficult to get started, but at least the front end can play some small scenes with the ui.
I am using the vben framework of the vue3 project. If there are different front-end technologies, I think there should be little difference.
1. Project location
I think our project location is to create a vue page in src/components/Scene to display the page, and just import the page where it needs to be displayed
2. First, let's look at the four conditions for the operation of threejs
How are scene, renderer, camera and object objects used in my project?
Look at the specific code
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
// 导入场景
import scene from '/@/threes/scene';
//相机
import cameraModule from '/@/threes/cam