JSFiddle - React, Tailwind, and code Playground

by crinca15

HTML

<script src="three.min.js"></script>
    <script src="jquery.js"></script>
<body>


<button type="button" id="start">Start</button>
<button type="button" id="stop">Stop</button>

CSS

body {
  background-color: black;
}

JavaScript

$( "#start" ).click(function() {
        rot=2;
    });

    $( "#stop" ).click(function() {

        rot=1;

        /*face1
         mesh.rotation.x =0;
         mesh.rotation.y =0;

         mesh.rotation.x =0;
         mesh.rotation.y =1.571;

         mesh.rotation.x =0;
         mesh.rotation.y =3.142;

         mesh.rotation.x =0;
         mesh.rotation.y =4.714;

         mesh.rotation.x =1.571;
         mesh.rotation.y =0;

         mesh.rotation.x =-1.571;
         mesh.rotation.y =0;
        */

    });

    // scene, light, camera
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    var rot =0;
    var rotateAngle = 0;

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

    camera.position.z = 1.5;

    var ambient = new THREE.AmbientLight( 0x222222);
    scene.add( ambient );

    var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
    dirLight.position.set( 100, 100, 100 ).normalize();
    scene.add( dirLight );

    var geom = new THREE.CubeGeometry(1, 1, 1);

    var textureLoader = new THREE.TextureLoader();

    var materialSimple = new THREE.MeshLambertMaterial({color: 0xff0000});


    // 6-color
    var materialMulti = new THREE.MeshFaceMaterial([
        new THREE.MeshLambertMaterial( {  color:'red'}),
        new THREE.MeshLambertMaterial( {  color:'pink'}),
        new THREE.MeshLambertMaterial( {  color:'white'}),
        new THREE.MeshLambertMaterial( {  color:'green'}),
        new THREE.MeshLambertMaterial( {  color:'blue'}),
        new THREE.MeshLambertMaterial( { color: 'yellow' })
    ]);

    var mesh = new THREE.Mesh(geom, materialSimple);    // multi-material init.

    scene.add(mesh);

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

        if (rot==2) {
        mesh.rotation.x += 0.01;
       ...