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智能仓库——第五章: 点我跳转.