Hi,
I developed a 3D object viewer which works fine on my own Wordpress site. However, I am unable to upload a GLB file to the client site despite several attempted workarounds. Is there a way to upload the GLB to a secure location (can you recommend one) and load the file from that external location?
Here’s the working implementation: The Orbis Ring-Wheel – Voyant Pictures
I also tried bringing it in through iFrame, but apparantly even that is disallowed in current version of Wordpress.
Best regards, Kalle
Hello Kalle,
Wordpress uses MIME checking for uploaded files, so you need to extend this function in order to be able to upload GLB or GLTF files.
There are several ways how to do it. One of them is implemented in my plugin for Wordpress - Babylon.js 3D Wordpress Plugin .
It is much more convenient to have all your models at the same site than to have external location for 3D files!
Feel free to ask any questions!
Hi, thank you, I will check it out. At this time I pretty much just need to enable GLB uploading to the media library, hopefully this takes care of that?
Sure, here is the screenshot of Media Library in Wordpress admin panel.
Click on file and copy link, that’s all 
Progress… Now the GLB shows in the library fine, and even loads – in a fashion.
The issue is, I have lengthy custom html that loads the GLB file and adds a environment map and a whole bunch of interactivity. But it only loads on the page if I have the shortcode on the page as well, not if I only have the html. In other words, if I add both the html AND the shortcode on the page, I get the GLB file in the default player AND the custom html GLB loading correctly. If I take the shortcode out, I get nothing but a eternal loader screen in the html.
How do I get just the custom html loaded GLB to show up – i.e. without the shortcode?
Could you give the link to your testing page?
The reason could be that you need to have babylon.js in the HEAD section of html page - in Wordpress you can do it at the level of template or at plugin level.
My plugin uses only babylon.viewer.js, but there is no problem to enqueue any other .js files.
You can see it here. I have an empty babylon shortcode above the custom html, which loads nothing, but allows the loading of the custom html below (mostly off page). If I take out the shortcode, the custom html GLB does not load.
https://orbisdriven.com/in-live-3d/
One of the possible problems could be that you have too much BODY tags at the page.
Line 903: </script> </body></html></div></div></div></div></div></div></div></section>
and then at the end of the page </script> </body></html>
I would recommend to test your custom script at clean Wordpress installation, with no additional helper plugins like Elementor etc.
Could you reproduce your script with simple HTML page, without Worpdress?
The custom html script (the exact same one) works just fine on my own Wordpress site. The main differences are the Wordpress version and not having Elementor.
Since I didn’t make the client’s site, I can’t just say “don’t use Elementor”.
However, since adding the babylon shortcode fixes the load problem, there must be something that it is doing that my script isn’t. I just wonder what it might be.
Oh, I see, you may have already answered my question: The babylon.js library needs to be called in the head section…
Curious that it works without doing that on my own site where I have the html, head and body tags all in a custom html element.
I guess I need to get a plugin installed so that I can move the babylon.js call to the head section.
You may tweak this plugin or use some parts of code in functions.php file of your Wordpress template. Actually the code is very short and simple (babylon-wordpress-plugin/babylon-shortcode.php at master · eldinor/babylon-wordpress-plugin · GitHub):
Line 15. This part is needed to correct Wordpress MIME checking system (with legendary CSV bug).
// Fixing Wordpress MIME checking system
function fix_wp_csv_mime_bug( $data, $file, $filename, $mimes ) {
$wp_filetype = wp_check_filetype( $filename, $mimes );
$ext = $wp_filetype['ext'];
$type = $wp_filetype['type'];
$proper_filename = $data['proper_filename'];
return compact( 'ext', 'type', 'proper_filename' );
}
add_filter( 'wp_check_filetype_and_ext', 'fix_wp_csv_mime_bug', 10, 4 );
Line 26. Adding new allowed file types.
// Adding custom MIME types
function custom_upload_mimes ( $existing_mimes=array() ) {
$existing_mimes['gltf'] = 'image/gltf';
$existing_mimes['glb'] = 'image/glb';
$existing_mimes['babylon'] = 'image/babylon';
return $existing_mimes;
}
add_filter('upload_mimes', 'custom_upload_mimes');
Line 36. Here you can inject babylon.js into HEAD section. (Change the URL)
// Adding Babylon Viewer into header
wp_enqueue_script( 'babylon-viewer', esc_url_raw( 'https://cdn.babylonjs.com/viewer/babylon.viewer.js' ), array(), null );
The part with shortcode function - actually you don’t need it at all because you don’t use neither Babylon Viewer nor shortcodes.
Thanks. I tried moving the head code to the header through a “head and footer code” plugin. No change.
Sounds like I will have to let the coders of the site take a look at the php approach, as I don’t feel comfortable going in and changing the template.