Babylon.js 3D Wordpress Plugin

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]

Demo: Babylon.js 3D WordPress Plugin – 3D is the Future of the Web
Woocommerce supported - see Shop :slight_smile:

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.

Github: GitHub - eldinor/babylon-wordpress-plugin: 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]

13 Likes

You LITERALLY ROCK!

Do you want to mention it in our documentation?

Pinging @PirateJC fyi

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 :slight_smile:

Yes I agree having a new how to dedicated to cms will be cool

How about one for Umbraco CMS

I would love that :slightly_smiling_face:

@labris - This is awesome!!!

Love it!!!

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)

  1. Put babylon.viewer.js to the HEAD section
  2. Make sure that you can upload GLB, GLTF files and other needed files extensions
  3. 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…

1 Like

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.

Yo @labris … I just saw this response… Thanks a bunch bro… I will look into these suggestions :slight_smile:

1 Like

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.

Best regards,

Ping @labris who build the plugin :slight_smile:

Hello,

First of all, do you use the latest version of the plugin?

If it is possible, send me admin access in PM, I will check what could be wrong.

1 Like

Hi there and thanks for getting back to me so quickly. I’m using build 3, i think this is the latest one, right?

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)?

<babylon extends="minimal" model="https://playground.babylonjs.com/scenes/dummy3.babylon"></babylon>

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

I sent PM to you, do you see it?

yes and i sent you the details back, thanks a lot :slight_smile:

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.


The correct result is here - https://igiuk.com/babylon-3d-wordpress/3d-examples/3d-demo-2/

1 Like