chore: 初始化南京中车大屏幕

2026-06-08 17:22:32 +08:00
commit 51f0061b29
193 changed files with 70394 additions and 0 deletions
--- a/cs.html
+++ b/cs.html
@@ -0,0 +1,109 @@
+<!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>