sis_zhfx/src/views/SandTable/component/ThreeModel.vue

<template>
    <div class="three-model" :style="'cursor: ' + (pointer ? 'pointer' : 'auto') + ';'" @click="clickEvent">
        <loading ref="pageLoading"></loading>
        <div class="three-html-layer">
            <div
                class="three-html-dom fan-info"
                :id="htmlLayer[0].id"
                v-show="htmlLayer[0].show"
                :style="'left: ' + htmlLayer[0].x + 'px; top: ' + htmlLayer[0].y + 'px;'"
            >
                <div class="fan-info-close" @click.stop="closeFanInfo">
                    <i class="el-icon-close"></i>
                </div>
                <div class="fan-info-name gray-l">{{fanName}}</div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-风机" />
                    </span>
                    <span class="gray-l mg-l-8">接入</span>
                    <span class="green num">176</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-normal-power" />
                    </span>
                    <span class="gray-l mg-l-8">运行</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-standby" />
                    </span>
                    <span class="gray-l mg-l-8">待机</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-limit-power" />
                    </span>
                    <span class="gray-l mg-l-8">限电</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-gz-downtime" />
                    </span>
                    <span class="gray-l mg-l-8">故障</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-jx-downtime" />
                    </span>
                    <span class="gray-l mg-l-8">检修</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-offline" />
                    </span>
                    <span class="gray-l mg-l-8">离线</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
                <div class="fan-info-item">
                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
                        <svg-icon svgid="svg-intranet-involvement" />
                    </span>
                    <span class="gray-l mg-l-8">受累</span>
                    <span class="green num">1</span>
                    <span class="green mg-l-8">台</span>
                </div>
            </div>
            <div
                class="three-html-dom build-info"
                :id="htmlLayer[1].id"
                v-show="htmlLayer[1].show"
                :style="'left: ' + htmlLayer[1].x + 'px; top: ' + htmlLayer[1].y + 'px;'"
            >
                <div class="build-info-close" @click.stop="closeBuildInfo">
                    <i class="el-icon-close"></i>
                </div>
                <div class="build-info-item blue" :style="'right: '+circleXY[0].x+'px; top: '+circleXY[0].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">综合厂</div>
                </div>
                <div class="build-info-item blue" :style="'right: '+circleXY[1].x+'px; top: '+circleXY[1].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">风能</div>
                </div>
                <div class="build-info-item green" :style="'right: '+circleXY[2].x+'px; top: '+circleXY[2].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">利用小时</div>
                </div>
                <div class="build-info-item purple" :style="'right: '+circleXY[3].x+'px; top: '+circleXY[3].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">评分</div>
                </div>
                <div class="build-info-item orange" :style="'right: '+circleXY[4].x+'px; top: '+circleXY[4].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">MTBF</div>
                </div>
                <div class="build-info-item yellow" :style="'right: '+circleXY[5].x+'px; top: '+circleXY[5].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">设备科</div>
                </div>
                <div class="build-info-item blue" :style="'right: '+circleXY[6].x+'px; top: '+circleXY[6].y+'px'">
                    <div class="build-info-item-num">97</div>
                    <div class="build-info-item-text">MTTR</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import loading from "@com/coms/loading/loading.vue";
