three相机在模型上_如何把echarts的图表贴在three.js模型

如何把echarts的图表贴在three.js模型

发布时间：2020-06-21 20:06:10

来源：亿速云

阅读：201

作者：鸽子

因为二者都是渲染成canvas的，直接用echarts生成的canvas当作贴图就可以了。

方法确定可行，那么我们就直接开始撸代码。

先搭建一个three的基本场景起来，这里不在复述。

然后新建一个平面，我们把图片贴在这个平面上即可。addPlane() {

var geometry = new THREE.PlaneGeometry(10,10);

var material = new THREE.MeshBasicMaterial({

side: THREE.DoubleSide,

// transparent:true

});

this.plane = new THREE.Mesh(geometry, material);

this.scene.add(this.plane);

}

摆好相机的角度，此时场景中是一个白板。

然后打开echarts的官网，找到案例，来个仪表盘吧。代码拷贝下来。跑起来。

为了方便演示，我在body中创建了2个div，分别作为three和图表的容器。实际开发中图表的容器不需要显示出来的，也不需要添加到body中的。

option = {

tooltip: {

formatter: "{a}
{b} : {c}%"

},

//toolbox会在右上角生成两个功能按钮，咱们不需要，直接干掉。

// toolbox: {

// feature: {

// restore: {},

// saveAsImage: {}

// }

// },

series: [

{

name: '业务指标',

type: 'gauge',

detail: { formatter: '{value}%' },

data: [{ value: 50, name: '完成率' }]

}

]

};

option.series[0].data[0].value =