JSFiddle - React, Tailwind, and code Playground

by A A

HTML

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.02 - First Scene</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

</body>
</html>

JavaScript

window.onload = init();
    animate(); //calling function that does all the rendering 
    

    //GLOBAL VARS
    var scene, camera, renderer;
    var cube;
    var raycaster, mouse;
    var INTERSECTED;

    //global flag
    var isClicked = false;

    //for the camera
    var controls;

//creating and rendering the GUI
params = {
  yAxis: 0.00001
}
var gui = new dat.GUI();
gui.add(params, "yAxis").onFinishChange(val => {
  cube.scale.y = val;
}); 

//we make sure to make it hidden
 let vis = gui.domElement.style.visibility;
 gui.domElement.style.visibility = vis == "" ? "hidden" : "";

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        //SET CAMERA
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.z = 5;

        // create a render and set the size
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor("#e5e5e5"); //background color
        renderer.setSize(window.innerWidth,window.innerHeight); //size of renderer

        
          

        //bind rendered to the dom element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);  

       
        //RAYCASTER
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2(1,1);

        
        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.scale.y = 0.00001;
        cube.userData.originalColor = 0xffff00;

        // position the cube
        cube.position.x = 0;
        cube.position.y = 3;
        cube.position.z = 0;
        /*
        //USEFUL METHODS
        cube.rotation.x +=0.5
       ...