JSFiddle - React, Tailwind, and code Playground

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {DragControls} from "https://threejs.org/examples/jsm/controls/DragControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0,7,10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
//Path for object
  var points = [];
  points.push(new THREE.Vector3(0, 1, 0), new THREE.Vector3(5, 1, 0));
  points.push(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 1, 5));
  points.push(new THREE.Vector3(5, 1, 5), new THREE.Vector3(0, 1, 5));
  points.push(new THREE.Vector3(5, 1, 5), new THREE.Vector3(5, 1, 0));
  var geometry = new THREE.BufferGeometry().setFromPoints(points);

  // LINE
  var line = new THREE.Line(
    geometry,
    new THREE.LineBasicMaterial({
      color: 0xffa500,
    })
  );
  scene.add(line);

let objects = []
let dragControls = new DragControls(objects, camera, renderer.domElement);
//CUBE Geometry
  const geometryCube = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometryCube, material);
  scene.add(cube);

 //limiting geometry to set path
  
  cube.userData.limit = {
    minUp: new THREE.Vector3(0, 1, 0),
    maxUp: new THREE.Vector3(5, 1, 0),
   
  };
  cube.userData.update = function () {
    cube.position.clamp(
      cube.userData.limit.minUp,
      cube.userData.limit.maxUp,
      
    );
  };

  objects.push(cube);
  scene.add(cube);
  
    renderer.setAnimationLoop(() => {
    objects.forEach((o) => {
      o.userData.update();
    });
    renderer.render(scene, camera);
  });
  
  function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}