JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>

<div id="MainThreeJS"></div>

CSS

body {
            margin: 0;
            overflow: hidden;
            background-color: #F4F4F4;
        }

JavaScript

var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
document.getElementById( 'MainThreeJS' ).appendChild( renderer.domElement );

var scene = new THREE.Scene();

const centralPoint = new THREE.Vector3( 0, 0, 0 );


// GLOBAL ILLUMINATION

scene.add( new THREE.AmbientLight( 0xD9D9D9 ) );


// PALLET

const palletWidth = 20;
const palletHeight = 40;
const palletDepth = 1;
var pallet = new THREE.Mesh(
    new THREE.BoxGeometry( palletWidth, palletHeight, palletDepth ), 
    new THREE.MeshBasicMaterial( { color: 0x888888 } )
);
pallet.position.set( 0, - palletDepth / 2, 0 );
pallet.rotation.x = 90 * Math.PI / 180;
scene.add( pallet );

var palletFrame = new THREE.LineSegments(

    new THREE.EdgesGeometry( pallet.geometry ), 
    new THREE.LineBasicMaterial( { color: 0x303030, linewidth: 1 } )

);
pallet.add( palletFrame );


//USED FOR CHECKING WHETHER A PACKAGE IS PLACED WITHIN THE PALLET'S BOUNDARIES

function isPackageWithinPallet( obj ) {

    if( obj.position.x - obj.geometry.parameters.width / 2 >= centralPoint.x - pallet.geometry.parameters.width / 2   && 
        obj.position.x + obj.geometry.parameters.width / 2 <= centralPoint.x + pallet.geometry.parameters.width / 2   &&
        obj.position.z - obj.geometry.parameters.height / 2 >= centralPoint.z - pallet.geometry.parameters.height / 2 && 
        obj.position.z + obj.geometry.parameters.height / 2 <= centralPoint.z + pallet.geometry.parameters.height / 2
    ) {

        return true;
        
    }
    else {

        return false;

    }
}


// PACKAGES

var draggableObjects = [];

class Package extends THREE.Mesh {
    constructor( obj ) {
        super(
            new THREE.BoxGeometry( obj.width, obj.height, obj.depth ),
            new THREE.MeshPhongMaterial( { color: obj.color } )
        );
        
        this.originalPos = new THREE.Vector3( obj.posX, obj.posY, obj.posZ );
       ...