3D model viewer plugin

Plugins ideas
1

3D model viewer plugin for view gITF/GLB file(create by Blender, C4D, 3Dmax,Maya etc) in Obsidian by

https://modelviewer.dev/docs/index.html

Thanks.

5 Likes
2

Was looking into this myself and found that sketchfab.com 3D viewer does pretty much the same without all the backend work. Simply embed yr uploaded content and presto!

1 Like
3

but modify model a little frequency in offline.

1 Like
4

I think Iā€™m close to having [EDIT: the model viewer library] work with a markdown code block, but I canā€™t load the actual file. If I set the source to a local file, the Obsidian Developer Console tells me Iā€™m ā€œnot allowed to load local resourceā€.

So, I thought I create a simple Express app to host the file locally. But when I set the source to the Express app on localhost, I get a CORS policy error:

Access to XMLHttpRequest at ā€˜http://127.0.0.1:3000/Astronaut.glbā€™ from origin ā€˜app://obsidian.mdā€™ has been blocked by CORS policy: No ā€˜Access-Control-Allow-Originā€™ header is present on the requested resource.

even though I set ā€˜Access-Control-Allow-Originā€™ to * using this following code:

app.use(
    cors({
        origin: '*',
    })
)

Making the same request using Postman returns the file correctly, so I am at a loss here.

Does anyone else know what to do?

3 Likes
5

Iā€™m trying to create a standalone plugin for this exact same purpose. I want to be able to just drag the glb/gltf file into the document as an attachment (e.g. ![](model.glb) and it will be rendered. Iā€™m struggling with a few things and learning the Obsidianā€™s API, meanwhile I found a way using Dataview but unfortunately the file has to be hosted somewhere. Updates soon.

```dataviewjs
const camelToKebab = str => str.replace(/[A-Z]/g, '-$&').toLowerCase()
import('https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js')
  .then(() => {
    const config = {
      src: 'https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb',
      environmentImage: 'https://modelviewer.dev/shared-assets/environments/moon_1k.hdr',
      skyboxImage: '',
      width: '400px',
      height: '400px',
      exposure: 0,
      shadowIntensity: 0,
      shadowSoftness: 0,
      cameraControls: true,
      autoRotate: true,
      autoplay: false,
      ar: false,
      arModes: '',
      arStatus: '',
      animationName: '',
      touchAction: '',
      interactionPrompt: 'none'
      // missing a few configs
    }
    
    const el = document.createElement('model-viewer')
    
    Object.entries(config).map(([key, value]) => {
        if (key == 'src') el.src = config.src
        else if (key == 'width' || key == 'height') el.style[key] = value
        else if (value) el.setAttribute(camelToKebab(key), value)
    })
    
    dv.container.appendChild(el)
  })
  .catch((error) => {
    console.error('Error loading library:', error);
  });
```
3 Likes
6

did you make any progress on this? if it worked with local files, too, thatā€™d be great.

7

Itā€™s been a while that I have touched this but I was almost there. I managed to load the model locally with a custom code block, I was even creating a plugin for it but I got stuck.

The problem Iā€™ve come across now, as I have described here is that if the model-viewer leaves the view (scrolling the page) it stops working, probably due to how Obsidian deals with lazy loading the content. It removes parts of the page that are not in view and reinserts them when necessary, unfortunately this breaks model-viewer as it doesnā€™t automatically reload the model when itā€™s scrolled into view once again. Iā€™m trying to find a workaraound, if anyone have some tip.

Hereā€™s what I got so far:

ezgif-2-f2974b4383

1 Like