JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<div class="stage">

    <div id="stage">
    
    </div>

   </div>

CSS

body { margin: 0; }

          .stage {
              background-image: url(img/bg.png);
              border-radius: 20px;
              border: 2px solid #b2b2b2;
              font-family: 'Cabin Sketch', cursive;
              padding:20px;
              font-size: 2em;
              color: #c2d4dc;
          }

          #stage:hover{
              cursor: grab;
          }

          #stage:active{
              cursor: grabbing;
          }

         canvas{
              background-color:  rgba(0, 0, 0, 0.25);
             width: 100%;
             border: 0.5px solid #6f8da1;
             border-radius: 10px;
          }

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({alpha: true});
var ratio = window.innerWidth / window.innerHeight;


//renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(600 * ratio, 600);
renderer.setClearColor(0x000000, 0); // the default

var stage = document.getElementById("stage");

stage.appendChild(renderer.domElement);


var material = new THREE.MeshBasicMaterial({color: 0xffff00});

var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var faceMaterial = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );

var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0xffff00 } );

var cube_Y = new THREE.Mesh( geometry_Y, faceMaterial_Y);

camera.position.z = 2;
scene.add(cube_Y);


var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var faceMaterial_A = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );


var cubeA = new THREE.Mesh( geometry_A, material );
cubeA.position.set( 0.5, 0.5, 0 );

//var cubeB = new THREE.Mesh( geometry_A, material );
//cubeB.position.set( -0.5, -0.5, 0 );

// extrude ?

//create a group and add the three cubes
var group = new THREE.Group();
group.add( cubeA );
//group.add( cubeB );
group.add( cube_Y );
scene.add( group );


var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1 );
directionalLight.position.set( 2, 2, 30 );
directionalLight.castShadow = true;
scene.add( directionalLight );


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
}

animate();

addMouseHandler(document.getElementById("stage"));

//////

var mouseDown = false,
    mouseX = 0,
    mouseY = 0;

function onMouseMove(evt) {
    if...