Placing an OBJ Model into an array such that it can be dragged and dropped around the scene

Questions
,
1

I am looking to have an interactive scene that has several OBJ models that can be dragged around the scene. I have been using the code on this webpage fo starters : https://www.script-tutorials.com/webgl-with-three-js-lesson-10/

In the example given on that webpage there are several randomly located spheres that you can move with your mouse. Here the spheres are pushed into an array and event handlers are employed. For my scene I have tried to push the OBJ models into the same array, but while the spheres remain interactive my models aren’t moving. I have been using:

 loadObjModel: function() {
 loader.load('models/bike.obj', function(object) {

        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
              child.position.set(0, -10.7,-20);
                var scale = 5;
                child.scale.set(scale,scale,scale);
                
                
                MyGymScene.scene.add(object);
                MyGymScene.objects.push(object);
               
            }
        } );
     
  },

where objects is the array. I tried pushing the model into the array before adding it to the scene but still the event handlers don’t work on it. If anyone could point out where I’m going wrong I would be so so grateful.

2

The live example for the scene with just the spheres, I want to do the same with OBJ Models but I’m having trouble: https://www.script-tutorials.com/demos/467/index.html

3

Instead of developing the controls by yourself, I suggest you use the existing DragControls class from the repository. There is also an official example that demonstrates how to use it.

https://threejs.org/examples/misc_controls_drag

And here is a small example with OBJLoader:

https://jsfiddle.net/vcmgwk37/

4

Thank you very much, took me a bit of time but the example helped a lot and I got it working!