How to use Babylon on my website?

I do have a regular WordPress website.
Is there a way to show my exports on my website when using WordPress?

If so, how can I show my content in 3D on my website?

Thank you so much for a step by step help and dummy guide.
I am not a coder, just a user trying to show a few 3d objects on my wordpress blog.

Thank you so much for any little help - this is great!
Keep rocking!

cheers :smiley:

Just follow along with the normal Babylon js 101 tutorials until you understand how to implement.

They are on the documentation page.

2 Likes

Thank you very much. I am new to this and I donā€™t understand any coding. I was searching for a Babylon WordPress plugin - but I couldnā€™t find anything that is associated with WordPress or any tutorial that would guide me through this.

With what specific keyword do I have to search under the documentation page to find what I would need to get started?

I can imagine I would need to upload files to my webserver via FTP.
Or, what I am familiar withā€¦ maybe a .zip file as a plugin?

Thank you so much for any further help,
I really do appreciate that.

So basically you will need a plug-in to Inject JavaScript into your header/footer/page.

Create a page with the required canvas element.

Include the bjs scripts

Then follow all the normal steps dictated in the tutorials.

1 Like

You could add the The Babylon.js Viewer - Babylon.js Documentation to a wordpress header/footer How to Easily Add JavaScript in WordPress Pages or Posts (3 Methods)

@pryme8 & @JohnK:
first of all, thank you so much for your help. This is awesome and I really do appreciate that.

As a bloody rookie, that gives me now a better understanding. That means, I have to copy the javascript code from babylon into the header and the footer of the WordPress Page.

That makes sense for me - even if I donā€™t know anything about coding. :smiley:

Now I need to figure out

  • what specific code is required
  • where to download the code
  • where to copy the individual code (header & footer)

Do I only have to add those two lines in the header?

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
<babylon model="https://domain.com/model.gltf"></babylon>

@Pryme8:
you mentioned steps I should follow from the tutorials. Which specific tutorials are you referring to?

Thank you so much!

Hi @teaguer, a simple bootstrap example can be found here in the ā€œFirst stepsā€ documentation

Personally, Iā€™m not too experienced working with wordpress, but you could possibly include a script that traverses your page for an element that you want to insert a canvas into, and from there you can setup your createScene and render loop and setup the model viewer.

Wordpress will not make this easy for you.
If you had a plain website, you just add a canvas element to the dom and a script to initialize bjs and you are off to the races. With wordpress all of your time is going to be spent figuring out workarounds to add your own custom html/js to the page. It can be done easily if you knew where to go. Just be aware that you are specifically fighting the WordPress cms, not the bjs library or web development as a whole.

Maybe we should make a bjs WordPress pluginā€¦

1 Like

Just wanted to provide my two cents -
the first line (the script) should be added to the <head> tag. The <babylon> tag should be added to where you want to show your model. Made sure you set the size of the tag, otherwise it will use its default values.

There is definitely a great need in Babylon plugins for different CMS.
I wrote small function which allows to load and publish gltf, glb and babylon files to Wordpress with help of Babylon viewer.
Need a couple of free hours to make plugin from it. I will publish it as soon as it will be ready. If you need this function urgently - PM me.
There are more interesting problems in this case than just insert some JS into header. For example, Wordpress has MIME checking system (which varies from version to version and has some bugs as well, just to remember legendary CSV upload bug). So if we want to upload 3D files into Wordpress we need to use some tricks.
Also note, that only gltf extension at the moment is valid MIME extensionā€¦

2 Likes

Here it is - Babylon.js 3D Wordpress Plugin
Babylon.js 3D Wordpress Plugin - forum thread
Download:
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]

2 Likes

You can add it through script, check this guide to fix this issue: The Babylon.js Viewer - Babylon.js Documentation

Hope, this guide will help you but if you face any issue while adding Script in your WordPress website, then I will suggest you to choose managed WordPress hosting where you can easily configure everything on some clicks due to the managed platform. I am using Babylon on my WordPress website and I configured it through their platform.

2 Likes

Not really, you can simply get by with a site buidler.

Here is the example of using Babylon.js and Wordpress - https://babylonpress.org/

1 Like