WordPress / WooCommerce Documentation

Documentation for the WordPress version, API and overall implementation.

Getting Started

Easy 3D Model Viewer supports gltf, glb, glTF-Embedded, and compressed DRACO formats, delivering stunning realism with realistic lights, environment maps, shadows and more. Take your models to the next level by adding markers/hotspots that can play/control built-in animation, show tooltips and detailed info windows, animate custom camera postions and much more!.

It is built using EcmaScript6 using the latest JavaScript and CSS standards.

Please keep in mind that the models will be displayed and rendered in the browser so please optimize the model as best as possible, reduce the number of vertices as much as possible without losing visual quality and also optimize the textures using a tool like tinypng.com.

To make sure your model works and it is optimzed for the web you can test it online using this tool, just drag and drop the folder that contains the model and check the details.

The viewer is using vanila JavaScript and it has no dependencies so it can be used in libraries like React.

THe viewer is using AJAX to save the backend data so the page will not be refreshed when saving your settings.

Installation

After purchasing the plugin from CodeCanyon, inside the main zip file you will find installable plugin fwdemv.zip, video tutorial.

Installation steps

  • 1. In your WordPress Admin Dashboard, go to Plugins > Add New.
  • 2. Upload the fwdemv.zip plugin file that you downloaded from CodeCanyon.
  • 3. Click on install now.
  • 4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings or models, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

The plugin is constructed of two sections, the models manager that is used to add models and configure them, and the CSS editor that is used to update surten CSS aspects of the plugin like the viewer font...

I have created a video tutorial, I encourage you to watch it from start to end.

Adding a 3D model

To add a model open the plugin Models manager and click on the Add New Model button, complete the required data from the add model dialog, you can add as many models as you want, video tutorial

After adding the model click on the Edit Model Settings and add the model from the library in .glb or .gltf format, please note that the .gltf format must be exported from the 3D editing software with the texture in the same folder as the .gltf file since WordPress dose not support folders.

Once this is done click add the model from the library and set the desired postion, video tutorial.

Shortcode

This is all you need to do to add your model after this click on the shortcode button to copy the shortcode to the clipboard then paste it into your page, post, or custom post in a shortcode block, video tutorial.

General Settings

This section allows you to configure the viewer like the display type, viewer size and overall settings like the background color, here you can set up the lightbox as well example below, add the code below in an HTML block, and set the display type to lightbox.

<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', function(){
				fwdemvSetupModel0();
		});
</script>

<!-- Add a button -->
<button onclick="fwdemvSetupModel0()">Open in lightbox</button>

Preloader

This section allows you to configure the preloader, set the preloader color, size, text and other visual settings.

Shadow

This section allows you to configure the model shadow, please note the shadow is cofigured using the live settings viewer controls, video tutorial.

Lights & Environment Map

This section allows you to configure the model lights and environment maps (.exr format), please note the ligths and environment maps are cofigured using the live settings viewer controls, video tutorial.

Animations

This section allows you to configure the model default model animations if the model has animations, video tutorial.

Info Window

This section allows you to configure the info window, video tutorial.

Controller

This section allows you to configure the viewer contoller, remove add buttons like zoom, fullscreen etc, and more, video tutorial.

Orbital Controls

This section allows you to configure the viewer orbital controls, this controls allows to zoom, pan and rotate the model and more, video tutorial.

Markers

This section is best explained in a, video tutorial.

WooCommerce

Please look into the WordPress section to understand how to configure the viewer.

Here is a video tutorial explaining how to use in WooCommerce, please note that the lightbox display type will not work with the WooCommerce version, video tutorial.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the viewer externally.

You can access the player instances by their order in the page with the fwdemv name with its order after it, starting from 0. For example if you have 2 instances their names are fwdemv0 and fwdemv1. Here is an example how to use the API in the WordPress editor or in a code section of your page:

<script type="text/javascript">
							
		// API.
		let fwdemvAPI = setInterval(() =>{
				if(window['fwdemv0']){
					console.log('EMV API ready')
					clearInterval(fwdemvAPI);

					// Register the FULL_SCREEN event.
					fwdemv0.addEventListener(FWDEMV.FULL_SCREEN, onFullScreen);
				}
		}, 100);

		// Listen for the FULL_SCREEN event.
		function onFullScreen(e){
			console.log(e)
		}

