在三维场景中点击设备,相机靠近放大预览功能实现

效果如下：

在三维场景中点击设备,相机靠近放大预览功能实现

完整代码如下：
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