Giter VIP home page Giter VIP logo

eldinor / babylon-wordpress-plugin Goto Github PK

View Code? Open in Web Editor NEW
31.0 7.0 10.0 1.25 MB

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.

Home Page: https://igiuk.com/babylon-3d-wordpress/

License: GNU General Public License v3.0

PHP 100.00%
babylon-wordpress-plugin wordpress shortcode gltf 3d-engine 3d-models 3d-graphics webgl-programming glb stl-model babylonjs

babylon-wordpress-plugin's Introduction

Babylon Viewer 3D Wordpress Plugin

Version 0.31

Successfully tested with Wordpress 6.2.2

Display 3D models, 3D animations 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: https://igiuk.com/babylon-3d-wordpress/

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: https://youtu.be/GNFNt2lGBYw
  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 - https://igiuk.com/babylon-3d-wordpress/3d-examples/cornell-box/):

            <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: https://youtu.be/GNFNt2lGBYw

Wordpress Demo: https://igiuk.com/babylon-3d-wordpress/

Changelog

Version 0.31

Automatic script loading only when babylon shortcode or tag exist.

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.

Readme file is rewritten in order to give more necessary information in a more clear way.

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';

Version 0.2. Corrected - Notice: wp_enqueue_script was called incorrectly.

babylon-wordpress-plugin's People

Contributors

eldinor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

babylon-wordpress-plugin's Issues

list of all options

First, thank you for this plugin! And I apologize in advance if this is a stupid question, or not the place o ask...

I am a typical 3D artist with some extended WordPress knowledge that found your plugin. So not a programmer. It totally works and I like it a lot. But I get stuck at the configuration. I have to say that I think it would be nice if the settings from the scene, that was created with the sandbox editor, would simply be used to display the scene on a WordPress site. When I drag the file onto a new sandbox, all settings are used. So if I set limits on the camera, they are used in the new sandbox. Would that not be the easiest way also for a plugin? Or am I missing something? Off course the local settings in html could be used to overwrite the ones in the scene for people who want that. But if nothing is defined, just the file loaded, it should use the scenes settings.

I do understand from looking at the actual BabylonJS code here: https://github.com/BabylonJS/Babylon.js/blob/master/Viewer/src/configuration/interfaces/cameraConfiguration.ts that I can set the position by setting: x="3" y="3" z="3" Because I can see in the code that the position anticipates 3 numbers tagged with x, y and z.

But I cannot figure out how to set the minZ (also know as lowerRadiusLimit as it seems). The code reads: "minZ?: number;". So I know that a number is anticipated

I tried to set it at the camera opening tag: and also

To no avail.

Then I tried to set it in the html like the position. But that didn't make sense, because it ended up like this: <lowerRadiusLimit="4"> My gut tells me that it should be something like: <lowerRadiusLimit (something-goes-here)="4">

I don't seem to be capable of converting the code that is described here to the syntax the plugin is expecting: https://doc.babylonjs.com/extensions/babylonViewer/configuringViewer#configuring-the-viewer

I guess it would really really help to have a full list of configuration examples. Or maybe that exists and I am simply not able to find it.

Here is the blog post I am working on: https://www.blog.fullframestudios.ch/babylonjs/

And I am almost done. All I would like, at this point, is to set the minimum and maximum of zoom and maybe also set the lower beta limit as I set it in the sandbox editor.

Add trim URL

Add trim function to allow spaces between shortcode brackets.

Short Code from hook not working

If I use hook for write short code
do_shortcode('[babylon]'.$object3D.'[/babylon]');
will be write the code on html page, but nothing happening. If I write short code direct on the page and use hook, both working.

Crash in Safari

Hi there!

When opening a 3d model embedded with the babylon wordpress plugin on the safari browser, it crashes.
Now sure if this is already a known issue.

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.