Drag-control

by VV_77

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin :0;
        }
    </style>
</head>
<body>
    <script src = "./js/script.js", type = "module"></script>
</body>
</html>

JavaScript

import * as THREE from 'three';
import side_wall from '../img/side_wall.avif';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DragControls } from 'three/examples/jsm/controls/DragControls';

const renderer = new THREE.WebGLRenderer();
const textureloader = new THREE.TextureLoader();

renderer.setSize(window.innerWidth*0.98, window.innerHeight*0.98);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);


//Scene and Camera
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth/window.innerHeight,
    0.1,
    1000
);
// renderer.setClearColor(0xA3A3A3); gives scene a grey background
const orbit = new OrbitControls(camera, renderer.domElement);

camera.position.set(7,5,10);



const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

scene.background = new THREE.Color(0xbfd1e5);
//Light

const ambientLight = new THREE.AmbientLight(0x333333);
ambientLight.castShadow = true;
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8 );
scene.add(directionalLight);
directionalLight.castShadow=true;

//PLANE 
const plane1Geometry = new THREE.PlaneGeometry(20,20);  //breadth, length
const plane1Material = new THREE.MeshBasicMaterial({color:'#D8BFD8'});
const plane1 = new THREE.Mesh(plane1Geometry, plane1Material);
plane1.material.map = textureloader.load(side_wall);
scene.add(plane1);
plane1.receiveShadow = true;
plane1.rotation.x = -0.5*Math.PI;

const sceneMeshes = [];
const dragControlsList = [];
const boxHelpers = [];

const createDraggableModel = (modelPath, dragBoxSize, scale, position, movementRestrictions) => {
  let modelReady = false;
  const gltfLoader = new GLTFLoader();
  let modelGroup;
  let modelDragBox;

  gltfLoader.load(
    modelPath,
    (gltf) => {
      gltf.scene.traverse(function (child) {
        if (child...