threejs + echarts动态贴图并更新

1.使用THREE.CanvasTexture通过echarts图表库canvas生成Texture，然后贴图，render时设置材质更新。

  material.map = new THREE.CanvasTexture( canvas );
  后期更新材质：
  material.map.needsUpdate = true;

2.代码

• 1.创建panel

 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);
}

• 2.贴图

 <div id="webgl" style="width:512px;height: 512px;float: left;"></div>
 <div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>

var myChart = echarts.init(document.getElementById('echart'));
changeTextureE(texture){
    this.plane.material.map = new THREE.TextureLoader().load(texture)
    this.plane.material.needsUpdate = true  
}

var texture = myChart.getDataURL({
    pixelRatio: 4,
    backgroundColor: '#fff'
}); 
scene.changeTextureE(texture)

3.效果图
[点击](https://cloud.tencent.com/developer/article/1631141)