Drag n drop glb file from a library

[vincentfretin]

Models library in json format referencing glb files that can be drag n dropped into the scene.

Prior work with old Google Blocks, see tweet and code, code that do the drag'n drop here (jQuery) and here.

I reproduced the drag'n drop in React/tailwindcss on my project a few months ago but didn't go further yet, I opened the PR as draft with my current code as is. You need to rewrite the tailwindcss with stylus or vanilla css and replace the library with your own models if you want to see anything.

Example of json library:

  const library = [
  {
    "title": "Seat 1",
    "thumb": "/models/furnitures/seat_1.jpg",
    "url": "/models/furnitures/seat_1.glb",
    "author": "Vincent"
  },
  {
    "title": "Seat 2",
    "thumb": "/models/furnitures/seat_2.jpg",
    "url": '/models/furnitures/seat_2.glb",
    "author": "Vincent"
  }]

[vincentfretin]

@kfarr is this implementation if you click instead of drag, it will spawn the model on the center of the viewport on the ground, with a message saying that you can use drag and drop. The implementation could be changed to show a cursor where the model will be spawned. That could be something similar to https://aframe-xr-starterkit.glitch.me/ AR mode with the shadow of the object. In this way drag and drop vs. click and place is actually much the same.

[kfarr]

@vincentfretin that's a really good idea, building on that: As a user hovers over a model the destination cursor is shown at the default location. If they click, it will be spawned in that location. If they click to drag the model onto the scene, the cursor previews the drop zone where the model will be placed upon click up. Best of both worlds!

[vincentfretin]

drag n drop in FrameVR https://twitter.com/frame_vr/status/1674160651667906560 :fire:

[vincentfretin]

You can sponsor $100 to vincentfretin fully or partially to work on this feature. Find other work you can sponsor at https://github.com/c-frame/sponsorship

[vincentfretin]

@3DStreet sponsored me to work on this issue. Thank you!

[vincentfretin]

As part of this work where you can drag and drop defined glb in a library, I'll also define an api to register primitives to be drag and dropped (see my comment https://github.com/c-frame/aframe-editor/issues/3#issuecomment-1638538374). It may also be interesting for you @kfarr to be able to register mixin as draggable primitive somehow because you're using them associated with gtlf-model in 3dstreet. I'll write a proposal of the registration api when I'll start to work on it.

[kfarr]

@vincentfretin Our use case will basically come from a JSON list but if there is an API then I'm sure it could be simple to parse said JSON and iterate through it making the api call for each, so very open to whatever you propose, thanks for thinking through multiple use cases