Babylon.js 3D Wordpress Plugin

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/

I use this script with Babylon Viewer. But you can also put any babylon.js script into Wordpress (with some conditions, for example you may need unique canvas ID).

Thank you for all your precious help. ^^ have nice day

Hello @labris,
i tried this method and im getting 2 viewers,

-add enqueue_script
-add new html < babylon id=“babylon-viewer”> elements
-change the babylon-shortcode.php to false for the enqueue_script(‘babylon-viewer’…

Hello and welcome!
Could you give more info or demo?
Otherwise I am not sure that I understand your problem.

Hello, Kindly check this link please:

im trying to change the view, to get a white background.

You may try to tune this snippet - Cornell Box on White Background – Babylon.js 3D WordPress Plugin
It has white background; you may need to remove ground and tune camera position etc.
See also some Viewer docs - Configuring the Babylon.js Viewer | Babylon.js Documentation

Something like that - Bottle Test – Babylon.js 3D WordPress Plugin
Here is the code for the Babylon Viewer:

<babylon extends="minimal" ground="false">
                     <model url="https://igiuk.com/babylon-3d-wordpress/wp-content/uploads/2022/03/3d-prefinal-transparent-p-1.13-1-2.glb">
                    </model>
              <!-- enable antialiasing -->
              <engine antialiasing="true"></engine>
              <!-- camera configuration -->
              <camera beta="1">
                <!-- add camera behaviors -->
                <behaviors>
                  <!-- enable default auto-rotate behavior -->
                  <auto-rotate type="0"></auto-rotate>
                  <!-- enable and configure the framing behavior -->
                  <framing type="2" zoom-on-bounding-info="true" zoom-stops-animation="false"></framing>
                  <!-- enable default bouncing behavior -->
                  <bouncing type="1"></bouncing>
                </behaviors>
              <position x="3" y="0" z="3"></position>
              </camera>
              <scene>
                <clear-color r="1" g="1" b="1"></clear-color>
              </scene>
            </babylon>

You may tune camera.beta value to achieve the best visual result.