Three.js + Echarts 实现大屏系统经验总结

前端Q

共 112299字,需浏览 225分钟

 ·

2024-06-06 09:15

    

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群


时间过的好快,参加公司的新项目研发快一年了,五一机器人项目首秀,我们遇到了高并发集中下单情景,然后海量数据处理场景来了,给我在后端领域的高并发实践业务上画上了漂亮的一笔经验。人都是在磨练中成长,我很感谢这次给我的机会,虽然有点累,但也有点小成就。正好现在有空,我先聊聊首秀后给领导们做的大屏数据展示吧,领导等着看漂亮数据呢!

大屏重点是贼啦炫酷的动态特效加持

业务核心运营场景:各大地上地下停车场

这里我用的是three.js去实现的实际业务场景的场站模拟三维图,废话不多说,直接上图吧!先说一下,这里截图是看起来像2维,但实际是3维的,可以滑动翻转地图的。

截屏2024-05-07 18.35.07.png

如图所示,这是p4停车场的全景图,整个停车场的鸟瞰图一览无余,可以滚动鼠标放大看====》

这是我用three.js渲染的每个停车位的车位标记,这里记录了这个车场的每个车位的坐标点,方便后期,观察我们投放的100台机器人智能驾驶实时模拟。听起来是不是很牛逼plus?我告诉你,事情没那么简单!由于数据太多,既要有3D-map,也要有实时动态数据滚动展示和各种echarts图表,比如:

ps:不好意思,本人还要严格遵守劳动合同执行公司数据保密,相关数据已经打码。

然后一堆实时数据数据和图上来后,不出意外的意外来了,性能出现了问题,我遇到了内存泄漏的情况。这还怎么继续二期的机器人动态运行场景研发呢?别慌,一步一步排查代码。

1.先介绍下大屏顶部的总数统计动态数字翻牌器

这里我用了第三方插件:动态数字翻牌器vue-count-to,只要有数据变化,就会实时看到动态增长的效果

首先要在框架中安装npm install vue-count-to,并在项目入口文件中引入

import CountTo from 'vue-count-to';
Vue.use(CountTo)
new Vue({
  el'#app',
  router,
  store,
  renderh => h(App)
})

实际业务开发模块中代码:

                <count-to
                    class="count-to"
                    :startVal="0" //开始数值
                    :endVal="687573.74" //结束数值
                    :duration="500000" //动态变化的时间设定
                    :decimals="1"  //每次动态增长的数量
                ></count-to>

2.然后在大屏的左侧,我写了一个实时从下到上无限滚动的动态订单列表,可以让领导看到最新的订单情况。


<template>
    <div class="scrolling-list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
      <ul ref="scrollItemBox">
        <li v-for="(item, index) in items" :key="index" class="item-li">
            <div><span class="name">订单编号:</span><span class="content"><i class="el-icon-receiving">  {{ item.order_id }}</i></span></div>
            <div><span class="name">订单金额:</span><span class="content"><i class="el-icon-s-finance" style="color:#1989fa" >  {{ item.pre_total_amount }}</i></span><span class="name">手机号:</span><span class="content"><i class="el-icon-mobile-phone" style="color:#1989fa">  {{ item.phone }}</i></span></div>
            <div><span class="name">车牌号:</span><span class="content"> <i class="el-icon-truck" style="color:#1989fa">  {{ item.vehicle_no }}</i></span><span class="name">车位号:</span><span class="content"><i class="el-icon-map-location" style="color:#1989fa">  {{ item.target_slot_no }}</i></span></div>
            <div><span class="name">订单来源:</span><span class="content">{{ item.order_from == 1 ? '小程序' : 'APP' }}</span><span class="name">下单时间:</span><span class="content"><i class="el-icon-time">  {{ item.created_at }}</i></span></div>
        </li>
      </ul>
      <div v-html="copyHtml"></div>
    </div>

</template>
<script>
  
  export default {
    
  data() {
      return {
        name: "InfiniteScroll",
        scrollTop: 0, /
/列表滚动高度
        speed: 15, /
/滚动的速度
        copyHtml: '',
        items:[],
        intervalId: null
      };
    },
  mounted() {
    this.initScroll()
  },
  beforeDestroy() {
    /
/ 清除定时任务
      clearInterval(this.intervalId);
    },
  methods: {
     initScroll() {
            this.$nextTick(() => {
                this.copyHtml = this.$refs.scrollItemBox.innerHTML
                this.startScroll()
            })
      },
      /
/ 开始滚动
      startScroll() {
          setInterval(this.scroll, this.speed);
      },
      /
/ 滚动处理方法
      scroll() {
            this.scrollTop++
            /
/ 获取需要滚动的盒子的高度
            let scrollItemBox = this.$refs.scrollItemBox?.offsetHeight || 1000
            /
/ 当判断滚动的高度大于等于盒子高度时,从头开始滚动
            if (this.scrollTop >= scrollItemBox) {
                this.scrollTop = 0
            }
      }
    }
  };
  </
script>

3.然后在大屏的右侧,用echarts写了两个饼图和折线图表,可以直观的的看到数据统计


