JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="triangle_visualization"></div>
    <div id="preview_visualization"></div>
    <form>Cyan:
        <input id="cyanValue" type="cyan" value="0.5">
        <br>Magenta:
        <input id="magentaValue" type="magenta" value="0.25">
        <br>Yellow:
        <input id="yellowValue" type="yellow" value="0.25">
    </form>
</body>

CSS

body {
    background-color: #545454
}

JavaScript

var triangleScene = new THREE.Scene();
var triangleCamera = new THREE.PerspectiveCamera(75, 200 / 200, 0.1, 1000);
var previewScene = new THREE.Scene();
var previewCamera = new THREE.PerspectiveCamera(75, 600 / 600, 0.1, 1000);

var x = 0.5,
    y = 0.5;

var cyanTriangle = createTriangle([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(x, y, 0)], 0x00FFFF);
var magentaTriangle = createTriangle([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(x, y, 0),
new THREE.Vector3(0.5, 0.86602540378, 0)], 0xFF00FF);
var yellowTriangle = createTriangle([
new THREE.Vector3(x, y, 0),
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(0.5, 0.86602540378, 0)], 0xFFFF00);
triangleScene.add(cyanTriangle);
triangleScene.add(magentaTriangle);
triangleScene.add(yellowTriangle);

triangleCamera.position.x = 0.5;
triangleCamera.position.y = 0.5;
triangleCamera.position.z = 1;

var previewTriangles = [];
for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 20; j++) {
        previewScene.add(createTriangle([
        new THREE.Vector3(i, j, 0),
        new THREE.Vector3(i + 1, j, 0),
        new THREE.Vector3(0.5 + i, 0.5 + j, 0), ], 0x00FFFF));
        previewScene.add(createTriangle([
        new THREE.Vector3(i, j, 0),
        new THREE.Vector3(0.5 + i, 0.5 + j, 0),
        new THREE.Vector3(0.5 + i, 0.86602540378 + j, 0), ], 0xFF00FF));
        previewScene.add(createTriangle([
        new THREE.Vector3(0.5 + i, 0.5 + j, 0),
        new THREE.Vector3(i + 1, j, 0),
        new THREE.Vector3(0.5 + i, 0.86602540378 + j, 0), ], 0xFFFF00));
    }
}

// previewScene.add(cyanTriangle);
// previewScene.add(magentaTriangle);
// previewScene.add(yellowTriangle);

previewCamera.position.x = 10;
previewCamera.position.y = 10;
previewCamera.position.z = 20;

var triangleRenderer = new THREE.WebGLRenderer({
    antialias: true
});
triangleRenderer.setSize(200, 200);
document.getElementById("triangle_visualization").appendChild(triangleRenderer.domElement);

var...