Babylon.js 3D Wordpress Plugin

As I already wrote, the simplest way to put your .babylon files into Sandbox and save them as .glb.

Another, more complicated (but maybe needed) way is to ask the person who created 3D files to export them to .glb instead of .babylon.

#### Version 0.31 Changelog
Automatic Babylon Viewer script loading only when babylon shortcode or tag exist in post content.

Privet Andrei,
Question about Babylon’s, In preview sandbox I was not able to go inside the model, but I have embed shortcode in Wordpress website and able to go inside the model when zoom in.
Also background on model is different

Thanks,
ALEX D.

The shortcode uses the default configuration of the Viewer (gray background with navbar). If you use minimal configuration, you may define camera position, camera limits etc for your model.
There is different skybox at Sandbox by default but you can choose studio environment at the right bottom menu. If you want to use your environment file with Viewer you need to define in in DOM (or with other ways) as it is described in the Docs - Configuring the Babylon.js Viewer | Babylon.js Documentation

1 Like

Hopefully this will be fixed soon.

Meanwhile, if you cannot remove .hdr texture from .babylon file, just put your .babylon files into Sandbox and save them as .glb.

Please view my error here. It seems there is something going on: Error Loading the Model

Hello,
a little bit new in the babylon wordpress plugin. I ’ ve some issues . I’am looking for a solution for changing the skybox of my model that’s is saved inside a sandbox.babylonjs.com i ve still a default viewer.
i guess we should change with the < skybox > < /skybox> but it means that i need to reconfigure all the viewer in this case with tags < > . I know there’s a documentation here for customizing what we want Configuring the Babylon.js Viewer | Babylon.js Documentation but a little bit hard for me to put into pratice, espacially for the skybox
but i don’t get well how to manage well that extension and properties and also how to manipulate skybox with < skybox ></ skybox > frames.
In fact i want to put the skybox of the sandbox.babylonjs.com inside my .glb saved. but with the plugin wordpress we have only a black / white neutral background, really need to see reflected colors inside my objects.
thank you

Hello,
It seems that for your case, to avoid the tags reconfiguration, the simplest way is just to add small .js for all viewer website pages (as it described here - Babylon.js Viewer - Advanced usage | Babylon.js Documentation).
Let me know if it suits you; as far as I remember I have this script somewhere but need some time to find it :slight_smile:
Basically it is just several lines, but you need to put them into the right place.

  var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("https://playground.babylonjs.com/textures/environment.env", viewer.sceneManager.scene);
  viewer.sceneManager.scene.environmentTexture = hdrTexture;

No it doesn’t work with a simple call of the script js in theme with wp_enqueue_scripts , the script hello world works but no effects on glb.

Which place is the good? maybe inside the plugin itself? but where?

Thank you :wink:

Well, this is just the part of some bigger script - BabylonJS Viewer Progress Bar with Overlay Image
Wait a bit, while I’ll get access to my laptop (in 5-6 hrs), I’ll write more exactly what you need to do to use it with Wordpress.

Ok no emergencies. I’m trying some experimentations in my side, take your time :wink:
anyway i would thank you !

Oh yes another issue, when i’m scrooling inside a viewer for zooming, my website page is also scrolling, can i prevent this?

Thank you :wink:

Short answer - use e.preventDefault()

1 Like

So here is the basic HTML setup - BabylonJS Viewer with Promises and Changed ENV Texture
There are also commented lines which allow to change clearColor parameter, logo etc. You can change actually any scene/camera/lights/meshes and rendering pipeline settings as in usual Babylon.js script.

Wordpress example is here - Babylon WordPress Viewer with Promises – BabylonPress

Using the Babylon Viewer 3D WordPress plugin as in abovementioned example you may need to edit this line in babylon-shortcode.php and set the last attribute to false (to put the Babylon Viewer script into the header instead of footer):

    wp_enqueue_script( 'babylon-viewer', esc_url_raw( 'https://cdn.babylonjs.com/viewer/babylon.viewer.js' ), array(), null, false );

In Wordpress Gutenberg Editor use Custom HTML block(s) for the code (see HTML example code in the beginning of this post).

1 Like

Oh thank you, you’re really great that’s working . i had to
-add enqueue_script
-add new html < babylon id=“babylon-viewer”> elements
-change the babylon-shortcode.php to false for the enqueue_script(‘babylon-viewer’…

Great it’s more fun now really nice.

After, in my webpage i have 2 canvas viewers and i had to give 2 differents id and redo 2 times those scripts for associate each id script getViewerById(“babylon-viewer-1”) for each tag babylon with associated id . Maybe there’s be another way to do it easier without ids?
For now , that’s ok i would thank you very much ! (maybe soon i’ll come back)

maybe a last thing : in all browers the e.preventDefault on the event “scroll DOMMouseScroll wheel” {passive:false} argument working for firefox, for chrome on iMac, for Safari, but not on chrome on windows 10. i really don’t know what’s going on with …

If you want to test my website :
https://3d.jupixel.fr for seing a part of my 3d work :slight_smile:

Nice models!
You may add more 3D experience with some scripting (change textures or walk around etc).

As for e.preventDefault - not sure how you implemented it. Let me know if it works for you in Chrome for WIndows 10 (it works for me) at this testing page - Testing BabylonPress 3D Suite – BabylonPress

I use
canvas.addEventListener("wheel", evt => evt.preventDefault());

1 Like

Finally, I’ve tried everything with javascript selectors , nothing.

I have in my theme i think some jQuery implicated with wheel mousewheel scroll and the solution for me was :
Thank you anyway but for my part it was this one :

window.addEventListener("load", function(event) { 
console.log('script prevent Scroll READY');
jQuery('canvas').on('mousewheel DOMMouseScroll',function(e){
e.stopPropagation();
e.preventDefault();
});

});

Be carefull when using a < babylon ></ babylon > inside a page in editor mode, code < babylon >< / babylon > may disappearing when saving page… (that’s what happened to me just now, thinking cdn was KO, because code wasn’t modified and canvas disappeared )

If you use Wordpress visual editor it may perform unnecessary cleaning of your code, so better use HTML mode or, if Gutenberg editor, standard HTML blocks.

Yes , thank you it’s fine. Just some subtilities ^^, you’re great.
I’d really want to do more with that plugin,
I’m trying to understand for example how to set up lights :
lights are inside < lights > < / lights > tags.
Attributes of light 1 is for example type=1, < light1 type=“1” shadow-enabled=“true” > after testing seems meaning a directional light, well .
How could i set up some other lights with tags? any documentation if i want to make a spot light, which is the corresponding type? where could i find the API for setting it well.Idem for cameras,

Another thing : engine.antialiasing=“true” seems not reducing aliasing. lights are still aliased for type=“1” for example.

Any help possible ;=) ?
Thank you

Personally for me it is much easier to use simple js script than DOM Viewer tags.
You may have a look at example at Babylon WordPress Viewer with Promises – BabylonPress The code is between lines 208-250.

As for the DOM tags, the conversion is made with Handlebars. So basically you need to know JS syntax than translate it into HTML tags according to some rules which you may try to find in Docs - Modify the Babylon.js Viewer | Babylon.js Documentation , in API
and at https://handlebarsjs.com/