export const timeStaticsOption = (xData,tipsArr) => {
  return {
    title: {
      text'',
      subtext:'当天时间段充电订单数',
      subtextStyle:{
        color:'#fff',
      }
    },
    tooltip: {
      trigger'axis',
      axisPointer: {
        type'cross'
      }
    },
    xAxis: {
      type'category',
      data: xData,
      boundaryGapfalse,
      axisLine: {
        showfalse,
        lineStyle: {
          color'#73B131',
          type'dashed'
        }
      },
    },
    yAxis: {
      type'value',
      axisPointer: {
        snaptrue
      }
    },
    series: [
      {
        name'时间段充电订单数',
        type'line',
        smoothtrue,
        data: tipsArr,
      }
    ]
  }
}
export const botDataPieEcharts = (total,a,b)=>{
  console.log(total,a,b)
  return {
    title: {
      text'',
      subtext"Bot总数:"+ total+ '台',
      left'center',
      subtextStyle:{
        color:'#fff',
      }
    },
    tooltip: {
      trigger'item'
    },
    // legend: {
    //   orient: 'vertical',
    //   left: 'left'
    // },
    series: [
      {
        name'Bot数量',
        type'pie',
        radius'50%',
        data: [
          { value: a, name'在线:'+ a +'台' },
          { value: b, name'空闲:'+ b +'台'},
        ],
        emphasis: {
          itemStyle: {
            shadowBlur10,
            shadowOffsetX0,
            shadowColor'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

4.最后也是最耗性能的部分,用three.js写的停车场模拟实景鸟瞰图,3d-map

这里我直接把相关的方法和类,全部封装好,单独引入文件,用到以下文件,

import '../public/threejs/controls/OrbitControls.js'
import '../public/threejs/lines/LineSegmentsGeometry.js';
import '../public/threejs/lines/LineGeometry.js';
import '../public/threejs/lines/LineMaterial.js';
import '../public/threejs/lines/LineSegments2.js';
import '../public/threejs/lines/Line2.js';

在业务中相关代码写好工具方法,

import myWorker from './map.worker';
import FONT_JSON_DATA from './helvetiker_bold.typeface.json';
class basicThree {
    constructor(props) {
        this.from = props.from
        this.callbackSlotNo = props.callback
        console.log(props, 'props')
        this.LineGeometry
        // three 3要素
        this.renderer; //渲染器
        this.camera; //摄像头
        this.scene; //场景
        //光源
        this.ambientLight; //环境光
        this.pointLight; //平行光
        this.DirectionalLight
        //触屏开始时间
        this.touchTime = 0
        //摄像头控制
        this.controls;
        this.init()
        this.onmousedbclick = this.onMouseDblclick.bind(this);
        this.selectObject
        this.rawOption
        this.materialLine = Object()
        this.box = document.createElement("div")

        this.donX
        this.donY
        this.dataNumber
        this.originX; // 偏移量x坐标
        this.originZ; // 偏移量z坐标
        this.thinLine;
        this.wideLine;

        // 定义模型组
        this.initModalGroup();

        this.mapParams;

        this.drawModalFunc = {
            '0': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'0
            },
            '1': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'0
            },
            '2': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'2
            },
            '3': {
                'func'this.initNoAndArea.bind(this),
                'group'null,
                'z'3
            },
            '4': {
                'func'this.basicWall.bind(this),
                'group''barrier_group',
                'z'3
            },
            '5': {
                'func'this.initSlotLine.bind(this),
                'group''initSlotLine_group',
                'z'3
            },
            '6': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'3
            },
            '7': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'3
            },
            '8': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'3
            },
            '9': {
                'func'this.initSlotLine.bind(this),
                'group''initSlotLine_group',
                'z'3
            },
            '10': {
                'func'this.initSlotLine.bind(this),
                'group''initSlotLine_group',
                'z'3
            },
            '11': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'3
            },
            '13': {
                'func'this.initSlotLine.bind(this),
                'group''initSlotLine_group',
                'z'3
            },
            '14': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'3
            },
            '16': {
                'func'this.RoadLineSigns.bind(this),
                'group''RoadLineSigns_group',
                'z'3
            },
            '1001': {
                'func'this.initSlotLine.bind(this),
                'group''initSlotLine_group',
                'z'4
            }
        }
        //字体loader
        this.FontLoader;
        this.getFontLoaderInit()
    }

    init() {
        this.initScene()
        this.initCamera()
        this.initRender()
        this.orbitHelper() //摄像头辅助
        this.animate()
        window.onresize = this.onWindowResize.bind(this);
    }
    initScene() { //场景
        this.scene = new THREE.Scene();
    }
    // // 三维坐标系辅助
    axesHelper() {
        this.scene.add(new THREE.AxesHelper(200))
    }
    initCamera() { //摄像头
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 30//三维场景显示范围控制系数,系数越大,显示的范围越大
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 11000);
        camera.position.set(02000); //设置相机位置
        camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
        this.camera = camera;
    }
    initRender() { //渲染器
        let renderer = new THREE.WebGLRenderer({
            antialiastrue
        });
        let container = document.getElementById('room');
        renderer.setSize(container.offsetWidth, container.offsetHeight);
        container.appendChild(renderer.domElement);
        //告诉渲染器需要阴影效果
        // renderer.shadowMap.enabled = true;
        // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.setClearColor(new THREE.Color('#212129'));
        this.renderer = renderer;
    }
    initModalGroup() {
        this.slot_no_group = null// 车位号组
        this.slot_area_group = null// 车位方框组
        this.barrier_group = null// barrier组
        this.initSlotLine_group = null;
        this.RoadLineSigns_group = null;
    }
    initData(option, index, mapParams, callback, originX, originZ) {//初始化渲染
        this.slot_no_group = new THREE.Group(); // 车位号组
        this.slot_area_group = new THREE.Group(); // 车位方框组
        this.barrier_group = new THREE.Group(); // barrier组
        this.initSlotLine_group = new THREE.Group();
        this.RoadLineSigns_group = new THREE.Group();

        this.originX = originX;
        this.originZ = originZ;
        var data = option['entities_groups'];
        this.rawOption = option;
        this.mapParams = mapParams;
        console.log(data);
        // initSlotLine-画线,RoadLineSigns-画区域,initSlotNumber-车位号,slotAreaRegion-画车位区域(专用),initSlotArea-画块,basicWall-画块(墙体)
        let dataType = null
        for (let i = 0; i < data.length; i++) {
            if (data[i]['entities']) {
                dataType = data[i]['entities'][0]['type'] + '';
                if (this.drawModalFunc[dataType]) {
                    this.drawModalFunc[dataType]['func'](data[i]['entities'], this[this.drawModalFunc[dataType]['group']], this.drawModalFunc[dataType]['z'], true, mapParams['bg'][data[i]['name']])
                }
            }
        }
        if (callback) callback()
    }
    // 清空模型
    clearModal() {
        if (this.scene && this.scene.children) {
            this.initModalGroup();
            if (this.wideLine && this.wideLine.geometry) {
                this.wideLine.geometry.dispose();
                this.wideLine.material.dispose();
                this.scene.remove(this.wideLine);
            }
            if (this.thinLine && this.thinLine.geometry) {
                this.thinLine.geometry.dispose();
                this.thinLine.material.dispose();
                this.scene.remove(this.thinLine);
            }
            let xlType = this.scene.children.filter(function (obj{
                return obj.type == 'Group'
            })
            for (let i = 0; i < xlType.length; i++) {
                for (let j = 0; j < xlType[i]['children'].length; j++) {
                    if (xlType[i]['children'][j]['type'] == 'Mesh') {
                        xlType[i]['children'][j].geometry.dispose();
                        xlType[i]['children'][j].material.dispose();
                    }
                }
                this.scene.remove(xlType[i]);
            }
        }
    }
    // 清除 type 类型的 obj
    clearSlot(type) {
        if (this.scene && this.scene.children) {
            this.scene.children.forEach(obj => {
                if (obj.userData && obj.userData.slot == type) {
                    this.scene.remove(obj);
                }
                if (obj.children.length > 0) {
                    obj.children.forEach(item => {
                        if (item.userData && item.userData.slot == type) {
                            this.scene.remove(obj);
                        }
                    })
                }
            })
        }
    }
    /**
     * 清除模型,模型中有 group 和 scene,需要进行判断
     * @param scene
     * @returns
     */

    clearScene() {
        // 从scene中删除模型并释放内存
        if (this.scene.length > 0) {
            for (var i = 0; i < this.scene.length; i++) {
                var currObj = this.scene[i];

                // 判断类型
                if (currObj instanceof THREE.Scene) {
                    var children = currObj.children;
                    for (var i = 0; i < children.length; i++) {
                        deleteGroup(children[i]);
                    }
                } else {
                    deleteGroup(currObj);
                }
                this.scene.remove(currObj);
            }
        }
        console.log(this.scene, '清空后的 scene')
    }

    // 删除group,释放内存
    deleteGroup(group) {
        //console.log(group);
        if (!group) return;
        // 删除掉所有的模型组内的mesh
        group.traverse(function (item{
            if (item instanceof THREE.Mesh) {
                item.geometry.dispose(); // 删除几何体
                item.material.dispose(); // 删除材质
            }
        });
    }
    initMap(option, index, mapParams, callback, originX, originZ) {
        this.clearScene()
        this.initData(option, index, mapParams, callback, originX, originZ)
    }
    initLight() {
        var light = new THREE.DirectionalLight("#ffffff"0.28100);
        light.position.set(011200); //default; light shining from top
        light.castShadow = true// default false
        this.scene.add(light);
        //环境光
        // var ambient = new THREE.AmbientLight("#ffffff");
        // this.scene.add(ambient);

        // 点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(02000); //点光源位置
        this.scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x888888);
        this.scene.add(ambient);
    }
    initModel() {
        this.initLight()
        // this.axisHelper()
        // 确认页面需要点选车位
        const _self  = this
        if (_self.from === 'confirm') {
            document.getElementById('room').addEventListener('touchstart'function(){
                _self.touchTime = Date.now()
            }, false);
            document.getElementById('room').addEventListener('touchend', _self.onmousedbclick, false);
        }
    }
    orbitHelper() { //创建摄像头辅助
        let controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        controls.target = new THREE.Vector3(000);//控制焦点
        controls.autoRotate = false;//将自动旋转关闭
        // controls.enableRotate = false;
        // controls.minPolarAngle = -Math.PI/2;
        // controls.maxPolarAngle = Math.PI/2;
        // controls.minAzimuthAngle = 0;
        // controls.maxAzimuthAngle = 0;
        // controls.maxZoom = 20;
        // controls.minZoom = 1;
        new THREE.Clock();
        this.controls = controls;
    }
    gridHelper() { // 创建网格辅助
        var gridHelper = new THREE.GridHelper(20200x4040400x404040);
        this.scene.add(gridHelper);
    }
    statsHelper() { //性能插件
        this.stats = new Stats();
        document.body.appendChild(this.stats.dom);
    }
    axisHelper() { //坐标轴辅助
        var helper = new THREE.AxisHelper(3000);
        this.scene.add(helper);
    }
    onWindowResize() { //自适应
        var parent = document.getElementById("room");
        this.camera.aspect = parent.clientWidth / parent.clientHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(parent.clientWidth, parent.clientHeight);
    }
    render() { //渲染
        if (this.stats) this.stats.update();
        this.renderer.render(this.scene, this.camera);
    }
    animate() {
        this.render()
        requestAnimationFrame(this.animate.bind(this));
        // if (this.selectObject != undefined && this.selectObject != null) {
        //     this.renderDiv(this.selectObject);
        // }
    }
    basicWall(dataList, floor, y, ground_show, color) { //渲染墙体
        console.log(dataList, floor, y, ground_show, color);
        var str
        for (var i = 0; i < dataList.length; i++) {
            var arryShape = [];
            str = dataList[i].path;
            for (var j = 0; j < str.length; j++) {
                arryShape.push(new THREE.Vector3(str[j].x, str[j].y, str[j].z));
            }
            var californiaShape = new THREE.Shape(arryShape);
            var extrudeSettings = {
                steps1,
                amount2,
                bevelEnabledfalse,
            };
            var geometry = new THREE.ExtrudeBufferGeometry(californiaShape, extrudeSettings);
            var material = new THREE.MeshPhongMaterial({
                color: color,
                depthTesttrue
            }); //材质对象
            var mesh = new THREE.Mesh(geometry, material); //网格模型对象
            mesh.position.y = 5;
            mesh.position.x = this.originX;
            mesh.position.z = this.originZ;
            mesh.rotateX(-Math.PI / 2);
            // mesh.rotateZ(Math.PI / 4);
            floor.add(mesh);
        }
        floor.visible = ground_show;
        this.scene.add(floor);
    }
    initNoAndArea(dataList, floor, y, ground_show, color) {
        const self = this
        self.slotAreaRegion(dataList, self.slot_area_group, y, ground_show, color);
        self.initSlotNumber(dataList, self.slot_no_group, y, ground_show, self.mapParams['bg'].slot_number);
    }
    initSlotArea(data, floor, y, ground_show, color) { //渲染车位方块
        if (!data) return
        let dataList = data.filter((item) => {
            return item.slot_name;
        })
        let mesh;
        for (let i = 0; i < dataList.length; i++) {
            let arryShape = []
            let str = dataList[i].path;
            for (let j = 0; j < str.length; j++) {
                arryShape.push(new THREE.Vector3(str[j].x, str[j].y, 0))
            }
            let californiaShape = new THREE.Shape(arryShape);
            let extrudeSettings = {
                steps1,
                depth0.1,
                amount0.1,
                bevelEnabledfalse,
            };
            let geometry = new THREE.ExtrudeBufferGeometry(californiaShape, extrudeSettings)
            let material = new THREE.MeshPhongMaterial({
                color: color,
                depthTesttrue
            }); //材质对象
            mesh = new THREE.Mesh(geometry, material); //网格模型对象
            mesh.name = dataList[i].slot_name;
            const path = []
            dataList[i].path.filter(item => { path.push(item.x); path.push(item.y); path.push(8); })
            mesh.userData = {
                "slot"'slot',
                "path": path
            }
            floor.add(mesh);
        }

        floor.rotateX(-Math.PI / 2);
        floor.position.x = this.originX;
        floor.position.z = this.originZ;
        floor.position.y = y;
        floor.visible = ground_show;
        floor.name = 'chewei';
        this.scene.add(floor);
    }
    initSlotLine(dataList, floor, y, ground_show, color) { //渲染车位线
        if (!dataList) return
        for (var i = 0; i < dataList.length; i++) {
            var str = dataList[i].path;
            var geometry = new THREE.Geometry();
            for (var j = 0; j < str.length; j++) {
                geometry.vertices.push(new THREE.Vector3(str[j].x, str[j].y, str[j].z));
            }
            var material = new THREE.LineBasicMaterial({
                color: color
            });
            var line = new THREE.Line(geometry, material);
            line.position.y = y;
            line.position.x = this.originX;
            line.position.z = this.originZ;
            line.rotateX(-Math.PI / 2);
            floor.add(line);
        }
        floor.visible = ground_show;
        this.scene.add(floor)
    }
    getFontLoaderInit (){
        this.FontLoader = new THREE.Font(FONT_JSON_DATA);
    }
    initSlotNumber(dataList, floor, y, ground_show, color) { //渲染车位号
        if (!dataList) return
        let _this = this;
        console.log('dataList.length,floor', dataList.length,floor) 
        for (let i = 0; i < dataList.length; i++) {
            const get_centroid = _this.get_centroid(dataList[i].path)
            // 生成二维字体模型
            var shapes = _this.FontLoader.generateShapes(dataList[i].name, 0.81);
            var fontGeometry = new THREE.ShapeGeometry(shapes);
            // // 材质
            var fontMaterial = new THREE.MeshLambertMaterial({
                color: color,
                side: THREE.DoubleSide
            });

            // // 绑定盒子模型
            fontGeometry.computeBoundingBox();
            fontGeometry.center()
            let FONT = new THREE.Mesh(fontGeometry, fontMaterial);
            // // x = 0,位置
            FONT.position.x = get_centroid[0] + _this.originX;
            FONT.position.y = get_centroid[1] - _this.originZ;
            FONT.position.z = 4;
            FONT.rotateZ(_this.angle(dataList[i].path));
            floor.add(FONT)
        }        
        floor.visible = ground_show;
        floor.rotateX(-Math.PI / 2);
        _this.scene.add(floor);
    }
    get_centroid(cluster) {
        let x = 0;
        let y = 0;
        // let coord_num = cluster.length;
        let coord_num = 4;
        let lat = 0;
        let lon = 0;
        // for (let i = 0; i < cluster.length; i++) {
        for (let i = 0; i < 4; i++) {
            lat = cluster[i]['x'];
            lon = cluster[i]['y'];
            x += lat;
            y += lon;
        }
        x /= coord_num
        y /= coord_num
        let m = [x, y]
        return m
    }
    RoadLineSigns(dataList, floor, y, ground_show, color) {
        if (!dataList) return
        var str;
        for (var i = 0; i < dataList.length; i++) {
            var arryShape = []
            str = dataList[i].path;
            for (var j = 0; j < str.length; j++) {
                arryShape.push(new THREE.Vector3(str[j].x, str[j].y, str[j].z))
            }
            var californiaShape = new THREE.Shape(arryShape);
            var geometry = new THREE.ShapeBufferGeometry(californiaShape)
            var material = new THREE.MeshBasicMaterial({
                color: color
            }); //材质对象
            var mesh = new THREE.Mesh(geometry, material); //网格模型对象
            mesh.rotateX(-Math.PI / 2);
            mesh.position.y = y;
            mesh.position.x = this.originX;
            mesh.position.z = this.originZ;
            floor.add(mesh)
        }
        floor.visible = ground_show
        this.scene.add(floor);
    }
    slotAreaRegion(dataList, floor, y, ground_show, color) {
        if (!dataList) return;
        var str;
        var mesh;
        var material = new THREE.MeshBasicMaterial({
            color: color
        }); //材质对象
        for (var i = 0; i < dataList.length; i++) {
            var arryShape = []
            str = dataList[i].path;
            for (var j = 0; j < str.length; j++) {
                arryShape.push(new THREE.Vector3(str[j].x, str[j].y, str[j].z))
            }
            var californiaShape = new THREE.Shape(arryShape);
            var geometry = new THREE.ShapeBufferGeometry(californiaShape)
            mesh = new THREE.Mesh(geometry, material); //网格模型对象
            mesh.name = dataList[i].name;
            const path = []
            dataList[i].path.filter(item => { path.push(item.x); path.push(item.y); path.push(8); })
            mesh.userData = {
                "slot"'slot',
                "path": path
            }
            floor.visible = ground_show
            floor.add(mesh);
        }
        floor.rotateX(-Math.PI / 2);
        floor.position.y = y;
        floor.position.x = this.originX;
        floor.position.z = this.originZ;
        this.scene.add(floor);
    }
    // 计算多个坐标点的中心点(地理坐标系--平面直角坐标系)(用于车位号在车位方块内居中显示)
    get_centroid(cluster) {
        let x = 0;
        let y = 0;
        // let coord_num = cluster.length;
        let coord_num = 4;
        let lat = 0;
        let lon = 0;
        // for (let i = 0; i < cluster.length; i++) {
        for (let i = 0; i < 4; i++) {
            lat = cluster[i]['x'];
            lon = cluster[i]['y'];
            x += lat;
            y += lon;
        }
        x /= coord_num
        y /= coord_num
        let m = [x, y]
        return m
    }
    // 计算两点距离
    distance(p1, p2) {
        let dx = Math.abs(p2.x - p1.x);
        let dy = Math.abs(p2.y - p1.y);
        let dis = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
        return dis;
    }
    // 确定两点与x轴夹角(选取下标为0、1和1、2两点作比较,选出车位方块长边,根据长边与x轴夹角计算出车位方块相对于x轴的旋转角度,用于设置车位号的旋转,使车位号与车位方块长边保持平行)
    angle(point) {
        if (this.distance(point[0], point[1]) > this.distance(point[1], point[2])) {
            let a = point[0];
            let b = point[1];
            if (a.x > b.x) {
                var radian = Math.atan2(a.y - b.y, a.x - b.x); // 返回来的是弧度
            } else {
                var radian = Math.atan2(b.y - a.y, b.x - a.x); // 返回来的是弧度
            }
            // var angle = 180 / Math.PI * radian; // 根据弧度计算角度
            return radian;
        } else {
            let a = point[1];
            let b = point[2];
            if (a.x > b.x) {
                var radian = Math.atan2(a.y - b.y, a.x - b.x); // 返回来的是弧度
            } else {
                var radian = Math.atan2(b.y - a.y, b.x - a.x); // 返回来的是弧度
            }
            // var angle = 180 / Math.PI * radian; // 根据弧度计算角度
            return radian;
        }
    }
    // 画细线
    drawThinLine(positions) {
        if (this.thinLine && this.thinLine.geometry) {
            this.thinLine.geometry.dispose();
            this.thinLine.material.dispose();
            this.scene.remove(this.thinLine);
        }
        if (!positions) return
        console.log(positions)
        var geometry = new THREE.LineGeometry();
        geometry.setPositions(positions);
        const material = new THREE.LineMaterial({
            color'#14f408',
            linewidth1// in pixels
            dashedfalse
        });
        material.resolution.set(window.innerWidth, window.innerHeight)
        // line
        this.thinLine = new THREE.Line2(geometry, material);
        this.thinLine.rotateX(-Math.PI / 2);
        // this.thinLine.position.x = 300;

        this.thinLine.position.y = 5;
        this.thinLine.position.x = this.originX;
        this.thinLine.position.z = this.originZ;
        this.scene.add(this.thinLine);
    }
    // 画粗线
    drawWideLine(positions) {
        if (this.wideLine && this.wideLine.geometry) {
            this.wideLine.geometry.dispose();
            this.wideLine.material.dispose();
            this.scene.remove(this.wideLine);
        }
        var geometry = new THREE.LineGeometry();
        geometry.setPositions(positions);
        const material = new THREE.LineMaterial({
            color'#14f408',
            linewidth2// in pixels
            dashedfalse
        });
        material.resolution.set(window.innerWidth, window.innerHeight)
        // line
        this.wideLine = new THREE.Line2(geometry, material);
        this.wideLine.rotateX(-Math.PI / 2);
        // this.wideLine.position.x = 300;

        this.wideLine.position.x = this.originX;
        this.wideLine.position.z = this.originZ;
        this.scene.add(this.wideLine);
    }
    renderDiv(dataNumber, object) { //浮动窗口
        console.log('renderDiv',dataNumber, object)
        this.box.id = 'label'
        if (dataNumber === 0) {
            this.box.remove()
            this.callbackSlotNo({ slot_no''floor_id'' })
            return false
        } else {
            document.getElementById('room').appendChild(this.box)
        }
        // 获取窗口的一半高度和宽度
        var halfWidth = window.innerWidth / 2;
        var halfHeight = window.innerHeight / 2;

        // 逆转相机求出二维坐标
        // var vector = object.position.clone().project(this.camera);

        // 修改 div 的位置
        // this.box.style.display = 'block'
        // box.style.left = (vector.x * halfWidth + halfWidth) + 'px'
        // box.style.top = (-vector.y * halfHeight + halfHeight) + 'px'
        this.box.style.left = (this.donX + 15) + 'px'
        this.box.style.top = (this.donY + 15) + 'px'
        // this.box.innerHTML = "车位号:" + object.name
        if (object && object.name) {
            this.box.innerHTML = "车位号:" + object.name
            this.callbackSlotNo({ slot_no: object.name, floor_idthis.rawOption.floor_id })
        } else {
            this.box.innerHTML = '请勾选车位号'
            this.callbackSlotNo({ slot_no''floor_id''})
        }
    }
    renderPOI(slot_position) { //浮动窗口
        console.log('renderPOI',slot_position)
        this.box.id = 'label'
        document.getElementById('room').appendChild(this.box)
        this.box.style.left = (this.donX + 15) + 'px'
        this.box.style.top = (this.donY + 15) + 'px'
       
        this.box.innerHTML = '已选择'
        this.callbackSlotNo({ slot_no''floor_idthis.rawOption.floor_id,slot_position: slot_position})
    }
    //车位点击事件 大头针标记出所选的车位
    onMouseDblclick(event) {
        console.log(event);
        if((Date.now() - this.touchTime) > 300){
            return
        }
        // 获取 raycaster 和所有模型相交的数组,其中的元素按照距离排序,越近的越靠前
        var intersects = this.getIntersects(event);
        console.log('intersects',intersects);
        // 先清除大头针lock(原需求是点击车位号加大头针,所以点击时需先清除大头针再重绘)
        this.clearSlot('lock')
        // 清除细线 车位边框
        this.drawThinLine()
        // 获取选中最近的 Mesh 对象
        if (intersects.length != 0 && intersects[0].object instanceof THREE.Mesh) {
            // 判断和上一次点击的车位相同,则清除selectObject,取消背景颜色等状态
            if (this.selectObject == intersects[0].object) {
                this.dataNumber = 0
                this.selectObject = intersects[0].object;
            } else {
                this.selectObject = intersects[0].object;
                this.dataNumber = 1
                // 根据位置标记大头针
                // const point = intersects[0].point
                // this.initLock({x:point.x - this.originX, y:-point.z+this.originZ, z:point.y}, 'lock')
            }
            console.log('this.dataNumber, this.selectObject',this.dataNumber, this.selectObject,)
            this.renderDiv(this.dataNumber, this.selectObject)
            this.changeMaterial(this.selectObject);
            this.render()
        } else {
            this.selectObject=''
            const slot_p = this.getIntersectsPlane(event) 
            // const slot_position = {
            //     x: slot_p.x,
            //     y: slot_p.z,
            //     z: slot_p.y,
            // }
            const slot_position = {
                x: slot_p.x - this.originX,
                y: slot_p.z + this.originZ,
                z0,
            }
            console.log("未选中 Mesh!",slot_position);
            //先清除大头针后添加大头针标记位置
            this.initLock({x:slot_p.x - this.originX, y:-slot_p.z+this.originZ, z:slot_p.y}, 'lock')
            this.render()
            this.renderPOI(slot_position)
        }
    }
    /* 获取射线与平面相交的交点 */
    getIntersectsPlane(event) {
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        mouse.x = (event.changedTouches[0].clientX / document.getElementById('room').clientWidth) * 2 - 1;
        mouse.y = -(event.changedTouches[0].clientY / document.getElementById('room').clientHeight) * 2 + 1;
        var normal = new THREE.Vector3(010);
        /* 创建平面 */
        var planeGround = new THREE.Plane(normal, 0);
        /* 从相机发出一条射线经过鼠标点击的位置 */
        raycaster.setFromCamera(mouse, this.camera);
        /* 获取射线 */
        var ray = raycaster.ray;
        /* 计算相机到射线的对象,可能有多个对象,返回一个数组,按照距离相机远近排列 */
        var intersects = ray.intersectPlane(planeGround);
        /* 返回向量 */
        return intersects;
    }
    changeMaterial(object) { //更换材质
        console.log(object, 888888)
        if (this.dataNumber == 0) {
            var material = new THREE.MeshBasicMaterial({
                color"#212129",
            });
            this.selectObject = ''
        } else {
            var material = new THREE.MeshBasicMaterial({
                color"#161621",// "#14f408",
            });
            if (object.userData && object.userData.path) {
                this.drawThinLine(object.userData.path)
            }
        }
        object.material = material;
    }
    locateSlot(slot_no) {
        console.log('即将高亮车位号:' + slot_no);
        this.drawThinLine();
        this.scene.traverse(obj => {
            if (obj.type == "Mesh" && obj.name) {
                if (slot_no && obj.name == slot_no) {
                    obj.material = new THREE.MeshBasicMaterial({
                        color'#161621',
                        side: THREE.DoubleSide
                    });
                    this.drawThinLine(obj.userData.path)
                } else {
                    obj.material = new THREE.MeshBasicMaterial({
                        color'#212129',
                        side: THREE.DoubleSide
                    });
                    
                }
            }
        })
    }
    initLock(dataList, imgName) { //显示车位大头针
        this.createLockTextureMesh(dataList, new THREE.Group(), imgName)
    }
    initCar(dataList, imgName, offset_x, offset_y) { //显示车辆
        this.clearSlot(imgName)
        this.createTextureMesh(dataList, new THREE.Group(), imgName)
    }
    createLockTextureMesh(dataList, floor, imgName) {
        // var zoom = parseFloat(loaclInfo.map_info.zoom)
        var geometry = new THREE.PlaneGeometry(2211);
        //几何体创建纹理坐标 
        console.log(dataList, 'local_map_id一致')
        geometry.vertices[0].uv = new THREE.Vector2(00);
        geometry.vertices[1].uv = new THREE.Vector2(10);
        geometry.vertices[2].uv = new THREE.Vector2(11);
        geometry.vertices[3].uv = new THREE.Vector2(01);
        var texture = THREE.ImageUtils.loadTexture(
             "../images/" + imgName + ".png",
            
            nullfunction (t{ }
        );
        var material = new THREE.MeshBasicMaterial({
            map: texture,
            transparenttrue,
            side: THREE.DoubleSide
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(dataList.x + this.originX, 15, -dataList.y + this.originZ)
        // mesh.position.z = 2
        mesh.rotateX(-Math.PI / 2)
        mesh.userData = {
            "slot": imgName,
        }
        console.log(mesh, 'lock')
        floor.add(mesh)
        this.scene.add(floor);
    }
    createTextureMesh(dataList, floor, imgName, offset_x, offset_y) {
        // var zoom = parseFloat(loaclInfo.map_info.zoom)
        var geometry = new THREE.PlaneGeometry(2211);
        if ((dataList.local_map_id && this.rawOption.floor_id == dataList.local_map_id) || !dataList.local_map_id) {
            //几何体创建纹理坐标 
            geometry.vertices[0].uv = new THREE.Vector2(00);
            geometry.vertices[1].uv = new THREE.Vector2(10);
            geometry.vertices[2].uv = new THREE.Vector2(11);
            geometry.vertices[3].uv = new THREE.Vector2(01);
            var texture = THREE.ImageUtils.loadTexture(
                "../../images/" + imgName + ".png",
                nullfunction (t{ }
            );
            var material = new THREE.MeshBasicMaterial({
                map: texture,
                transparenttrue,
                side: THREE.DoubleSide
            });
            var mesh = new THREE.Mesh(geometry, material);
            console.log(dataList, 1111)
            mesh.position.set(dataList.x + this.originX, 15, -dataList.y + this.originZ)
            mesh.rotateX(-Math.PI / 2)
            if (dataList.angle) {
                let piVal = (dataList.angle - 90) * (Math.PI / 180);
                mesh.rotateZ(piVal);
            }
            mesh.userData = {
                "slot": imgName
            }
            console.log(mesh)
            floor.add(mesh)
            this.scene.add(floor);

            // } else {
            //     return false
        }
    }
    getIntersects(event) { // 获取鼠标点击的物体,如果要获取鼠标点击的平面(非物体)的坐标,见mapLink.js的getIntersects方法
        // 声明 raycaster 和 mouse 变量
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
        mouse.x = (event.changedTouches[0].clientX / document.getElementById('room').clientWidth) * 2 - 1;
        mouse.y = -(event.changedTouches[0].clientY / document.getElementById('room').clientHeight) * 2 + 1;
        //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
        raycaster.setFromCamera(mouse, this.camera);
        // 获取与射线相交的对象数组,其中的元素按照距离排序,越近的越靠前
        var children_ = []
        this.scene.traverse(obj => {
            if (obj.type == "Mesh" && obj.userData.slot == 'slot') {
                obj.material = new THREE.MeshBasicMaterial({
                    color'#212129',
                });
                children_.push(obj)

            }
        })
        var intersects = raycaster.intersectObjects(children_);
        //返回选中的对象
        return intersects;

    }
    lineNotClosed(dataList, floor, z, ground_show, color) { //渲染线 不闭合类
        if (!dataList) return
        // 5车道分道线 6减速带 7路标
        for (var i = 0; i < dataList.length; i++) {
            var str
            if (dataList[i].data_type == 1001) {
                str = JSON.parse(dataList[i].points)
                var geometry = new THREE.Geometry();
                for (var j = 0; j < str.length; j++) {
                    geometry.vertices.push(new THREE.Vector3(str[j].x, str[j].y, z));
                }
                var material = new THREE.LineBasicMaterial({
                    color: color,
                    linewidth35
                });
                var line = new THREE.Line(geometry, material);
                line.position.z = z
                floor.visible = ground_show
                floor.add(line)
                this.scene.add(floor)
            }
        }
    }
    start_car(dataList, loaclInfo, index, floor, z, ground_show) { // 创建导航轨迹 
        if (!dataList) return
        var vector = []
        var zoom = parseFloat(loaclInfo.map_info.zoom)
        var offset_x = parseFloat(loaclInfo.map_info.offset_x)
        var offset_y = parseFloat(loaclInfo.map_info.offset_y)
        for (var i = 0; i < dataList.length; i++) {
            if (loaclInfo.local_map_id[index] === dataList[i].mapId) {
                vector.push(new THREE.Vector3((parseFloat(dataList[i].xPos) + offset_x) * zoom, (parseFloat(dataList[i].yPos) + offset_y) * zoom, z))
            }

        }

        if (vector.length == '') {
            return false
        }
        // var curve = new THREE.CatmullRomCurve3([
        //     new THREE.Vector3(0, 0, 0),
        //     new THREE.Vector3(100, 500, 0),
        //     new THREE.Vector3(500, 500, 0),
        //     new THREE.Vector3(500, 800, 0)
        // ], false /*是否闭合*/ )
        var curve = new THREE.CatmullRomCurve3(vector, false)
        var progress = 0;
        var tubeGeometry = new THREE.TubeGeometry(curve, 6415100false);
        var textureLoader = new THREE.TextureLoader();
        // var texture = textureLoader.load('../../../assets/libs/map/track.png');
        // 设置阵列模式为 RepeatWrapping
        texture.wrapS = THREE.RepeatWrapping
        texture.wrapT = THREE.RepeatWrapping
        // 设置x方向的偏移(沿着管道路径方向),y方向默认1
        //等价texture.repeat= new THREE.Vector2(20,1)
        texture.repeat.x = 20;
        var tubeMaterial = new THREE.MeshPhongMaterial({
            map: texture,
            transparenttrue,
        });
        var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
        tube.position.z = z
        //scene.add(tube)
        floor.add(tube)
        floor.visible = ground_show
        this.scene.add(floor)

        nitcar()

        function nitcar({
            requestAnimationFrame(nitcar);
            texture.offset.x -= 0.02
            if (progress > 1.0) {
                return;
            }
            progress += 0.0005;

            if (curve) {
                let point = curve.getPoint(progress);
                let point_car = curve.getPoint(progress + 0.0003);
                if (point && point.x) {
                    // cubeBox.position.set(point.x, point.y);
                    // cubeBox.lookAt(point_car.x, point_car.y,z);
                    // cubeBox.rotateY(Math.PI /2);
                }
            }
        }

    }
    lambertBox() {
        var cubeGeometry = new THREE.BoxGeometry(101010);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color0x00ffff
        });
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = 5;
        cube.position.y = 5;
        cube.position.z = -5;
        //告诉立方体需要投射阴影
        cube.castShadow = true;
        this.scene.add(cube);
    }

}

export default basicThree

最后在模块文件中,开始获取数据动态渲染吧

  import basicThree from '@/utils/stationMap/map_type';
  let threeJs = null ;
  let dataList = [];
  threeJs = new basicThree({callbackthis.callbackSlotNo });
  threeJs.initModel();
  ...
  //获取数据后创建楼层
  threeJs.initMap(dataList[this.theFloor], 2, mapParams, this.init, this.offset_x, this.offset_y);

由于需要渲染的数据太多,在以前的老vue2项目上继续开发就会遇到问题,升级到vue3吧又会出现兼容性问题,我现在进退两难,最后我决定求稳,不升级框架了,因为我也没时间去测试和把老业务全搞过来,太需要时间了,所以,求稳吧,逐步优化性能。这就用到了,我之前写的另一篇文章,如何进行前端项目优化的一步一步操作。除了及时销毁变量和定时器,少用闭包之外,来看看我的另一篇文章

关于性能优化,我做了哪些?(juejin.cn/post/731189…[1])


[1]

https://juejin.cn/post/7311894381393100851: https://juejin.cn/post/7311894381393100851


原文链接: https://juejin.cn/post/7366084203954487322

作者:为了WLB努力

参考资料


[1]

https://juejin.cn/post/7311894381393100851: https://juejin.cn/post/7311894381393100851


往期推荐


前端 UI 组件的 AI 时代来了!!!
在滴滴开发H5一年了,我遇到了这些问题
单页面首屏优化,打包后大小减少64M,加载速度快了13.6秒

最后


  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

点个在看支持我吧

浏览 146
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报