JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<div id="container"></div>
<button id="btn">Click me to change Color To Green</button>
<script>
    
        
</script>

CSS

#container {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    margin: 10px auto;
    padding: 0px;

}

JavaScript

$('#btn').click(function(){

    cube.material.color.setHex(0x00FF00);
   
});

// Script for 3D Cube

    // revolutions per second
    var angularSpeed = 0.2;
    var lastTime = 0;

    // this function is executed on each animation frame
    function animate() {
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cube.rotation.y += angleChange;
        lastTime = time;

        // render
        renderer.render(scene, camera);

        // request new frame
        requestAnimationFrame(function () {
            animate();
        });
    }


    // renderer
    var container = document.getElementById("container");
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    container.appendChild(renderer.domElement);

    // camera
    var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 700;

    // scene
    var scene = new THREE.Scene();

    // cube (Lenght, Height, Width)
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 75, 200), new THREE.MeshBasicMaterial({color:0xFF0000}));
    //cube.overdraw = false;
    cube.rotation.x = Math.PI * 0.1;
    cube.rotation.y = Math.PI * 0.3;

    scene.add(cube);

    // start animation
    animate();