Display 3D content with Wordpress using a shortcode to insert in a page or post. Supports GLTF, GLB and BABYLON files upload. Shortcode: [babylon]URL-OF-3D-FILE[/babylon]
Installation and Usage
Standard WordPress plugin installation: go to Plugins -> Add New – upload .zip file.
Activate the plugin.
Upload 3D file in .GLTF, .GLB or .BABYLON format. Or use external URL.
Publish in WordPress posts, pages, Woocommerce products with the help of shortcode: [babylon]URL-OF-3D-FILE[/ babylon] Make sure there are no spaces between ]URL-and-brackets[ .
Another option is to publish 3D files with the standard WordPress HTML block and have more ways to configure Babylon Viewer. Read more at Configuring The Viewer - Babylon.js Documentation
If you’d like to play with demo or contribute, just send me PM. Initial demo definitely needs more good examples (especially viewer configurations).
Actually I feel it could be more like community project, as the beginning of Babylon.js plugins development for different CMS.
Sure, I would be proud to describe this solution in Babylon documentation.
Which section it should go to? Or maybe it could be the subsection of “Babylon CMS Integration” section…
Also, I am waiting some more feedback and bug reports
Well, technically it shouldn’t be difficult.
The most easy way is to do it at template level (but it is also possible to create package, as they call plugins in Umbraco world)
Put babylon.viewer.js to the HEAD section
Make sure that you can upload GLB, GLTF files and other needed files extensions
Create template section where you will be able to insert HTML code for Babylon Viewer.
There were several shortcode packages for Umbraco but I am not sure how they work with the latest 8.x version. So it is simpler just to use HTML… or should I dig deeper?
Hello how are you? I installed your plugin on my website (3D Demo » Sgi Graphics Installation, Graphics Installer), I have no problem. But I don’t want the bottom of the vehicle to be seen. Is it possible to do this? Thank you so much…
Hello,
Seems that you need to limit camera movement by X axis, like in this example - https://www.babylonjs-playground.com/#E0QUF#1
Let me know if it is the case.
Also note, that it will be not possible with the shortcode - you’ll need to implement some js script here, I suppose.
More docs about it here - Recreating the default configuration for the viewer - Babylon.js Documentation and also other docs regarding Babylon Viewer.
I am developing more options to configure Viewer at Wordpress side, but meanwhile this plugin is as simple as possible for maximum reliability.
Your feedback will help me to understand which functions are needed for users, so go ahead.
Hi there,
I’m desperately trying to get the Wordpress plugin to work. I’ve followed all your instructions, watched sample videos etc. For some reason beyond my wisdom (wordpress novice) I get the message ‘error loading the model’ in my test-post or test-page (tried both). I can see the babylon loader icon though before the message pops up. I have tried with different file types that I uploaded into the wp media library. Those file types have been checked in the babylon sandbox and seem to work fine. I’ve also tried changing my WP theme, but to no avail. Can you help me and hopefully point me in the right direction as to where I’m doing things wrong.
I think i cannot send direct messages, since I’m new here and don’t have all functionalities yet. Or maybe i cannot find the ‘compose’ button in the message interface.
Yes, version 0.3 is the latest currently.
How do you publish 3D models - with shortcode or with the tag?
What do you see if you put the code below into WordPress HTML block (in page or post)?
I use shortcode because it seemed the easiest way to do it for now. I tried your code in a HTML block and nothing happened. not even the loader icon or the ‘error loading model’ message
As for shortcode, you may try [babylon]https://playground.babylonjs.com/scenes/BrainStem/BrainStem.gltf[/babylon]
in Wordpress post or page, in the Shortcode Block.
