110 lines
3.3 KiB
HTML
110 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>three.js使用Echarts贴图</title>
|
|
<script src="../js/three.js"></script>
|
|
<script src="../js/controls/OrbitControls.js"></script>
|
|
<script src="./echarts.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="webgl" style="width:512px;height: 512px;float: left;"></div>
|
|
<div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>
|
|
<script>
|
|
var myChart = echarts.init(document.getElementById('echart'));
|
|
option = {
|
|
tooltip: {
|
|
formatter: "{a} <br/>{b} : {c}%"
|
|
},
|
|
// toolbox: {
|
|
// feature: {
|
|
// restore: {},
|
|
// saveAsImage: {}
|
|
// }
|
|
// },
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
detail: { formatter: '{value}%' },
|
|
data: [{ value: 50, name: '完成率' }]
|
|
}
|
|
]
|
|
};
|
|
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
myChart.setOption(option, true);
|
|
class Basescene {
|
|
constructor(dom) {
|
|
this.id = (new Date()).getTime();
|
|
this.dom = dom;
|
|
this.divWidth = this.dom.offsetWidth;
|
|
this.divHeight = this.dom.offsetHeight;
|
|
this.scene = new THREE.Scene();
|
|
this.camera = new THREE.PerspectiveCamera(45, this.divWidth / this.divHeight, 1, 2000);
|
|
this.renderer = new THREE.WebGLRenderer({
|
|
alpha: true,
|
|
antialias: true
|
|
});
|
|
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
|
|
this.init();
|
|
}
|
|
init() {
|
|
this.camera.position.set(0, 0, 20);
|
|
this.camera.lookAt(this.scene.position);
|
|
this.renderer.setClearColor(0x222222);
|
|
this.renderer.setSize(this.divWidth, this.divHeight);
|
|
this.dom.appendChild(this.renderer.domElement);
|
|
// this.scene.add(new THREE.AxesHelper(10));
|
|
this.animate();
|
|
this.addLight();
|
|
console.log(this.scene);
|
|
}
|
|
addLight() {
|
|
const light = new THREE.AmbientLight(0xffffff);
|
|
this.scene.add(light);
|
|
}
|
|
render() {
|
|
this.renderer.render(this.scene, this.camera);
|
|
}
|
|
animate = () => {
|
|
this.request = requestAnimationFrame(this.animate);
|
|
this.render();
|
|
}
|
|
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);
|
|
}
|
|
changeTextureE(texture) {
|
|
this.plane.material.map = new THREE.TextureLoader().load(texture)
|
|
this.plane.material.needsUpdate = true
|
|
}
|
|
changeTextureT(texture) {
|
|
this.plane.material.map = new THREE.CanvasTexture(texture)
|
|
this.plane.material.needsUpdate = true
|
|
}
|
|
}
|
|
const dom = document.getElementById("webgl");
|
|
const scene = new Basescene(dom);
|
|
scene.addPlane();
|
|
setTimeout(() => {
|
|
var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0]
|
|
scene.changeTextureT(thiscancas)
|
|
}, 2000);
|
|
setTimeout(() => {
|
|
var texture = myChart.getDataURL({
|
|
pixelRatio: 4,
|
|
backgroundColor: '#fff'
|
|
});
|
|
scene.changeTextureE(texture)
|
|
}, 4000);
|
|
</script>
|
|
</body>
|
|
</html>
|