</script>

<!-- Add a button -->
<button onclick="fwdemv0.zoom('in')">Zoom in</button>

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdemv0.methodName( /* arguments */ ), please note that fwdemv0 is the viewer instance name, if you are using multiple viewers don't forget to set the instance unique for each instance like this fwdemv1, fwdemv2, fwdemv3, etc... depending on how many viewers are added.

zoom

.zoom(direction:String)

Zoom in or out the model.

Parameters

  • direction (String) - this can be in or out.

getCameraPosition

.getCameraPosition():Object

Returns an object with the current camera position controls target current position.

showInfoWindow

.showInfoWindow(htmlContent:String):void

Show the info window with the HTML content.

Parameters

  • htmlContent (String) - this HTML content to show in the info window.

playOrStopAnimationClip

.playOrStopAnimationClip(name:String, play:Boolean):void

Play a built-in model animation based on name.

Parameters

  • name (String) - the built-in model animation name.
  • play (Boolean) - if set to true will play the animation.

getAnimationClips

.getAnimationClips():array

Returns an array with all the animation clips.

playAutoRotate

.playAutoRotate():void

Start to play the model auto-rotation.

pauseAutoRotate

.pauseAutoRotate():void

Stop to play the model auto-rotation.

goFullScreen

.goFullScreen():void

Set the viewer in fullscreen.

goNormalScreen

.goNormalScreen():void

Set the viewer in normal screen.

destroy

.destroy():void

Destory the viewer and remove it from DOM.

Events

Easy 3D Model Viewer has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

<script type="text/javascript">
							
		// API.
		let fwdemvAPI = setInterval(() =>{
				if(window['fwdemv0']){
					console.log('EMV API ready')
					clearInterval(fwdemvAPI);

					// Register the FULL_SCREEN event.
					fwdemv0.addEventListener(FWDEMV.FULL_SCREEN, onFullScreen);
				}
		}, 100);

		// Listen for the FULL_SCREEN event.
		function onFullScreen(e){
			console.log(e)
		}

</script>

FWDEMV.NORMAL_SCREEN

FWDEMV.NORMAL_SCREEN

Dispatched when the viewer goes to normal screen.

FWDEMV.FULL_SCREEN

FWDEMV.FULL_SCREEN

Dispatched when the viewer goes in full screen.

FWDEMV.ANIMATION_START

FWDEMV.ANIMATION_START

Dispatched when a model built-in animation starts, it also has an parameter with info about the animation action.

FWDEMV.ANIMATION_FINISHED

FWDEMV.ANIMATION_FINISHED

Dispatched when a model built-in animation has finished to play, it also has an parameter with info about the animation action.

FWDEMV.START_TO_LOAD

FWDEMV.START_TO_LOAD

Dispatched when the model is starting to load.

FWDEMV.LOAD_PROGRESS

FWDEMV.LOAD_PROGRESS

Dispatched when the model is starting to load, it also has an parameter with info about the loading process.

FWDEMV.LOAD_COOMPLETE

FWDEMV.LOAD_COOMPLETE

Dispatched when the model loading is complete.

FWDEMV.AUTOROTATE_PLAY

FWDEMV.AUTOROTATE_PLAY

Dispatched when the model auto-rotation starts.

FWDEMV.AUTOROTATE_PAUSE

FWDEMV.AUTOROTATE_PAUSE

Dispatched when the model auto-rotation is paused.

FWDEMV.SET_CAMERA_POSITION

FWDEMV.SET_CAMERA_POSITION

Dispatched when the marker tool is used and the right click button is used to copy to clipboard the camera position.

FWDEMV.SET_MARKER_OR_CAMERA_POSITION

FWDEMV.SET_MARKER_OR_CAMERA_POSITION

Dispatched when the marker tool is used and the left click button is used to copy to clipboard the marker position.

FWDEMV.ERROR

FWDEMV.ERROR

Dispatched when a loading error occurs.

© Copyright FWDesign