How to embed model from Google Drive or OneDrive or Sharepoint in Web-Page

Questions
1

Hi!

Refrence:
https://codepen.io/BabylonJS/pen/QxzBPd

<html>
<head>
  <title>Babylon.js Viewer - Display a 3D model</title>
  <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script> 
</head>
<body>
    <babylon model="https://models.babylonjs.com/boombox.glb" templates.main.params.fill-screen="true"></babylon>
</body>

I tried to replace:
<babylon model="https://models.babylonjs.com/boombox.glb" templates.main.params.fill-screen="true"></babylon>

With:
<babylon model="https://drive.google.com/file/d/1b7TnZbgUpLRTFCjLdkjN3xyFmIYEKxs-/view" templates.main.params.fill-screen="true"></babylon>

Can I change the link type to make it work? Can I SharePoint or OneDrive to get it to work?

Sharing files on OneDrive/SharePoint and then embed into web-page would be the ultimate dream.

Do you have any suggestions?

Thanks and greetings from Norway

1 Like
2

I think it should work with OneDrive but you need to get the url in a specific way, see section “Downloading OneDrive files in JavaScript apps” in this doc: CORS support - OneDrive API - OneDrive dev center | Microsoft Docs

3

Thanks for the reply Evgeni_Popov.

I did not mange to get it to work, could it be another way to do it? Is there a noter sky solution i could use? Dropbox?

How does anyone else share/host their 3D-models?

4

You can see here details about Dropbox and other external sources:

I have used GitHub and Dropbox.

1 Like
6

This works perfectly! Thanks m8!

Do you know if babylon supports sectioning av buildings? Or “game” mode in viewer? So I can fly like a game inside the house?

I will do more reasearch - thanks again!

7

You can easily use sharepoint, either the OneDrive SDK or MSAL. You need to either get the file url from onedrive/sharepoint and read that in as a createObjectURL and append into the scene.

btw onedrive sdk picker is the easiest