Change vertex color

HTML

<!DOCTYPE html>
<html>
<body>
<div class="slidecontainer">
  <input type="range" min="1" max="4" value="1" class="slider" id="myRange">
</div>

</body>
</html>

CSS

body {
  overflow: hidden;
  margin: 0;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

JavaScript

// https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html

import * as _ from "https://threejs.org/build/three.module.js";
import {
  BufferGeometryUtils
} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";


let scene = new _.Scene();
let camera = new _.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(5, -5, 20);

let renderer = new _.WebGLRenderer();
renderer.setClearColor(0x202020);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let geoms = [];
let c = new _.Color();
let cells = [
  [1, '#ff0000', '#ff0000', '#ff0000','#ffffff'],
  [2, '#00ff00', '#ff00ff', '#ff0000','#ffffff'],
  [3, '#0000ff', '#ffff00', '#ff00ff','#ffffff'],
  [4, '#ffffff', '#ffff00', '#00ff00','#ffffff']
];




for (let i = 0; i < cells.length; i++) {
  let g = createHex(cells[i]);
  g.translate(-cells.length + i * cells.length, 0, 0);
  geoms.push(g);
}

let geom = BufferGeometryUtils.mergeBufferGeometries(geoms);
let mat = new _.MeshBasicMaterial({
  vertexColors: true,
  wireframe: true
});
let mesh = new _.Mesh(geom, mat);

scene.add(mesh);

function createHex(cell) {
  let baseVec = new _.Vector3(1, 0, 0);
  let axis = new _.Vector3(0, 0, 1);
  let angleStep = Math.PI / 3;
  let pts = [];
  let col = [
    [],
    [],
    [],
    []
  ];

  for (let i = 0; i < 6; i++) {
    pts.push(new _.Vector3().copy(baseVec).applyAxisAngle(axis, angleStep * i));
    for (let j = 0; j < 4; j++) {
      c.set(cell[j + 1]); //get the fist color entry in the array
      col[j].push(c.r, c.g, c.b);
    }

  }


  let geomHex = new _.BufferGeometry().setFromPoints(pts);
  geomHex.setIndex([0, 2, 4, 0, 1, 2, 2, 3, 4, 4, 5, 0]);
  geomHex.setAttribute("color", new _.BufferAttribute(new Float32Array(col[0]), 3));
  geomHex.setAttribute("color1", new _.BufferAttribute(new Float32Array(col[0]), 3));
  geomHex.setAttribute("color2", new _.BufferAttribute(new Float32Array(col[1]), 3));
 ...