import * as THREE from "three";
import { GLTFLoader } from "@node/three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "@node/three/examples/jsm/controls/OrbitControls.js";
import { GeometryUtils } from "@node/three/examples/jsm/utils/GeometryUtils.js";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
let camera, scene, renderer, controls;
let mixers = [];
let clock = new THREE.Clock();
let fanAnimates = [];
let fans = [];
let cylinder = null;
export default {
    // 名称
    name: "ThreeModel",
    // 使用组件
    components: {
        loading,
        SvgIcon,
    },
    // 传入参数
    props: {},
    // 自定义事件
    emits: {
        when: null,
    },
    // 数据
    data() {
        return {
            pointer: false,
            htmlLayer: [
                {
                    id: "fan-info",
                    x: 0,
                    y: 0,
                    show: false,
                    ox: 50,
                    oy: -50,
                    position: null,
                },
                {
                    id: "build-info",
                    x: 0,
                    y: 0,
                    show: false,
                    ox: -300,
                    oy: -50,
                    position: null,
                },
            ],
            circleXY: [
                { x: -(200*Math.sin(0/180*Math.PI)), y: -(200*Math.cos(0/180*Math.PI)) },
                { x: -(200*Math.sin(-30/180*Math.PI)), y: -(200*Math.cos(-30/180*Math.PI)) },
                { x: -(200*Math.sin(-60/180*Math.PI)), y: -(200*Math.cos(-60/180*Math.PI)) },
                { x: -(200*Math.sin(-90/180*Math.PI)), y: -(200*Math.cos(-90/180*Math.PI)) },
                { x: -(200*Math.sin(-120/180*Math.PI)), y: -(200*Math.cos(-120/180*Math.PI)) },
                { x: -(200*Math.sin(-150/180*Math.PI)), y: -(200*Math.cos(-150/180*Math.PI)) },
                { x: -(200*Math.sin(-180/180*Math.PI)), y: -(200*Math.cos(-180/180*Math.PI)) },
            ],
            colors: [
                { colorName: 'green', state: 'dj', stateName: '待机', color: 0x05bb4c, },
                { colorName: 'blue', state: 'yx', stateName: '运行', color: 0x4b55ae, },
                { colorName: 'pink', state: 'xd', stateName: '限电', color: 0xc531c7, },
                { colorName: 'red', state: 'gz', stateName: '故障', color: 0xBA3237, },
                { colorName: 'orange', state: 'jx', stateName: '检修', color: 0xe17e23, },
                { colorName: 'gray', state: 'lx', stateName: '离线', color: 0x606769, },
                { colorName: 'white', state: 'sl', stateName: '受累', color: 0xffffff, },
            ],
            fanName: "",
            playAnimation: true,
        };
    },
    // 函数
    methods: {
        // Vector3 to screen
        vector3ToScreen: function(position) {
            const centerX = this.$el.scrollWidth / 2;
            const centerY = this.$el.scrollHeight / 2;
            const v3 = new THREE.Vector3(position.x, position.y, position.z);
            const standardVec = v3.project(camera);
            const screenX = Math.round(centerX * standardVec.x + centerX);
            const screenY = Math.round(-centerY * standardVec.y + centerY);
            return { x: screenX, y: screenY };
        },
        // 场景
        initScene: function() {
            scene = new THREE.Scene();
            // scene.background = new THREE.Color(0xa0a0a0);
        },
        // 相机
        initCamera: function() {
            camera = new THREE.PerspectiveCamera(45, this.$el.scrollWidth / this.$el.scrollHeight, 0.1, 10000);
            camera.position.set(50, 60, 50);
        },
        // 坐标轴
        initAxesHelper: function() {
            const axesHelper = new THREE.AxesHelper(150);
            scene.add(axesHelper);
            axesHelper.position.set(0, 0, 0);
        },
        // 渲染器
        initRender: function() {
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            // renderer.setClearAlpha(0);
            renderer.setSize(this.$el.scrollWidth, this.$el.scrollHeight);
            this.$el.append(renderer.domElement);
        },
        // 灯光
        initLight: function() {
            // let light = new THREE.PointLight(0xffffff, 2);
            let light = new THREE.AmbientLight(0xffffff, 4);
            // light.position.set(50, 50, 50);
            scene.add(light);
        },
        // 控制器
        initControls: function() {
            controls = new OrbitControls(camera, renderer.domElement);
            controls.enablePan = false;
            controls.maxPolarAngle = 45 / 180 * Math.PI;
            controls.minPolarAngle = 45 / 180 * Math.PI;
            controls.addEventListener("change", () => {
                this.setEveryHTML();
            });
        },
        // 初始化一个风机动画
        initFanAnimate: function(obj) {
            let fanAnimateObj = {
                speed: 0.05,
                fan1: obj.getObjectByName(`${obj.name}_leaf_1`),
                fan2: obj.getObjectByName(`${obj.name}_leaf_2`),
                fan3: obj.getObjectByName(`${obj.name}_leaf_3`),
            };
            let fanAnimateFunction = function() {
                fanAnimateObj.fan1.rotateZ(fanAnimateObj.speed);
                fanAnimateObj.fan2.rotateZ(fanAnimateObj.speed);
                fanAnimateObj.fan3.rotateZ(fanAnimateObj.speed);
                fanAnimateObj.animateId = window.requestAnimationFrame(fanAnimateFunction);
            };
            fanAnimateObj.stop = function() {
                window.cancelAnimationFrame(fanAnimateObj.animateId);
            };
            fanAnimateObj.start = function() {
                fanAnimateFunction();
            };
            fanAnimateFunction();
            fanAnimates.push(fanAnimateObj);
            return fanAnimateObj;
        },
        // 清空风机动画
        clearFanAnimate: function() {
            while (fanAnimates.length > 0) {
                let fanAnimateObj = fanAnimates.shift();
                fanAnimateObj.stop();
            }
            this.playAnimation = false;
        },
        // 开始风机动画
        startFanAnimate: function () {
            fans.forEach(fan => {
                this.initFanAnimate(fan);
            });
            this.playAnimation = true;
        },
        // 内容
        initContent: function() {
            // 加载3D地面
            let loaderGround = new GLTFLoader(); /*实例化加载器*/
            loaderGround.load(
                "static/3d/group/ng.gltf",
                (gltf) => {
                    gltf.scene.position.set(5, 10, 0);
                    scene.add(gltf.scene);
                    let mixer = new THREE.AnimationMixer(gltf.scene.children[0]);
                    mixer
                        .clipAction(gltf.animations[0])
                        .setDuration(3)
                        .play();
                    mixers.push(mixer);
                    // console.log(gltf);

                    // 移除风车
                    let rootNode = scene.getObjectByName("RootNode");
                    let fan1 = scene.getObjectByName("组840");
                    let fan2 = scene.getObjectByName("组857");
                    let fan3 = scene.getObjectByName("组838");
                    rootNode.remove(fan1);
                    rootNode.remove(fan2);
                    rootNode.remove(fan3);
                    // console.log(fan2.position);
                    this.setFanPosition(rootNode, fan1);

                    // 设置楼的name
                    let build = scene.getObjectByName("组833");
                    build.name = "build_headquarters";
                    build.userData.name = "build_headquarters";
                    build.children[build.children.length - 1].name = 'build_headquarters_chassis';
                    build.children[build.children.length - 1].userData.name = 'build_headquarters_chassis';
                    this.changeObjectColor(build, 'gz');

                    // 移除光伏
                    let light = scene.getObjectByName("组862");
                    rootNode.remove(light);
                    this.setLightPosition(rootNode, light);

                    scene.onAfterRender = () => {
                        this.$emit("when");
                        this.$refs.pageLoading.hide();
                    }
                },
                (xhr) => {
                    // console.log(xhr.loaded, '/', xhr.total)
                    // if (xhr.loaded == xhr.total) {
                    //     this.$emit("when");
                    //     setTimeout(() => {
                    //         this.$refs.pageLoading.hide();
                    //     }, 3000);
                    // }
                },
                function(error) {
                    console.error("load error!" + error.getWebGLErrorMessage());
                }
            );
        },
        // 改变元素底盘的颜色（带底盘的）
        changeObjectColor: function (obj, colorName) {
            let chassis = obj.getObjectByName(`${obj.name}_chassis`);
            let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
            chassis.material = new THREE.MeshBasicMaterial({
                color: color,
                opacity: 0.8,
                transparent: true,
            });
        },
        // 改变元素的颜色（光伏）
        changeElColor: function (obj, colorName) {
            let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
            for (let i = 1; i <= 6; i++) {
                let el = obj.getObjectByName(`${obj.name}_item_${i}`);
                el.material = new THREE.MeshBasicMaterial({
                    color: color,
                    opacity: 0.8,
                    transparent: true,
                });
            }
        },
        // 设置风机name
        setFanName: function (obj, name) {
            obj.name = name;
            obj.userData.name = name;
            let fanBig1_1 = obj.getObjectByName("Box707");
            let fanBig1_2 = obj.getObjectByName("Box708");
            let fanBig1_3 = obj.getObjectByName("Box709");
            fanBig1_1.name = `${name}_leaf_1`;
            fanBig1_1.userData.name = `${name}_leaf_1`;
            fanBig1_2.name = `${name}_leaf_2`;
            fanBig1_2.userData.name = `${name}_leaf_2`;
            fanBig1_3.name = `${name}_leaf_3`;
            fanBig1_3.userData.name = `${name}_leaf_3`;
            obj.children[obj.children.length - 1].name = `${name}_chassis`;
            obj.children[obj.children.length - 1].userData.name = `${name}_chassis`;
        },
        // 设置风机位置 颜色
        setFanPosition: function (rootNode, obj) {
            // 麻黄山
            let fan_mhs = obj.clone(true);
            fan_mhs.position.set(8, 5, -6);
            this.setFanName(fan_mhs, "fan_mhs");
            rootNode.add(fan_mhs);
            // 牛首山
            let fan_nss = obj.clone(true);
            fan_nss.position.set(-4, 4, -15);
            this.setFanName(fan_nss, "fan_nss");
            rootNode.add(fan_nss);
            // 青山
            let fan_qs = obj.clone(true);
            fan_qs.position.set(12, 5, -11);
            this.setFanName(fan_qs, "fan_qs");
            rootNode.add(fan_qs);
            // 石板泉
            let fan_sbq = obj.clone(true);
            fan_sbq.position.set(4, 5, -13);
            this.setFanName(fan_sbq, "fan_sbq");
            rootNode.add(fan_sbq);
            // 香山
            let fan_xs = obj.clone(true);
            fan_xs.position.set(-9, 7, 21);
            this.setFanName(fan_xs, "fan_xs");
            rootNode.add(fan_xs);

            // 改一下颜色
            this.changeObjectColor(fan_mhs, 'green'); // 麻黄山
            this.changeObjectColor(fan_nss, 'xd'); // 牛首山
            this.changeObjectColor(fan_qs, '检修'); // 青山
            this.changeObjectColor(fan_sbq, 'white'); // 石板泉
            this.changeObjectColor(fan_xs, '运行'); // 香山

            // 风机存入数组
            fans.push(fan_mhs);
            fans.push(fan_nss);
            fans.push(fan_qs);
            fans.push(fan_sbq);
            fans.push(fan_xs);

            // 开始风机动画
            this.startFanAnimate();
        },
        // 设置光伏name
        setLightName: function (obj, name) {
            obj.name = name;
            obj.userData.name = name;
            let Box661 = obj.getObjectByName("Box661");
            let Box668 = obj.getObjectByName("Box668");
            let Box669 = obj.getObjectByName("Box669");
            let Box664 = obj.getObjectByName("Box664");
            let Box667 = obj.getObjectByName("Box667");
            let Box670 = obj.getObjectByName("Box670");
            Box661.name = `${name}_item_1`;
            Box661.userData.name = `${name}_item_1`;
            Box668.name = `${name}_item_2`;
            Box668.userData.name = `${name}_item_2`;
            Box669.name = `${name}_item_3`;
            Box669.userData.name = `${name}_item_3`;
            Box664.name = `${name}_item_4`;
            Box664.userData.name = `${name}_item_4`;
            Box667.name = `${name}_item_5`;
            Box667.userData.name = `${name}_item_5`;
            Box670.name = `${name}_item_6`;
            Box670.userData.name = `${name}_item_6`;
        },
        // 设置光伏位置 颜色
        setLightPosition: function (rootNode, obj) {
            let Box660 = obj.getObjectByName("Box660");
            let Box666 = obj.getObjectByName("Box666");
            let Box662 = obj.getObjectByName("Box662");
            let Box663 = obj.getObjectByName("Box663");
            let Box659 = obj.getObjectByName("Box659");
            let Box665 = obj.getObjectByName("Box665");
            obj.remove(Box660);
            obj.remove(Box666);
            obj.remove(Box662);
            obj.remove(Box663);
            obj.remove(Box659);
            obj.remove(Box665);
            // 大武口
            let light_dwk = obj.clone(true);
            light_dwk.position.set(0.28, 0.13, -35);
            this.setLightName(light_dwk, "light_dwk");
            rootNode.add(light_dwk);
            // 平罗
            let light_pl = obj.clone(true);
            light_pl.position.set(1.5, 0.13, -40);
            this.setLightName(light_pl, "light_pl");
            rootNode.add(light_pl);
            // 马场湖
            let light_mch = obj.clone(true);
            light_mch.position.set(-25, 2, -8);
            this.setLightName(light_mch, "light_mch");
            rootNode.add(light_mch);
            // 宣和
            let light_xh = obj.clone(true);
            light_xh.position.set(-18, 4, -3);
            this.setLightName(light_xh, "light_xh");
            rootNode.add(light_xh);
            // 海子井
            let light_hzj = obj.clone(true);
            light_hzj.position.set(-2, 2, -10);
            this.setLightName(light_hzj, "light_hzj");
            rootNode.add(light_hzj);

            // 改变颜色
            this.changeElColor(light_dwk, 'green'); // 大武口
            this.changeElColor(light_pl, '离线'); // 平罗
            this.changeElColor(light_mch, 'yx'); // 马场湖
            this.changeElColor(light_xh, 'red'); // 宣和
            this.changeElColor(light_hzj, '受累'); // 海子井
        },
        // 创建一个圆柱
        initCylinderGeometry: function(position, cr=2) {
            let geometry = new THREE.CylinderGeometry(cr, cr, 7, 64);
            //加载纹理
            let texture = new THREE.TextureLoader().load("static/3d/beam-texture.png");
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
            texture.repeat.set(1, 1);
            texture.needsUpdate = true;
            let materials = [
                //圆柱侧面材质，使用纹理贴图
                new THREE.MeshBasicMaterial({
                    map: texture,
                    side: THREE.DoubleSide,
                    transparent: true,
                }),
                //圆柱顶材质
                new THREE.MeshBasicMaterial({
                    transparent: true,
                    opacity: 0,
                    side: THREE.DoubleSide,
                }),
                //圆柱底材质
                new THREE.MeshBasicMaterial({
                    transparent: true,
                    opacity: 0,
                    side: THREE.DoubleSide,
                }),
            ];
            cylinder = new THREE.Mesh(geometry, materials);
            cylinder.position.set(position.x + 5.75, position.y + 8, position.z);
            scene.add(cylinder);
        },
        // 判断时候是可点击对象 返回null 或object
        getClickObject: function(intersects) {
            const names = ["fan", "build"];
            let x = true;
            let obj = null;
            for (let intersect of intersects) {
                let temObj = intersect.object;
                while (x) {
                    for (let name of names) {
                        if (temObj.name.indexOf(`${name}_`) == 0) {
                            obj = temObj;
                            x = false;
                            break;
                        }
                    }
                    if (x && temObj.parent) {
                        temObj = temObj.parent;
                        continue;
                    }
                    break;
                }
            }
            return obj;
        },
        // 鼠标浮动事件 // 这招不太行 鼠标每次移动都会发射射线 导致动画卡顿
        mοusemοveEvent: function(event) {
            event.preventDefault();
            let vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
            vector = vector.unproject(camera);
            let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
            let intersects = raycaster.intersectObjects(scene.children, true);
            let obj = this.getClickObject(intersects);
            if (obj) {
                this.pointer = true;
            } else {
                this.pointer = false;
            }
        },
        // 设置每一个html的位置
        setEveryHTML: function() {
            this.htmlLayer.forEach(value => {
                if (value.show && value.position) {
                    const screen = this.vector3ToScreen(value.position);
                    value.x = screen.x + value.ox;
                    value.y = screen.y + value.oy;
                }
            });
        },
        // 显示风机弹出层
        showFanInfo: function(position) {
            this.htmlLayer[0].position = {
                x: position.x,
                y: position.y,
                z: position.z,
            };
            this.htmlLayer[0].show = true;
            this.setEveryHTML();
        },
        // 隐藏风机弹出层
        hideFanInfo: function () {
            this.htmlLayer[0].show = false;
        },
        // 显示楼信息弹出层
        showBuildInfo: function(position) {
            this.htmlLayer[1].position = {
                x: position.x,
                y: position.y,
                z: position.z,
            };
            this.htmlLayer[1].show = true;
            this.setEveryHTML();
        },
        // 隐藏楼信息弹出层
        hideBuildInfo: function () {
            this.htmlLayer[1].show = false;
        },
        // 关闭弹出
        closeFanInfo: function () {
            this.htmlLayer[0].show = false;
            if (cylinder) {
                scene.remove(cylinder);
            }
        },
        // 关闭弹出
        closeBuildInfo: function () {
            this.htmlLayer[1].show = false;
            if (cylinder) {
                scene.remove(cylinder);
            }
        },
        // 点击事件
        clickEvent: function(event) {
            event.preventDefault();
            let vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
            vector = vector.unproject(camera);
            let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
            let intersects = raycaster.intersectObjects(scene.children, true);
            // console.log(intersects); // 输出点击的对象信息
            // 找是否是可点击对象
            let obj = this.getClickObject(intersects);
            if (obj) {
                if (cylinder) {
                    scene.remove(cylinder);
                }
                let isBuild = false;
                if (obj.name.indexOf('build_') == 0) {
                    isBuild = true;
                }
                this.initCylinderGeometry(obj.position, isBuild ? 4 : 2);
                this.elClick(obj.name);
                if (isBuild) {
                    this.showBuildInfo(obj.position);
                    this.hideFanInfo();
                } else {
                    this.showFanInfo(obj.position);
                    this.hideBuildInfo();
                }
            }
        },
        // 元素点击事件 绑值
        elClick: function (name) {
            switch (name) {
                case "fan_mhs": // 麻黄山
                    this.fanName = "麻黄山风场";
                    break;
                case "fan_nss": // 牛首山
                    this.fanName = "牛首山风场";
                    break;
                case "fan_qs": // 青山
                    this.fanName = "青山风场";
                    break;
                case "fan_sbq": // 石板泉
                    this.fanName = "石板泉风场";
                    break;
                case "fan_xs": // 香山
                    this.fanName = "香山风场";
                    break;

                case "build_headquarters": // 大楼
                    break;
            
                default:
                    break;
            }
        },
        // 初始化云
        initCloud: function () {
            
        },
        // 初始化
        initThree: function() {
            this.initScene();
            // this.initAxesHelper();
            this.initCamera();
            this.initRender();
            this.initLight();
            this.initControls();
            this.initContent();
            this.initCloud();
            renderer.setAnimationLoop(this.animate);
        },
        // 动画
        animate: function() {
            if (this.playAnimation) {
                var delta = clock.getDelta();
                for (var i = 0; i < mixers.length; i++) {
                    // 重复播放动画
                        mixers[i].update(delta);
                }
            }
            renderer.render(scene, camera);
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
        this.initThree();
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
    beforeUnmount() {
        // 销毁前
        renderer.setAnimationLoop(null);
        camera = null;
        scene = null;
        renderer = null;
    },
};
</script>

<style lang="less" scoped>
.three-model {
    position: relative;
    overflow: hidden;

    .three-html-layer {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        left: 0;

        .three-html-dom {
            position: absolute;
        }

        .fan-info {
            padding: 14px;
            width: 149px;
            height: 48px;
            background: #1a1f2fd8;
            border: 1px solid #05bb4c;
            box-shadow: 0px 8px 17px 1px #05bb4c66;

            .fan-info-close {
                position: absolute;
                width: 20px;
                height: 20px;
                top: -10px;
                right: -10px;
                border-radius: 50%;
                background: #1a1f2fd8;
                border: 1px solid #05bb4c;
                box-shadow: 0px 8px 17px 1px #05bb4c66;
                cursor: pointer;
                color: @gray-l;
                transition: all 0.3s;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 8px;

                &:hover {
                    color: #05bb4c;
                }
            }

            .fan-info-name {
                text-align: center;
            }

            .fan-info-item {
                display: none;

                +.fan-info-item {
                    margin-top: 13px;
                }

                .svg-icon {
                    text-align: center;
                }

                .num {
                    display: inline-block;
                    width: 45px;
                    text-align: right;
                }
            }
        }

        .build-info {
            width: 400px;
            height: 200px;
            position: relative;

            .build-info-close {
                position: absolute;
                width: 40px;
                height: 40px;
                top: 20px;
                right: 20px;
                border-radius: 50%;
                background: #1a1f2fd8;
                border: 1px solid #05bb4c;
                box-shadow: 0px 8px 17px 1px #05bb4c66;
                cursor: pointer;
                color: @gray-l;
                transition: all 0.3s;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;

                &:hover {
                    color: #05bb4c;
                }
            }

            .build-info-item {
                width: 72px;
                height: 72px;
                border-radius: 50%;
                background: #1A1F2FE5;
                position: absolute;

                .build-info-item-num {
                    font-size: 24px;
                    font-weight: 500;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 1.2;
                    margin-top: 9px;
                }

                .build-info-item-text {
                    font-size: 12px;
                    color: #FFFFFF;
                    font-weight: 400;
                    text-align: center;
                }

                &.blue {
                    border: 2px solid #1DA0D7;
                }

                &.green {
                    border: 2px solid #05BB4C;
                }

                &.purple {
                    border: 2px solid #323E6F;
                }

                &.orange {
                    border: 2px solid #DB5520;
                }

                &.yellow {
                    border: 2px solid #EDB32F;
                }
            }
        }
    }
}
</style>