Direct reference of file locations

This topic has 5 replies, 3 voices, and was last updated 4 years, 5 months ago by Yuri Kovelenov.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2019-10-29 at 6:25 pm #20782

jacksund
Customer

Hi again,

I’m still trying to establish verge3D as a python alternative for 3D web models. That is, I can use blender python scripts (see here for setup) to generate .blend/.gltf/.bin files that can be viewed online. All of these 3D files will in-turn use identical javascript + media files (e.g. v3d.js, visual_logic.js, example.html, example.css, etc.).

So, how would you explicitly state the path to the example.gltf and example.bin files? Ideally, I would have a cloud-based host (CDN) for all of my “example” verge3D application files, except for the example.gltf and example.bin files. When I load the application via iframe, I can tell the iframe where these two files are. I imagine the iframe element will look something like this:

<iframe width=”1024″ height=”640″ allowfullscreen src=”https://cdn.soft8soft.com/ABCDEF/applications/example/example.html?gltf=https://mywebsite.com/static/example.gltf&bin=httpshttps://mywebsite.com/static/example.gltf”</iframe>

This would load “gltf” and “bin” files in similar manner that your Verge3D preview application loads the gltf and bin files. With your preview app, the url passes “http://localhost:8668/player/player.html?load=preview/sneak_peek.gltf” — where instead of ?load=<relative_path>, I am suggesting ?gltf=<url_path>&bin=<url_path>.

Is this possible to do?

Also thank you for reading – I know my posts can get lengthy!
-Jack

2019-10-30 at 6:40 am #20793

Yuri Kovelenov
Staff

Hi,

you can use the standard ‘player’ app to load a glTF scene via URL param (the .bin file is loaded automatically). E.g.:

https://cdn.soft8soft.com/demo/player/player.html?load=../applications/ring/ring.gltf

or for compressed version:

https://cdn.soft8soft.com/demo/player/player.html?load=../applications/ring/ring.gltf.xz

The player app (on which the default cube template is based) can be found in verge3d/player directory.

Chief 3D Verger | LinkedIn | Twitter

2019-10-30 at 9:33 pm #20872
jacksund
Customer
Looks like this only works if load=<relative_path>, where the file is also on the cdn.soft8soft.com server. Web browsers throw an error when I try load=<url_path>, such as load=https://mywebsite.com/chemical-id/example.gltf. This is blocked because it is a cross-origin request, which looks to be flagged as a security issue.

Here’s the html error:

Access to XMLHttpRequest at ‘http://mywebsite.com/chemical-id/chemical.gltf’ from origin ‘https://cdn.soft8soft.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

There’s also a warning on the webpage:

A cookie associated with a cross-site resource at http://soft8soft.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure.

So maybe I just need to set up permissions correctly…? I’m not sure if that opens up security issues for my site though. It is probably better if I don’t combine locally made files with a CDN.

For three.js, loading a gltf looks pretty easy (see below). Is there an analogous command like v3d.GLTFLoader()?
```
var loader= new THREE.GLTFLoader();
loader.load(
  'http://mywebsite.com/chemical-id/chemical.gltf', 
  function(gltf) { scene.add(gltf.scene); },
  undefined, 
  function (error) { console.error(error); }
);
```
2019-10-31 at 10:15 am #20899

Alexander Kovelenov
Staff

Hi,
to properly handle CORS requests, your server side has to set the

Access-Control-Allow-Origin: *

header properly. Check out this page for more information.

To load glTF file you can use the v3d.GTLFLoader() class, but we recommend using the loadScene method of the App class or load scene Puzzle.

Soft8Soft Tech Chief
X | FB | LinkedIn

2019-10-31 at 5:06 pm #20921

jacksund
Customer

loadScene() is definitely the route to go! And I now have CORS request working properly.

For apps that I’ve made myself, I’ve also learned to manually set the variable sceneURL in order to indicate the <relative_path> or <url_path> — this would be line 13 in myexampleapp.js file. When using with Django, I found this to be a cleaner approach than adding ?load=<path> to the URL. It makes the urls cleaner and it is easier to script with Django’s templating system.

Thanks again for the help, Alexander and Yuri!

-Jack

2019-11-01 at 6:37 am #20931

Yuri Kovelenov
Staff

glad we could help!

Chief 3D Verger | LinkedIn | Twitter
Author

Posts