JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d viewer tjalle</title>
    <link rel="stylesheet" type="text/css" href="../style/render.css">
</head>

<body>

    <script src="https://rawcdn.githack.com/mrdoob/three.js/r117/build/three.min.js"></script>
    <script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/loaders/STLLoader.js"></script>
    <script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/controls/OrbitControls.js"></script>

</body>

</html>

CSS

body {
	  margin: 0;
}

JavaScript

var cube;

        var scene = new THREE.Scene();
        scene.background = new THREE.Color("rgb(120,120,120)");
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        var objects = [];

        var geometry = new THREE.BoxGeometry(5, 5, 5);

        var materials = [
            new THREE.MeshBasicMaterial({ color: new THREE.Color("rgb(120,0,0)"), vertexColors: THREE.VertexColors, side: THREE.DoubleSide }),

            new THREE.MeshBasicMaterial({ color: new THREE.Color("rgb(0,120,0)"), transparent: true, opacity: 0.2, vertexColors: THREE.VertexColors, side: THREE.DoubleSide })
        ]; // the two materials 
        for (var i = 0; i < geometry.faces.length; i++) {
            geometry.faces[i].materialIndex = 0;
        }
        cube = new THREE.Mesh(geometry, materials); //tell three.js that you will have several materials in your geometry

        scene.add(cube);
        objects[0] = cube;
        camera.position.z = 10;

        // console.log(cube)

        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        document.addEventListener('mousemove', onDocumentMouseMove);

        let mouse = new THREE.Vector2();

        var animate = function () {
            requestAnimationFrame(animate);

            controls.update();

            renderer.render(scene, camera);
        };

        animate();

        function onDocumentMouseMove(e) {
            e.preventDefault();

            // let pointArr = [];

            mouse.x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1;
            mouse.y = - (e.clientY / renderer.domElement.clientHeight) * 2 + 1;

            let raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);

            let intersects =...