I can't make DragControl work at all. Please HELP!

Questions
1

Hello Reader,
I’ve searched and done everything I could to make this DragControls work for me but this doesn’t work at all.
this is my project:
https://drive.google.com/drive/folders/12ToK6iwcZfsJEJ9CjZUsaapN71-InVAz?usp=sharing

Can someone help me with it, what am I doing wrong in it?
It would be huge help and would be highly appreciated.
Warm Regards!

2

I see two errors in your code:

  1. You are importing modules from different hosts. Please never do this. Besides, do not use files from different releases. This is not supported. Do it like so:
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.115/build/three.module.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.115/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/three@0.115/examples/jsm/loaders/GLTFLoader.js';
import {DragControls} from "https://cdn.jsdelivr.net/npm/three@0.115/examples/jsm/controls/DragControls.js";
  1. When importing DragControls in this way, you don’t have to use the THREE namespace. Create the controls like so:
const dragControls = new DragControls( objects, camera, renderer.domElement );

If you are new to modules, I highly recommend you study how ES6 modules work in order to avoid such confusion. Notice that this specific topic is totally unrelated to three.js. Without a basic understanding of JavaScript, you will have these problems with all libraries.

5

Thank you so much @Mugen87! it’s working now.