So right now I have one truck that can be moved around my clicking the truck and then holding shift to move around. I noticed this function only operates with ThreeBox. It is rendered via

map.on(“style.load”, () => {
map.addLayer({
id: “custom-threebox-model”,
type: “custom”,
renderingMode: “3d”,
onAdd: function () {
// Creative Commons License attribution: Metlife Building model by https://sketchfab.com/NanoRay
// https://sketchfab.com/3d-models/metlife-building-32d3a4a1810a4d64abb9547bb661f7f3
const scale = 3.2;
const options = {
obj: ‘/truck.glb’,
type: “glb”,
scale: { x: scale, y: scale, z: 2.7 },
units: “meters”,
rotation: { x: 90, y: -90, z: 0 },
};

        tb.loadObj(options, (model) => {
          model.setCoords([-73.976799, 40.754145]);
          model.setRotation({ x: 0, y: 0, z: 241 });
          tb.add(model);
        });
      },

However I am trying to build an interface that will allow me to drag and drop more trucks onto the map. But I fear the original mouse functions of mapbox (Clicking and dragging) will disrupt any additional function that I am trying to add.

My end goal is to build something similar to this
https://webshed.royssheds.com.au/

Where multiple models can be added on to the map with ease. (Go to Objects and you’ll see what I mean. It’s beautiful)

Explained above, My bad this is my first Q on Stack Overflow