According to the requirements put forward by the company, it is necessary to reserve a place to display the .glb file in the background project. I have never touched it before. The three. It is not possible to add events. After all, we have not thought about three.js, so we searched wildly and found several vue plugins specially used to display 3D models, such as: vue-model-viewer, vue- 3d - model, (You can find it by searching on the npm official website). The default display effect of these two plug-ins is the same, and the model rotation can be controlled by the mouse by default, but a series of operations such as zooming are not enough, maybe it can be satisfied, but I haven't studied it carefully. Here comes the important point, <model-viewer></model-viewer>, this plugin is still relatively strong @google/model-viewer - npm (npmjs.com) 
https://www.npmjs.com/package/@google/ model-viewer is the npm address, you can check the details
Instructions:
1. Install
npm install [email protected]
npm install @google/[email protected]2. Code part
a.template part
<template>
<div class="hello">
<model-viewer style="width: 500px;height: 500px;" alt="Ready Player Me Avatar"
camera-controls
src="https://api.readyplayer.me/v1/avatars/6185a4acfb622cf1cdc49348.glb" shadow-intensity="1"
touch-action="pan-y">
</model-viewer>
</div>
</template>b. script part
<script>
import ModelViewer from '@google/model-viewer' //引入组件
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
}
},
mounted () {
},
components:{
ModelViewer //注册组件
}
}
</script>c. Effect
d. Explanation:
A warning may pop up when running, ignore it , the three.js I installed is version 0.154.0, and the latest version is 0.155.0, but this version of three.js does not support the use of plug-ins of version 3.2.1, so according to version to install!
The above is all the valuable information of vue displaying 3D models, I hope it will be helpful to you!