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.
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.
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!
but modify model a little frequency in offline.
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?
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. 
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);
});
```
did you make any progress on this? if it worked with local files, too, thatād be great.
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:
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 !
Hi there, later today I will post a repo with what Iāve achieved so far. I also answered your message. Thanks!
Interested. Thank you.
Iām interested as well ā¦
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.
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
Update: I turned it into an actual plugin :). This works without needing the dataviewjs plugin but as stand alone Here!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.