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智能倉庫——第五章: 點我跳轉.