效果如下：
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="EGxDsR7W-1724727283774" src="https://live.csdn.net/v/embed/420271"></iframe>在三维场景中点击设备,相机靠近放大预览功能实现
完整代码如下：
1、html
<div id="tag" style="display: none;">
<!-- position:relative;约束子元素绝对定位参照点 -->
<div style="position:relative;width:400px;height:322px;color: #fff;">
<!-- 图片绝对定位100%填充父元素，作为标签的背景 -->
<img src="./信息背景.png" alt="" style="width:100%;position: absolute;left: 0px;top: 0px;">
<!-- 名称、存储量、设备状态、等信息叠加到背景图上即可 -->
<div style="position:absolute;left:48px;top:36px;font-size:16px;">
<div style="font-size:20px;font-weight: 400;">
<span id="name">设备A</span>
</div>
<div style="margin-top: 30px;">
<span style="font-weight: 400;margin-left: 80px;font-size: 40px;color: #00ffff;">276559 L</span>
</div>
<div style="margin-top: 20px;">
<span style="color: #ccc;font-weight: 300;">管理</span><span
style="font-weight: 400;margin-left: 30px;">郭老师</span>
</div>
<div style="margin-top: 10px;">
<span style="color: #ccc;font-weight: 300;">工号</span><span
style="font-weight: 400;margin-left: 30px;">webgl3d.cn</span>
</div>
</div>
<div style="position:absolute;left:285px;top:35px;">
<span style="color: #ffff00;">异常</span>
</div>
<div style="position:absolute;left:350px;top:20px;">
<img id="close" src="./关闭.png" width="32" style="pointer-events: auto;">
</div>
</div>
</div>
2、model.js
// 引入Three.js
import * as THREE from 'three';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
const model = new THREE.Group();
loader.load("../工厂.glb", function (gltf) {
model.add(gltf.scene); //三维场景添加到model组对象中
})
export default model;
3、tag.js
// 引入CSS2模型对象CSS2DObject
import {
CSS2DObject
} from 'three/addons/renderers/CSS