3D model viewer plugin

[Connor96]

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.

[camilo]

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!

[Connor96]

but modify model a little frequency in offline.

[jadenbailey]

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?

[bololo]

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);
  });
```

[mreiter]

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

[bololo]

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:

[Gerkin]

Hey there ! Good job ! Such plugin would be soooooo nice to have !

I might be able to give you a hand if you want. Have you anywhere where you could share the code, like a git repo or something, so that I can help you out ?

Cheers !

[bololo]

Hi there, later today I will post a repo with what I’ve achieved so far. I also answered your message. Thanks!

[alesoft]

Interested. Thank you.

[leonlazic]

I’m interested as well …

[Chris2L]

Hi @bololo

Have you posted your repo somewhere? Would love to have a crack at using the plugin! I’ve been using your first post version (the newer versions of model-viewer do not seem to work) and tried to use local files using

const buffer = await dv.io.load("NeilArmstrong.glb");
URL.createObjectURL(new Blob([buffer]))

but could not get it to work.

[ElmoNeedsArson]

Hi @Chris2L if you are still interested, I have a starting post here:
Displaying Locally Saved 3D models in Obsidian Notes - Share & showcase - Obsidian Forum
And am working on a plugin, using a different way than the previous replies suggested, im using the three.js library. Currently in combination with the dataviewjs plugin, but will probably find a way without. But for now my post might already help you

[ElmoNeedsArson]

Update: I turned it into an actual plugin :). This works without needing the dataviewjs plugin but as stand alone Here!