ThreeJs技术交流(3)——结合ECharts在3D画面上添加图表

ThreeJs技术交流(3)——结合ECharts在3D画面上添加图表

写在前面

前几天又有一个朋友问我一个效果怎么做。他也是看了CSDN上一位大神发的3D工厂的示例,其中有一个演示如下(注意当中的图表):
在这里插入图片描述
图片来源于https://blog.csdn.net/ALLENJIAO/article/details/98874436
我发现这个作者和我前天引用的那篇文章的作者居然是同一个人!不得不佩服人家的技术和才能。做出来的东西比我这个初学者厉害多了。但是这些毕竟都是些人家的辛苦之作,他的文章里也都只是展示了一下效果,完全没有任何代码,看到博客的最后原来他在CSDN上开了相关的教学课程,虽然每一个小案例都要一百块。。。
说实话我不大喜欢这种付费的东西,现在开源的软件技术越来越多,包括ThreeJs本身就是开源的一个项目,私下觉得我利用这个开源的项目做出来的一些小玩意儿,也应该分享给大家,而不是作为一种赚钱的手段。我也提倡大家一步步地学习,而不是花钱去买现成的代码项目之类的。好了废话不多说马上进入正题。

效果演示

我还是基于之前写的3D智能仓库,在这个项目的背景上添加之后发现的好玩的东西(上一节的滚动标语也保留下来了)。
2019.11.26 更新:我最近建立了个人网站,大家可以访问下面的链接查看演示
3D仓库演示
2019.11.28 更新:代码和图片资源等已上传至GitHub
https://github.com/xiao149/ThreeJsDemo
在这里插入图片描述
ECharts想必很多人都知道,它可以帮助你很轻松地画出各种类型的图表,饼图、柱状图、折线图等等完全不在话下,囿于我才疏学浅,这里就仅仅用了两种形式的图表:饼状图和柱状图。
数据当然是我随便编的,也是写死的。大家可以根据自己的需要改善。
其中饼状图可以始终朝向用户的视角,而柱状图是固定方向的。这里给出的两种方式大家也可以自行选择。

如何实现

ECharts相关的知识我就不说了,这里给未接触过ECharts的同学们官方实例教程文档:https://www.echartsjs.com/examples/zh/index.html

添加固定视角的图表

其实功能实现是蛮简单的,实质就是把ECharts创建的图表作为一种材质贴到一个透明平面上。我新增一个initEcharts()方法,其中写上:

pieChart = echarts.init( $("<canvas width='512' height='512'></canvas>")[0] );
option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};
pieChart.setOption(option);

pieChart.on('finished', function () {
  var infoEchart = new THREE.TextureLoader().load( pieChart.getDataURL() );

  var infoEchartMaterial = new THREE.MeshBasicMaterial({
    transparent: true,
    map: infoEchart,
    side: THREE.DoubleSide
  });

  var echartPlane = new THREE.Mesh(new THREE.PlaneGeometry(100,100),infoEchartMaterial);
  echartPlane.position.set(100, 150, 0);
  scene.add(echartPlane);

});

其实上面前半部分一大段都是ECharts创建一个柱状图,真正与ThreeJs有关的只有最后几句,对大家来说应该还是很简单的。

添加始终朝向用户视角的图表

这里我们就需要用到ThreeJs的Sprite精灵了,原谅我不是专业的前台,对这个也是一知半解,只知道精灵可以做到始终面对用户视角。大家可以参考下ThreeJs中文文档关于精灵的描述:点我跳转
同样在initEcharts()方法中加上:

pieChart2 = echarts.init( $("<canvas width='512' height='512'></canvas>")[0] );
option2 = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
pieChart2.setOption(option2);

pieChart2.on('finished', function () {
  var spriteMap = new THREE.TextureLoader().load( pieChart2.getDataURL() );

  var spriteMaterial = new THREE.SpriteMaterial({
    transparent: true,
    map: spriteMap,
    side: THREE.DoubleSide
  });

  var sprite = new THREE.Sprite( spriteMaterial );
  sprite.scale.set(150, 150, 1)
  sprite.position.set(-100, 180, 0);
  scene.add(sprite);

});

最后别忘记在HTML的init()初始化中调用initEcharts(),大功告成啦!

结束语

我跟广大学习ThreeJs的初学者一样,仍带着懵懂的心去探索这片新大陆,CSDN上的许多前辈都给了我很多关键的灵感和技术方法,如果大家有兴趣,也可以互相交流成长,欢迎大家指导咨询。PS:大家有兴趣可以点进去我的头像,陆陆续续也写了十来篇了。
链接:使用ThreeJs从零开始构建3D智能仓库——第一章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第二章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第三章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第四章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第五章: 点我跳转.

对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。 此教学版本为threeJS107版本。 关于版本不建议大家使用低于90的版本学习。 以下是课程目录 1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景) 2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等) 3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理) 4-高级图形算法常见库(求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等) 5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用) 6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作) 7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解) 8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道) 9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动) 10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库) 11-常见渲染以及透明度问题 12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果) 13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势) 14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动) 15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法) 16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页