JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var geometry, material;
var mainBox, box;
const boxes = [];
function init() {
  camera = new THREE.PerspectiveCamera( 
    70, window.innerWidth / window.innerHeight, 0.01, 10 );
  camera.position.z = 0.5;
  scene = new THREE.Scene();
  geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
  material = new THREE.MeshNormalMaterial();
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  mainBox = new THREE.Mesh( geometry, material );
  scene.add(mainBox);
  for(var i=0;i<6;i++){
    box = new THREE.Mesh( geometry, material ); boxes.push(box);
    box.scale.set(0.2, 0.2, 0.2); scene.add( box ); } }

function animate() {
    requestAnimationFrame( animate );
    mainBox.rotation.x += 0.01;
    mainBox.rotation.y += 0.02;
  	const forward 	= new THREE.Vector3( 0,  0,  1 );
    const behind 		= new THREE.Vector3( 0,  0,  -1 );
    const up 				= new THREE.Vector3( 0,  1,  0 );
    const down 			= new THREE.Vector3( 0,  -1, 0 );
    const left 			= new THREE.Vector3( -1,  0,  0 );
    const right 		= new THREE.Vector3( 1, 0,  0 );
    const directions = [forward, behind, up, down, left, right];
    directions.every((directionVector, n) => {
    	directionVector.applyQuaternion( mainBox.quaternion );
      boxes[n].rotation.set(
      	mainBox.rotation.x, mainBox.rotation.y, mainBox.rotation.z, )
      directionVector.multiplyScalar( 0.2 );
      directionVector.add( mainBox.position );
      boxes[n].position.set(
      	directionVector.x, directionVector.y, directionVector.z);
      return true;
    }); renderer.render( scene, camera );
}

init();
animate();