
      import * as THREE from "./three.module.js";
      import {OrbitControls} from "./OrbitControls.js";
      
      const canvas = document.getElementById("dm-canvas")
      
      const renderer = new THREE.WebGLRenderer({canvas});
      
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(100, 1, 1, 1000);
      camera.position.set(7,0,5);
      
      const controls = new OrbitControls(camera, canvas);
      
      // Lights
      const ambient =new THREE.AmbientLight(0xffffff, 0.2);
      scene.add(ambient);

      const light1 = new THREE.DirectionalLight(0xffffff, 2);
      light1.position.set(-8,0,2);
      scene.add(light1);
      const lightHelper1 = new THREE.DirectionalLightHelper(light1, 3);
      scene.add(lightHelper1);

      const points_material = new THREE.PointsMaterial({
          //color: 0x99ccff,
          vertexColors: true,
          size: .1
      })

      const material = new THREE.MeshLambertMaterial({
          color: "white",
          vertexColors: true,
          side: THREE.DoubleSide,
          wireframe: false
      });
      
      var geom = new THREE.BufferGeometry()      
      // var gui = new dat.GUI();
      // gui.add(mesh.material, "wireframe");
      
      const cloud = new THREE.Points(geom, points_material);
      const mesh = new THREE.Mesh(geom, material)
      
      function render_dm(values) {
          
          //var values = Array.from({length: 97}, () => (Math.random() -0.5) / 1.0 );
          //console.log(values)
          
          // Remove old meshes from the scene
          scene.remove(scene.getObjectByName("piezo"));
          scene.remove(scene.getObjectByName("coating"));
          
          // Add z values
          const points3d = [];
          for (let i = 0; i < dm.actuators.length; i++) {
              let x = dm.actuators[i][0] *10 -5
              let y = dm.actuators[i][1] *10 -5
              let z = values[i]
              points3d.push(new THREE.Vector3(x, y, z));
          }
          
          // Set points to the geometry
          geom.setFromPoints(points3d);

          // Set colors to the geometry
          const colors = color_scale(values)
          geom.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

          ///////////////
          /// Add piezos
          
          cloud.name = "piezo"
          scene.add(cloud);

          ///////////////
          /// Add coating

          // triangulate x, y
          const indexDelaunay = Delaunator.from(
              points3d.map(v => {
                  return [v.x, v.y];
              })
          );

          const meshIndex = []; // delaunay index => three.js index
          for (let i = 0; i < indexDelaunay.triangles.length; i++){
              meshIndex.push(indexDelaunay.triangles[i]);
          }

          geom.setIndex(meshIndex);
          geom.computeVertexNormals();

          mesh.name = "coating"
          scene.add(mesh);
          
      }
      
      function resize(renderer) {
          const canvas = renderer.domElement;
          const width = canvas.clientWidth;
          const height = canvas.clientHeight;
          const needResize = canvas.width !== width || canvas.height !== height;
          if (needResize) {
              renderer.setSize(width, height, false);
          }
          return needResize;
      }

      function render(canvas) {
          if (resize(renderer)) {
              camera.aspect = canvas.clientWidth / canvas.clientHeight;
              camera.updateProjectionMatrix();
          }
          renderer.render(scene, camera);
          requestAnimationFrame(render);
      }

      function color_scale(values) {
          // Set colors for each vertex based on values
          
          const colors = [];
          const minValues = Math.min(...values)
          const maxValues = Math.max(...values)
          //console.log(minValues, maxValues)
          
          for (let i = 0; i < values.length; i++) {
              if (maxValues!=minValues) {                  
                  // Convert values to a range between 0 and 1
                  var index = Math.round( (values[i] - minValues) / (maxValues-minValues)  * (brbg.length - 1));
                  var rgb = brbg[index];
              } else {
                  var rgb = [255,255,255]
              }
              const color = new THREE.Color().setRGB(rgb[0]/255, rgb[1]/255, rgb[2]/255);
              colors.push(color.r, color.g, color.b);
          }
          return colors
      }

      render(canvas)

export {render_dm}
