Babylon Viewer 3D Wordpress Plugin - Version 0.3 Major Update

Thanks for your help!
One year after initial release I am glad to introduce the version 0.3 of

Babylon Viewer 3D Wordpress Plugin

Display 3D models and 3D scenes with the help of shortcode [babylon]URL-OF-3D-FILE[/babylon] to use the 3D Viewer in Wordpress posts and pages, Woocommerce products, Elementor blocks etc.

Supports GLTF, GLB, STL, OBJ+MTL and BABYLON files upload and demonstration.

Babylon Viewer 3D Wordpress Plugin automatically provides a default viewing experience for 3D models. All aspects of this experience are configurable. See Configuring Babylon.js Viewer for more information on customizing the viewing experience.

If you need more control, you may use <babylon></babylon> tag in any Wordpress HTML block and configure all needed parameters (light, camera position, camera behaviour, rotating etc).

Shortcode: [babylon]URL-OF-3D-FILE[/babylon]. Supports external URLs.

Demo: Babylon.js 3D WordPress Plugin ā€“ 3D is the Future of the Web

Installation and Usage

  1. Standard WordPress plugin installation: go to Plugins ā†’ Add New ā€“ upload .zip file.
    If you use older version of this plugin, first deactivate it and delete. Plugin doesnā€™t contain any user data.
  2. Activate the plugin.
  3. Upload 3D file in GLTF, GLB, STL, OBJ+MTL or BABYLON format. If you upload OBJ file, make sure to upload corresponding MTL file too.
    Or use external URL - link to the 3D file.
  4. Publish in WordPress posts and pages, Woocommerce products, Elementor blocks etc with the help of shortcode:
    [babylon]Url-Of-3D-File[/babylon]
    Make sure there are no spaces between URL and shortcode brackets[babylon]URL[/babylon].
    Video: Easy Demonstration of 3D Models - Babylon.js Wordpress Plugin - YouTube
  5. Another option is to publish 3D files with the standard WordPress HTML block and have more ways to configure Babylon Viewer. You may adjust all needed parameters (light, camera position, camera behaviour, rotating etc), create our own Viewer template, change logo and link at navigation bar etc.

Example

Just put it into standard Wordpress HTML Gutenberg block and publish (result is here - Cornell Box on White Background ā€“ Babylon.js 3D WordPress Plugin):

            <babylon extends="minimal">
              <!-- Ground that receives shadows -->
              <ground receive-shadows="true"></ground>
              <!-- Default skybox
             <skybox></skybox>
             -->
                     <model url="https://models.babylonjs.com/CornellBox/cornellBox.glb">
                    </model>
              <!-- enable antialiasing -->
              <engine antialiasing="true"></engine>
              <!-- camera configuration -->
              <camera>
                <!-- 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="3" z="3"></position>
              </camera>
              <scene>
                <clear-color r="1" g="1" b="1"></clear-color>
              </scene>
            </babylon>

Read more about Babylon Viewer settings at https://doc.babylonjs.com/extensions/configuring_the_viewer

Video Demonstration: Easy Demonstration of 3D Models - Babylon.js Wordpress Plugin - YouTube

Wordpress Demo: Babylon.js 3D WordPress Plugin ā€“ 3D is the Future of the Web

Changelog

Version 0.3 - Major update!

Plugin name changed to Babylon Viewer 3D Wordpress Plugin - to distinguish it from Babylon JS 3D Wordpress Plugin which is going to be published soon.

Plugin code is completely rewritten for better standards and compatibility in future.

Corrected: MIME file formats:

                $mimes['gltf'] = 'model/gltf+json';
                $mimes['glb'] = 'model/gltf-binary';
                $mimes['obj'] = 'model/obj';
                $mimes['mtl'] = 'model/mtl';
                $mimes['stl'] = 'model/stl';
                $mimes['babylon'] = 'model/babylon+json';

Download from GitHub - GitHub - eldinor/babylon-wordpress-plugin: Display 3D models and 3D scenes with the help of shortcode [babylon]URL-OF-3D-FILE[/babylon] to use the 3D Viewer in Wordpress posts and pages, Woocommerce products, Elementor blocks etc. Supports GLTF, GLB, STL, OBJ+MTL and BABYLON files upload and demonstration.

7 Likes

YEAH!!! thanks a lot for your work!

1 Like

I hope I will we able to create new section ā€œBabylon CMS Integrationā€ in How-To docs.

3 Likes

Added to the Documentation - Babylon.js Wordpress Integration | Babylon.js Documentation

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

Successfully tested with Wordpress 5.9.

Viewer link itā€™s broken. New one is https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer/configuringViewer

Successfully tested with Wordpress 6.2.2.

@labris I am creating a web site for my friend and he wants to display some of his products in 3D so I downloaded the BabylonJS Wodpress plugin and Iā€™ve just found out that you are the author :slight_smile:

Thanks buddy!

:vulcan_salute:

2 Likes

The new version of the Viewer v2 Wordpress plugin is announced here - New Babylon Viewer v2 Wordpress 3D Plugin

Demo site and download - Babylon Viewer v2 Wordpress 3D Plugin

2 Likes

Andā€¦arenā€™t you ashamed? :face_with_hand_over_mouth:
He should be part of your family now, being a member of the ā€˜Club of Sevenā€™ :joy:

Wait! :rofl: I donā€™t get the true message of this message :rofl:

Trying to analyze it:

  1. I downloaded a Wordpress plugin
  2. I started to play with the settings
  3. I found out that our friend @labris is the author
  4. I thanked him for creating it and making my life easier so I can quickly get rid of another non-paid-could-you-just-have-a-look-at-it-and-tell-me-what-is-wrong-always-ending-by-foking-up-my-whole-day-job :crazy_face:

Why should I be ashamed? :stuck_out_tongue: Did I lost my sense of humor? Please shed some light on this one :smiley:

1 Like

Donā€™t mind. Itā€™s only because the WP plugin project has been on sinceā€¦ well, let me put it this way: Before greasedLine :joy: Itā€™s nearly a ā€˜legacy projectā€™ by now :sweat_smile: I thought you would have known (on the other hand, not everyone wants to work with WPā€¦ I donā€™tā€¦ sometimes, Iā€™m forced to :grin:)

Thatā€™s the case :slight_smile:

1 Like

Still, WordPress powers more than 40% of all websites in the world (React less than 5%).

1 Like

Yup. That was a really smart and nice move you did there (I guess I told you already) :smiley:

I must confess I envy your good mood. Itā€™s sunny here, Iā€™m working outside but let me tell you Iā€™m depressed from not able to figure out why is my mqtt broker still sending an incorrect payload :smiley:

:rofl: :rofl: :rofl: :rofl:

1 Like

dunno what to sayā€¦ may be try ā€˜insideā€™ :grin: :joy:

@mawa https://mosquitto.org/

1 Like

Again, donā€™t know what to say: I love the (v1) ā€˜robot speachā€™ explaining that things are ā€˜f**kedā€™ ā€¦ Does it make it more convincing? :thinking: Hum? not sure :roll_eyes: :laughing:

1 Like