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.setScalar(20);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let objects = []
let dragControls = new DragControls(objects, camera, renderer.domElement);

scene.add(new THREE.GridHelper(50, 50));
let grid = new THREE.GridHelper(20, 20, "aqua", "aqua");
grid.position.y = 0.01;
scene.add(grid);

let obj = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshBasicMaterial());

obj.userData.update = function(){
  obj.position.x = Math.min( 10, Math.max( -10, obj.position.x ) );
	obj.position.y = 0;
  obj.position.z = 10 * Math.sin( 0.6 * obj.position.x );
}

objects.push(obj);
scene.add(obj);

renderer.setAnimationLoop(()=>{
	objects.forEach(o => {
  	o.userData.update();
  })
	renderer.render(scene, camera);
})