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 note that it will not work locally, it has to run on an HTTP or HTTPS protocol.

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 model is using vanila JavaScript and it has no dependencies so it can be used in libraries like React.

Installation

In the build folder there are multiple .html files that can be used as reference to copy and paste the HTML and JavaScript code, I have used the start.html file as reference for this documentation.

Copy the content folder, environmentMaps folder, media folder, models folder and src folder in the same folder where you have the HTML file where you want to use the viewer, this folders can be added anywhere on the server but is best to keep them relative to your main HTML file.

Include the viewer CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" type="text/css"  href="./content/global.css"/>
<script type='text/javascript' src="./src/FWDEMV.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the viewer JavaScript and CSS files.

<script>
	if(document.readyState == 'complete'){
		fwdemvInit();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdemvInit();
		});
	}

	function fwdemvInit(){
		
		new FWDEMV({

			// General settings.  
			instance: 'fwdemv0',
			texturesFolder: 'content/markers/',
			displayType: 'responsive',
			parentId: 'myDiv',
			maxWidth: 4000,
			startResizingWidth: 1000,
			maxHeight: 750,
			autoScale: 'yes',
			initializeWhenVisible: 'yes',
			lightboxCloseButtonWidth: 30,
			lightboxCloseButtonHeight: 30,
			lightboxCloseButtonBackgroundNormalColor: "#10A0F1",
			lightboxCloseButtonBackgroundSelectedColor: "#FFFFFF",
			lightboxCloseButtonIconNormalColor: "#FFFFFF",
			lightboxCloseButtonIconSelectedColor: "#10A0F1",
			lightboxBackgroundColor: 'rgba(0, 0, 0, .7)',
			backgroundColor: '#FFFFFF',
			fullscreenBackgroundColor: '#FFFFFF',

			// Preloader.
			preloaderText: 'Loading 3D Model: ',
			preloaderPosition: 'center',
			preloaderOffsetX: 0,
			preloaderOffsetY: 0,
			showPreloaderProgressBar: 'yes',
			preloaderWidth: '40%',
			preloaderProgressBarBackgroundColor: '#8b859b',
			preloaderProgressBarFillColor: '#10A0F1',
			preloaderFontColor: '#000000',
			preloaderBackgroundColor: 'rgba(255, 255, 255, 1)',

			// Display helper.
			showGridHelper: 'no',
			modelWireframe: 'no',
			showSkeletonHelper: 'no',

			// Model.
			source: './models/camera/scene.gltf',
			posterSource: 'media/images/camera-poster.png',
			animateModelOpacityOnIntro: 'no',
			showModelInfoInTheConsole: 'no',
			loadModelDelay: 0,

			// Shadow.
			showShadow: 'yes',
			shadowBlur: 1.21,
			shadowDarkness: 1.144,
			shadowOpacity: .8,
			shadowPlanePositionOffsetY: 0.017,
			shadowPlaneOpacity: 0,
			shadowPlaneColor: '#FFFFFF',

			// Camera amd model initial position.
			cameraPosition: 'x:0, y:0, z:1, tx:0, ty:0, tz:0',
			modelScaleOffset: 0,
			modelPositionX: 0,
			modelPositionY: 0,

			// Controller.
			buttons: 'play, zoomin, zoomout, info, help, fullscreen',
			buttonsToolTips: 'Play/Pause, Zoom in, Zoom out, Info, Help, Full screen/Normal screen',
			showButtonsLabels: 'yes',
			showBlockTouchButton: 'yes',
			blockTouchButtonSize: 40,
			hideControllerDelay: 3,
			buttonSize: 30,
			startAndEndButtonsHorizontalGap: 22,
			startAndEndButtonsVerticalGap: 5,
			spaceBetweenButtons: 15,
			controllerOffsetY: 24,
			buttonsToolTipOffsetY: 6,
			buttonsIconNormalColor: '#FFFFFF',
			buttonsIconSelectedColor: '#d6d6d6',
			buttonToolTipBackgroundColor: "#FFFFFF",
			buttonToolTipTextColor: "#00000",
			controllerBackgrondColor: 'rgba(0, 0, 0, .4)',

			// Orbital controls.
			enableOrbitalControls: 'yes',
			zoomFactor: 0.1,
			zoomSpeed: .25,
			dampingFactor: 0.1,
			autoRotate: 'no',
			autoRotateSpeed: 0.2,
			screenSpacePanning: 'yes',
			enablePan: 'yes',
			enableZoom: 'yes',
			enableKeboardPan: 'yes',
			keysType: 'asdw', // arrows/asdw
			panSpeed: 1,
			keyPanSpeed: 1,
			zoomMinDistance: 0.37,
			zoomMaxDistance: 1.17,
			horizontalRotationMaxAngle: 0,
			horizontalRotationMinAngle: 0,
			verticalRotationMinAngle: -180,
			verticalRotationMaxAngle: 180,

			// environment map.
			envMapSource: './environmentMaps/sky.exr', //./environmentMaps/venice_sunset_1k.exr
			envMapShowBackground: 'no',
			backgroundBlurriness: 0,
			envMapIntensity: 1,

			// Lights.
			showLights: 'yes',
			toneMapping: 'ACESFilmic',
			toneMappingExposure: 0,
			ambientIntensity: 1,
			ambientColor: '#FFFFFF',
			directionalLightIntensity: 1,
			directionalLightColor: '#FFFFFF',
			directionalLightX: 0.5,
			directionalLightY: 0,
			directionalLightZ: 0.866,

			// Animations.
			defaultAnimationName:'',
			defaultAnimationPlayDelay: 0.2,
			defaultAnimationRepeatCount: 999999,
			showMarkersWhileDefaultAnimationIsPlaying: 'yes',
			defaultAnimationClampWhenFinished: 'yes',
			defaultAnimationCrossFadeDuration: .5,
			timeScale: 1,
			defaultAnimationCameraPosition: '',
			defaultAnimationCameraPositionDuration: '1.2',
			defaultAnimationCameraPositionEasingType: 'easeout',

			// Markers & camera positions.
			markersData: '',
			showMarkerTool: 'no',
			markerShowAndHideAnimationType: 'scale',
			showMarkersAfterTime: 2,
			markerToolTipOffsetY: 10,
			markerPolygonOffsetAlpha: .1,
			markerToolTipAndWindowBackgroundColor: '#FFFFFF',
			markerPositionCopiedText: 'Marker position copied to colipboard!',
			cameraPositionCopiedText: 'Camera position copied to colipboard!',
			preventToCopyMarkerPosition: 'Please disable the model animation to add markers!',
			showCameraPositionsSelectMenu: 'no',
			cameraPostionsSelectMenuDefaultText: 'Plane Details',
			cameraPostitionSelectMenuMaxWidth: 240,
			cameraPostitionSelectMenuHeight: 40,
			cameraPostitionSelectMenuStartAndEndGap: 14,
			cameraPostitionSelectMenuButtonSize: 30,
			cameraPostionsSelectMenuBackgroundColor: 'rgba(0, 0, 0, 0.40)',
			cameraPostionsSelectMenuTextColor: '#FFFFFF',
			cameraPositionsNextButtonTooltip: '',
			cameraPositionsPrevButtonTooltip: '',
			cameraPostionsSelectMenuButtonNormalColor: '#d6d6d6',
			cameraPostionsSelectMenuButtonSelectedColor: '#FFFFFF',
			cameraPositionsSelectItemsMaxWidth: 350,
			cameraPositionsSelectItemHeight: 24,
			cameraPositionsSelectItemStartLeftGap: 6,
			cameraPositionsSelectItemStartRightGap: 30,
			cameraPositionsSelectItemVerticalGap: 16,
			cameraPositionsSelectSpaceBetweenItems: 8,
			cameraPositionsSelectMaxItems: 4,
			cameraPositionsSelectItemBackgroundColor: 'rgba(0, 0, 0, .6)',
			cameraPositionsSelectItemsScrollBarTrackColor: '#D9D9D9',
			cameraPositionsSelectItemsScrollBarHandlerNormalColor: '#767676',
			cameraPositionsSelectItemsScrollBarHandlerSelectedColor: '#FFFFFF',
			cameraPositionsSelectItemNormalColor: '#D9D9D9',
			cameraPositionsSelectItemSelectedColor: '#FFFFFF',

			// Info window.
			infoWindowData: '',
			infoWindowWidth: 1080,
			infoWindowMainBackgroundColor: 'rgba(255, 255, 255, .7)',
			closeButtonSize: 27,
			closeButtonBackgroundNormalColor: "#10A0F1",
			closeButtonBackgroundSelectedColor: "#FFFFFF",
			closeButtonIconNormalColor: "#FFFFFF",
			closeButtonIconSelectedColor: "#10A0F1",
			infoWindowBackgroundColor:"#FFFFFF",
			infoWindowScrollBarColor:"#8b859b",

			// Help screen.
			helpScreenText: 'Help',
			mouseRotateAndZoomText: 'Rotate And Zoom',
			mouseRotateAndZoomInfo: 'Use the left mouse click to rotate and mousewheel to zoom.',
			mousePanText: 'Pan With Mouse',
			mousePanInfo: 'Use the right click mouse button to pan.',
			keyboardPanText: 'Pan With Keyboard',
			keyboardPanInfo: 'Use the the W A S D keyboard keys to pan.',
			touchRotateText: 'Rotate',
			touchRotateInfo: 'Use one finger to rotate.',
			touchPanText: 'Pan',
			touchPanInfo: 'Use two fingers to pan.',
			helpScreenIconColor: '#10A0F1',

			// GUI settings.
			showGUI: 'yes',
			closeGUIWhenNotHit: 'no',
			modelScaleOffsetMin: 0,
			modelScaleOffsetMax: 1,
		});
	}
</script>

The last step adding the viewer is to create a div with an unique ID that will act as the parent/holder for the viewer and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.

<!-- Viewer holder. --> 
<div id="myDiv"></div>

To add multiple viewers just redo the steps explained above and make sure to change the instance to fwdemv1, fwdemv2, fwdemv3, etc... depending on how many viewers are added, also change the parentId to a different ID.

Please read the settings section to understand the viewer configuration options.

Add your own model

The supported format are gltf, glb, glTF-Embedded, and compressed DRACO, to add your own model set the source option to your model absolute or relative path.

After adding the model the initial position must be set, to do this set the showMarkerTool: 'yes', after this is done you can use the right click to copy to clipboard the camera position that you want and once you like the position set it in the cameraPosition option. Please watch this video tutorial for more info.

<!-- Model -->
source: './models/camera/scene.gltf',
...
cameraPosition: 'x:0.7916959269558312, y:0.4623247340252273, z:-0.3633283683945322, tx:0.05594507976615551, ty:-0.07176170310160453, tz:0.012591109655911795',

Add a poster

The poster is optional, adding a poster that will appear while the model is loading is simple, the supported poster format is .png or .jpg, just set the posterSource option to your poster absolute or relative path, if you don't want a poster leave this option blank. Please watch this video tutorial for more info.

<!-- Model -->
posterSource: 'media/images/camera-poster.png',

Using an environment map

EMV suports environment maps .exr format to simulate reflections and lighting for the scene and 3D model, to enhance realism by providing reflections on objects based on the surrounding environment, creating a more immersive visual experience.

To add an environment map you need an .exr file. Based on your project is best to use the lowest quality possible but it dose not look good you can use a 2k, 4k or even 8k .exr file.

The environment map is optional, adding an environment map set the envMapSource option to your .exr file absolute or relative path. Please watch this video tutorial for more info.

<!-- Model -->
envMapSource: './environmentMaps/sky.exr',

Working with the default animation

It is possible to play and control a built-in model animation using the viewer animations options, this is better explained in this video tutorial.

Setup Info Window

To add an info window create a div with a unuque id and this id as the value for the infoWindowData option. The content from the div will be displayed in the info window that is opened by clicking the info button from the controls, more info in this video tutorial.

Any HTML content can be added including video/autio.

<script>
	<!-- ... -->
	infoWindowData: 'info_window_data',
	<!-- ... -->
</script>

<!-- Info window. -->
<div id="info_window_data" style="display: none;">

	<div class="third">
		<h1>Video & Youtube Ready</h1>
		
		<div class="youtube">
			<iframe src="https://www.youtube.com/embed/Ihuq6ADCEKk?fs=1" frameborder="0" width="100%" allowfullscreen></iframe>
		</div>

		<p>Our info window provides seamless support for unlimited HTML content, effortlessly showcasing detailed, responsive elements such as video, audio, CSS styling, and more. Embrace versatility at its finest!</p>

		<p>Elevate your experience with our 3D model viewer, designed for ultimate responsiveness. It seamlessly supports gltf, glb, and compressed DRACO format models, delivering stunning realism with realistic lights, environment maps, and shadows. Take your models to the next level by adding markers/hotspots, complete with tooltips and detailed info windows, built-in animation control, and customizable camera positioning, <a href="https://webdesign-flash.ro" target="_blank">read more</a></p>
	</div>

</div>

Working with markers

To add an markers create a div with a unuque id and this id as the value for the markersData option. Inside this div you can add as many markers as you want with the below markup. Please watch this video tutorial for more info.

<script>
<!-- ... -->
markersData: 'markers_data',
<!-- ... -->
</script>

<div id="markers_data" style="display: none;">

	<div data-class = ""
		data-position = "x:0, y:0, z:0, nx:0, ny:0, nz:0, meshName: none"
		data-marker-type = "3D"
		data-polygon-offset-units = "1"
		data-icon-type = "playPointer"
		data-border-color = "#FFFFFF"
		data-border-selected-color = "#10A0F1"
		data-background-color = "#10A0F1"
		data-background-selected-color = "#FFFFFF"
		data-icon-color = "#FFFFFF"
		data-icon-selected-color = "#10A0F1"
		data-scale = "1"

		data-normals-angle = "130"
		data-tooltip-offset-x = "0"

		data-link = ""
		data-target = ""

		data-animation-name = ""
		data-animation-repeat-count = "1"
		data-animation-time-scale = "1"
		data-animate-with-model = "yes"
		data-animation-finish-action = "default"
		data-animation-finish-reset-camera = "default"
		data-animation-show-tooltip-when-finished = "no"

		data-camera-position-name = ""
		data-camera-position = ""
		data-camera-show-tooltip-when-finished = "yes"
		data-camera-position-animation-duration = "1.8"
		data-camera-position-animation-easing-type = "easeout"> 
	</div>

</div>

Below is a detailed description of all parameters:

data-position - the marker postition on the model, this is taken using the built it marker tool by left clicking on the model than pasting the value for this option, the value contains the click intersection x, y and z and also the closest face x, y and z, this is best explaiend in this video tutorial.
data-marker-type - it can be 2D or 3D, for more info about this please check out this example, video tutorial.
data-polygon-offset-units - a value from 0 to 5, if the marker is 3D type is pusing the marker visually to be over the intersection point, the larger the value the more exlusion is added, this can only be explain visually so please watch this video tutorial.
data-icon-type - the icon visual type, this can be plus, plusPointer, link, linkPointer, info, infoPointer, play, playPointer, video tutorial.
data-border-color - the marker border normal color, hex or rgb.
data-border-selected-color - the marker selected border color, hex or rgb.
data-background-color - the marker normal background color, hex or rgb.
data-background-selected-color - the marker selected background color, hex or rgb.
data-icon-color - the marker normal icon color, hex or rgb.
data-icon-selected-color - the marker selected icon color, hex or rgb.
data-scale - the marker scale factor, 1 is normal scale, 2 is 200% scale, 3 is 300% scale, even though the icons are vector the 3D type are textures so try not to make the scale bigger than 3 this way it aways look sharp.
data-normals-angle - If the marker type is set to 2D, it will hide itself in response to the angle formed by the camera and the intersection of the normal face. The marker's disappearance is influenced by this angle, with a higher angle causing the marker to hide more promptly, video tutorial.
data-tooltip-offset-x - the tooltip window offset x in px.
data-link - the link of the page to open when the marker is clicked, if you don't want to open a page when the maerker is clicked leave this blank.
data-target - this can be _self it will open the page in the same window, _blank it will open the page in a new window.
data-animation-name - the model built-in animation name to play when the marker is clicked, video tutorial.
data-animation-repeat-count - a integer number that represents how many times to repeat the animation.
data-animation-time-scale - a float number that represents the animation playback speed/time scale, 1 is the default speed.
data-animation-time-scale - a float number that represents the animation playback speed/time scale, 1 is the default speed.
data-animate-with-model - this can be yes or no, it animates the marker with the model or it keeps it in the default position, video tutorial.
data-animation-finish-action - the actiion to run when the animation has finished to play, video tutorial.

default - resumes the default playing animation id one is defined or returns to the model its intial state.
clampWhenFinished - stops the animation at the last frame.
playInReverse - plays the animation in reverse.
playInReverseWithMarker - when the animation has finished to play a the marker icon will change to a rewind icon and when clicked it will play the animation in reverse.

data-animation-finish-reset-camera - reset animation of the camera, video tutorial.
- default - dose nothing.
- resetOnAnimationStart - if the data-animation-finish-action is set to playInReverseWithMarker when the marker is clicked to play the animation in reverse the camera will also tween to it't original position.
- resetOnAnimationFinish - if the data-animation-finish-action is not set to playInReverseWithMarker when the animation is finished it will tween the camera to the default position.
data-camera-position-name - this option is for tweening the camera at a specific position when the marker is clicked, this name will also appear in the camera menu selector if it is enabled in the viewer options by setting showCameraPositionsSelectMenu to yes, please make sure that this is a unique name and is not repeated for other markers,video tutorial.
data-camera-position - the camera position where to tween when the marker is clicked, this is taken using the right-click mouse to copy to clipboard the position and than paste it here, don't forget to set the option to yes to have access to the right-click feature, video tutorial.
data-camera-show-tooltip-when-finished - this can be yes or no, shows the tooltip window related to the marker if defined, when the camera tween position is finished, video tutorial.
data-camera-position-animation-duration - a number that represents the tween camera position in seconds.
data-camera-position-animation-easing-type - this can be linear, easeout, easeinout and represents the camera tween position tween easing type.

Easy 3D Model Viewer can have a tooltip window associated with it, this tooltip window appears when the marker is hovered/active or when an animation and/or tween camera has finished. It has full support for HTML elements like video/audio and any HTML tag and it can be easily formatted using the global.css file that comes with this viewer, video tutorial.

To add a tootip window for the marker add a div with two attributes one is the data-tooltip = "" attrinute that is used by the viewer as a refference to parse the HTML markup and the other one is the data-max-width = "380" that represents the maximum viewer window width in px. This div must be added inside the marker HTML markup.

<div id="markers_data" style="display: none;">
	
		<div data-class = ""
			data-position = "x:0, y:0,, z:0,, nx:0,, ny:0, nz:0, meshName: none" ...> 

			<div data-tooltip = "" data-max-width = "380">
				<p>Add here your HTML content that appears in the tooltip window!</p>
			</div>		

	</div>

Marker info window

The info window works the same way as the tooltip window with the exception that it can have unlimited HTML content, if the content does not feet the info window a scrollbar will appear to scroll the content, also the info window is opened when clicking on the marker or when an animation and/or tween camera has finished, video tutorial.

To add a info window for the marker add a div with the attribute data-info = "" attrinute that is used by the viewer as a refference to parse the HTML markup. This div must be added inside the marker HTML markup.

<div id="markers_data" style="display: none;">
	
		<div data-class = ""
			data-position = "x:0, y:0,, z:0,, nx:0,, ny:0, nz:0, meshName: none" ...> 

			<div data-info = "">
				<p>Add here your HTML content that appears in the info window!</p>
			</div>		

	</div>

To open Easy 3D Model Viewer in a lightbox is done by setting the displayType:"lightbox", in the build folder there is a HTML file lightbox.html you can use this file as reference, video tutorial.

<script>
<!-- ... -->
displayType: 'lightbox',
<!-- ... -->
</script>

Settings

Easy 3D Model Viewer has many options that allows to customize its features. They are added directly in the viewer constructor as it can be seen in the installation section.

Example

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdemvInit();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdemvInit();
		});
	}

	function fwdemvInit(){
		
		new FWDEMV({

			// General settings.  
			instance: 'fwdemv0',
			texturesFolder: 'content/markers/',
			displayType: 'responsive',
			parentId: 'myDiv',
			maxWidth: 4000,
			startResizingWidth: 1000,
			maxHeight: 750,
			autoScale: 'yes',
				etc...
				
			})
		}
</script>

instance

Type: (String) - default: unset

The viewer instance name, this is used to call the API. In the examples files the instance name is set to fwdemv0, if you are using multiple viewers instances just change the instance to fwdemv1, fwdemv2, fwdemv3, etc...

displayType

Type: (String) - default: responsive

Viewer display type.

responsive - displays the viewer in responsive type based on the maxWidth and maxHeight settings.
afterparent - displays the viewer based on the parent element width and height.
lightbox - displays the viewer in lightbox mode.

parentId

Type: (String) - default: unset

The viewer holder/div ID, please make sure that this has an unique ID, it can be added anywhere in your page, this element will be the viewer parent.

maxWidth

Type: (Number) - default: 1000

The viewer maximum width in px.

startResizingWidth

Type: (Number) - default: 1000

Tthe pixel width threshold at which the viewer initiates automatic adjustments to the height in order to maintain the appropriate aspect ratio between width and height, this option only works if autoScale is set to yes.

maxHeight

Type: (Number) - default: 700

The viewer maximum height in px.

autoScale

Type: (String) - default: yes

This can be yes or no and applies if the displayType is reponsive. If set to yes this viewer height will always be proportional to the viewer width, if set to no the height will be fixed based on the maxHeight property.

initializeWhenVisible

Type: (String) - default: no

This can be yes or no, lazy scrolling/loading, the posibility to initialize EMV on scroll when the product is visible in the page, this way for example if the viewer is in a section of the page that is not visible it will not be initialized, instead EMV will be initalized only when the user is scrolling to that section in which EMV is added.

lightboxCloseButtonWidth

Type: (Number) - default: 30

The lightbox close button width in px.

lightboxCloseButtonHeight

Type: (Number) - default: 30

The lightbox close button height in px.

lightboxCloseButtonBackgroundNormalColor

Type: (String) - default: #7EC1AB

The lightbox close button background normal color, it can be HEX, RGB or RGBA.

lightboxCloseButtonBackgroundSelectedColor

Type: (String) - default: #FFFFFF

The lightbox close button background selected color, it can be HEX, RGB or RGBA.

lightboxCloseButtonIconNormalColor

Type: (String) - default: #FFFFFF

The lightbox close button icon normal color, it can be HEX, RGB or RGBA.

lightboxCloseButtonIconSelectedColor

Type: (String) - default: #10A0F1

The lightbox close button icon selected color, it can be HEX, RGB or RGBA.

lightboxBackgroundColor

Type: (String) - default: rgba(0, 0, 0, .7)

The lightbox main background color, it can be HEX, RGB or RGBA.

backgroundColor

Type: (String) - default: #FFFFFF

The viewer background color, it can be HEX, RGB or RGBA.

fullscreenBackgroundColor

Type: (String) - default: #FFFFFF

The viewer background color when it is in fullscreen mode, it can be HEX, RGB or RGBA.

preloaderText

Type: (String) - default: Loading 3D Model:

The viewer preloader text.

preloaderPosition

Type: (String) - default: center

The preloader position, this can be center, centertop, centerbottom, topleft, topright, bottomleft, bottomright.

preloaderOffsetX

Type: (Number) - default: 0

Move the preloader horizontally in px from its initial position.

preloaderOffsetY

Type: (Number) - default: 0

Move the preloader horizontally in px from its initial position.

showPreloaderProgressBar

Type: (String) - default: yes

This can be yes or no, show the preloader progress bar.

preloaderWidth

Type: (String) - default: 70%

A string from 0% to 100% when 100% is the maximum preloder width.

preloaderProgressBarBackgroundColor

Type: (String) - default: #8b859b

The preloader progress bar backgrond color, it can be HEX, RGB or RGBA.

preloaderProgressBarFillColor

Type: (String) - default: #bfbf06

The preloader progress bar fill color, it can be HEX, RGB or RGBA.

preloaderFontColor

Type: (String) - default: #000000

The preloader text color, it can be HEX, RGB or RGBA.

preloaderBackgroundColor

Type: (String) - default: rgba(255, 255, 255, .7)

The preloader main text background color, it can be HEX, RGB or RGBA.

showGridHelper

Type: (String) - default: yes

This can be yes or no, show thegrid helper.

modelWireframe

Type: (String) - default: yes

This can be yes or no, show the model with wireframe.

showSkeletonHelper

Type: (String) - default: yes

This can be yes or no, show skeleton helper if the model has a skeleton.

source

Type: (String) - default: unset

The model relative or absolute source, the supported formats are .gltf, .glb, glTF-Embedded and compressed DRACO, video tutorial.

posterSource

Type: (String) - default: unset

The preloader poster relative or absolute source, the supported formats are .png, .webp or .jpg, video tutorial.

animateModelOpacityOnIntro

Type: (String) - default: no

This can be yes or no, animate the viewer from opacity 0 to 1 as soon as the model is ready.

showModelInfoInTheConsole

Type: (String) - default: no

This can be yes or no, this shows data about the model in the console when the model is loaded an ready.

loadModelDelay

Type: (Number) - default: 0

The delay in seconds until the model starts to load.

buttons

Type: (String) - default: unset

This can be 'play, zoomin, zoomout, info, help, fullscreen', This option represents the buttons from the controls bar, they are separated by ",". The buttons are displayed in the order in which they are listed here so you can switch the order of the buttons by modifying the list order. If you don't need a button just remove it from the list, for example to display only the fullscreen and info buttons set this option like this: buttons:"info, fullscreen".

buttonsToolTips

Type: (String) - default: unset

This can be 'Play/Pause, Zoom in, Zoom out, Info, Help, Full screen/Normal screen'. This option represents the controls bar tooltips they are separated by ",". Each tooltip is related to a button so the order of tooltips must be the same with the order of buttons from the buttons option explained above, there are some buttons which requires two tootltip states like the fullscreen button, in this case the tooltip string is separated by "/" for example the fullscreen tooltip is formatted like this: "Full screen/Normal screen". If you don't want to use the tooltips leave this option blank like this: buttonsToolTips:''.

showButtonsLabels

Type: (String) - default: yes

This can be yes or no, show the buttons tooltip labels.

showBlockTouchButton

Type: (String) - default: yes

This can be yes or no, show the block touch input button when the viewer is running on a mobile device like Iphone.

blockTouchButtonSize

Type: (Number) - default: 40

The block touch input button width and height in px.

hideControllerDelay

Type: (Number) - default: 1

The delay in seconds until the controls buttons will hide after a period of inactivity

buttonSize

Type: (Number) - default: 30

The controls buttons width and height in px.

startAndEndButtonsHorizontalGap

Type: (Number) - default: 22

The controls buttons start and end horizontal gap in px.

startAndEndButtonsVerticalGap

Type: (Number) - default: 5

The controls buttons start and end vertical gap in px.

spaceBetweenButtons

Type: (Number) - default: 5

The controls buttons start and end vertical gap in px.

controllerOffsetY

Type: (Number) - default: 24

The controls buttons gap bettween the bottom part of the buttons controler and the viewer bottom part in px.

buttonsToolTipOffsetY

Type: (Number) - default: 10

The gap between the controls buttons and tooltip in px.

buttonsIconNormalColor

Type: (String) - default: #FFFFFF

The controls buttons icon normal color, it can be HEX, RGB or RGBA.

buttonsIconSelectedColor

Type: (String) - default: #d6d6d6

The controls buttons icon selected color, it can be HEX, RGB or RGBA.

buttonToolTipBackgroundColor

Type: (String) - default: #FF0000

The controls buttons tooltip background color, it can be HEX, RGB or RGBA.

controllerBackgrondColor

Type: (String) - default: rgba(0, 0, 0, 0.4)

The controls buttons background color, it can be HEX, RGB or RGBA.

enableOrbitalControls

Type: (String) - default: no

This can be yes or no, enable the orbital controls... zoom and pan.

zoomFactor

Type: (Number) - default: .1

A number from 0 to 1, where a higher value corresponds to increased zoom intensity or magnification when the model undergoes zooming.

zoomSpeed

Type: (Number) - default: .25

A number from 0 to 1, the zoom animation tween in seconds.

dampingFactor

Type: (Number) - default: .1

A number from 0 to 1, the pan damping inertia when the model is rotated.

autoRotate

Type: (String) - default: no

This can be yes or no, enable the orbital controls autorotation.

autoRotateSpeed

Type: (Number) - default: .25

A number from 0 to 100, the autorotation speed, the higher the number the faster the model will autorotate.

screenSpacePanning

Type: (String) - default: yes

This can be yes or no, defines how the camera's position is translated when panning. If yes, the camera pans in screen spacem otherwise, the camera pans in the plane orthogonal to the camera's up direction.

enablePan

Type: (String) - default: yes

This can be yes or no, enable right click pan or tap with two fingers on mobile pan.

enableZoom

Type: (String) - default: yes

This can be yes or no, enable zoom.

enableKeboardPan

Type: (String) - default: yes

This can be yes or no, enable keyboard pan.

keysType

Type: (String) - default: yes

This can be asdw or arrows, set the keys to pan.

panSpeed

Type: (Number) - default: 1

A number from 0 to 3, the right click pan speed factor.

keyPanSpeed

Type: (Number) - default: 1

A number from 0 to 3, the keyboard pan speed factor.

zoomMinDistance

Type: (Number) - default: 0.07

A number from 0 to 3, The minimum distance the camera can be from the target (orbit center) when using orbital controls, ensuring the camera does not get too close to the target during user interaction.

zoomMaxDistance

Type: (Number) - default: 1.5

>A number from 0 to 3, the maximum distance the camera can be from the target (orbit center) when using orbital controls, ensuring the camera does not get too close to the target during user interaction.

horizontalRotationMaxAngle

Type: (Number) - default: 0

A number from 0 to -180 angle in degree, restricts the maximum azimuthal rotation angle (horizontal rotation) of the camera when using controls, preventing it from exceeding a specified limit.

horizontalRotationMinAngle

Type: (Number) - default: 0

A number from 0 to 180 angle in degree, restricts the minimum azimuthal rotation angle (horizontal rotation) of the camera when using controls, preventing it from exceeding a specified limit.

verticalRotationMinAngle

Type: (Number) - default: 0

A number from 0 to 180 angle in degree, how far you can orbit vertically, lower limit.

verticalRotationMaxAngle

Type: (Number) - default: 0

A number from 0 to 180 angle in degree, how far you can orbit vertically, higher limit.

envMapSource

Type: (String) - default: unset

The environment map source, the supported format is .exr, it can be a relative or absolute path, please note that if you are using 4k, 8k, or higher quality this will affect performance if the model is high poly so always try to use the best quality possible based on your model.

envMapShowBackground

Type: (String) - default: no

This can be yes or no, enable the environment as a background.

backgroundBlurriness

Type: (Number) - default: 0

A number from 0 to 4, the environment map background blurriness.

envMapIntensity

Type: (Number) - default: 1

A number from 0 to 4, the environment map intensity.

showLights

Type: (String) - default: yes

This can be yes or no, enable the ambient and directional light.

toneMapping

Type: (String) - default: ACESFilmic

This can be ACESFilmic, Linear, Reinhard and Cineon, adjusts the color and brightness of rendered scenes to achieve desired visual effects or realistic representations, it involves mapping pixel values to a different range to control the overall tone and appearance of the rendered image.

toneMappingExposure

Type: (Number) - default: 0

A number from -10 to 10, the toneMapping exposure.

ambientIntensity

Type: (Number) - default: 0

A number from 0 to 4, the ambient light intensity.

ambientColor

Type: (String) - default: #FFFFFF

The ambient color, it can be HEX, RGB.

directionalLightIntensity

Type: (Number) - default: 1

A number from 0 to 4, the directionl light intensity.

directionalLightColor

Type: (String) - default: #FFFFFF

The directionl color, it can be HEX, RGB.

directionalLightX

Type: (Number) - default: 0.5

A number, the directionl light x position.

directionalLightY

Type: (Number) - default: 0

A number, the directionl light y position.

directionalLightZ

Type: (Number) - default: 0.866

A number, the directionl light z position.

defaultAnimationName

Type: (String) - default: unset

The default animation name that will play as soon as the model is ready, video tutorial.

defaultAnimationPlayDelay

Type: (Number) - default: 0.1

The default animation start playing delay in seconds.

defaultAnimationRepeatCount

Type: (Number) - default: 1

How many times an animation will loop.

showMarkersWhileDefaultAnimationIsPlaying

Type: (String) - default: yes

This can be yes or no, enable the markers to move with the model or remain in the original position.

defaultAnimationClampWhenFinished

Type: (String) - default: no

This can be yes or no, stop the animation at the last frame when it has finished playing.

defaultAnimationCrossFadeDuration

Type: (Number) - default: .5

The duration of the crossfade transition between the default animation and an animation played with a marker.

timeScale

Type: (Number) - default: 1

The playback animation speed, 1 is normal speed, 2 is 200% speed , 3 is 300% speed, etc...

defaultAnimationCameraPosition

Type: (String) - default: unset

The position to where to tween the camera when the animation is strting, video tutorial.

defaultAnimationCameraPositionDuration

Type: (Number) - default: 1.2

The duration in seconds for the default cameara position tween.

defaultAnimationCameraPositionEasingType

Type: (String) - default: linear

The default cameara position tween easeing, this can be linear, easeout, easeinout.

markersData

Type: (String) - default: unset

A string that represents the id of the markers div HTML markup, video tutorial.

showMarkerTool

Type: (String) - default: no

This can be yes or no, enable the built in tool to copy to clipboard the marker position on the model with left click and camera position with right click.

markerShowAndHideAnimationType

Type: (String) - default: scale

This can be scale or opacity, the hide and show animation type.

showMarkersAfterTime

Type: (Number) - default: 2

The delay in seconds until the markers are showed after the model is ready.

markerToolTipOffsetY

Type: (Number) - default: 10

The markers tooltip window vertical offset in px.

markerPolygonOffsetAlpha

Type: (Number) - default: .1

A number from 0 to 1, if the markers are 3D type, this option will set the opacity of the non-visible part of the marker, video tutorial.

markerToolTipAndWindowBackgroundColor

Type: (String) - default: #FFFFFF

The tooltip window background color, it can be HEX, RGB or RGBA.

markerPositionCopiedText

Type: (String) - default: Marker position copied to colipboard!

When using the marker tool and left clicking on the model to get the marker position this text will appear on the screen.

cameraPositionCopiedText

Type: (String) - default: Camera position copied to colipboard!

When using the marker tool and right clicking on viewer viewport to get the cameara position this text will appear on the screen.

cameraPositionCopiedText

Type: (String) - default: Please disable the model animation to add markers!

When using the marker tool if an animation is running this message will appear.

showCameraPositionsSelectMenu

Type: (String) - default: no

This can be yes or no, show the camera position select menu, example here

cameraPostionsSelectMenuDefaultText

Type: (String) - default: Plane Details

The default camera position select menu text.

cameraPostitionSelectMenuMaxWidth

Type: (Number) - default: 240

The default camera position select menu maximum width in px.

cameraPostitionSelectMenuHeight

Type: (Number) - default: 240

The default camera position select menu height in px.

cameraPostitionSelectMenuStartAndEndGap

Type: (Number) - default: 14

The default camera position select menu start and end gap in px.

cameraPostitionSelectMenuButtonSize

Type: (Number) - default: 30

The default camera position select menu next and prev buttons size in px.

cameraPostionsSelectMenuBackgroundColor

Type: (String) - default: rgba(0, 0, 0, 0.40)

The default camera position select menu background color, HEX, RGB or RGBA.

cameraPostionsSelectMenuTextColor

Type: (String) - default: #FFFFFF

The default camera position select menu text color, HEX, RGB or RGBA.

cameraPositionsNextButtonTooltip

Type: (String) - default: unset

The default camera position select menu next button tooltip text.

cameraPositionsPrevButtonTooltip

Type: (String) - default: unset

The default camera position select menu prev button tooltip text.

cameraPostionsSelectMenuButtonNormalColor

Type: (String) - default: #d6d6d6

The default camera position select menu next and prev button icon normal color, HEX, RGB or RGBA.

cameraPostionsSelectMenuButtonSelectedColor

Type: (String) - default: #FFFFFF

The default camera position select menu next and prev button icon selected color, HEX, RGB or RGBA.

cameraPositionsSelectItemsMaxWidth

Type: (Number) - default: 350

The default camera position select menu items max width in px.

cameraPositionsSelectItemHeight

Type: (Number) - default: 24

The default camera position select menu items height in px.

cameraPositionsSelectItemStartLeftGap

Type: (Number) - default: 6

The default camera position select menu items start left gap px.

cameraPositionsSelectItemStartRightGap

Type: (Number) - default: 30

The default camera position select menu items start right gap px.

cameraPositionsSelectItemVerticalGap

Type: (Number) - default: 16

The default camera position select menu items vertical gap px.

cameraPositionsSelectSpaceBetweenItems

Type: (Number) - default: 16

The default camera position select menu space between items px.

cameraPositionsSelectMaxItems

Type: (Number) - default: 4

The default camera position select menu total items to show.

cameraPositionsSelectItemBackgroundColor

Type: (String) - default: rgba(0, 0, 0, .6)

The default camera position select menu items background color, HEX, RGB or RGBA.

cameraPositionsSelectItemsScrollBarTrackColor

Type: (String) - default: #D9D9D9

The default camera position select menu items scrollbar backgrond color, HEX, RGB or RGBA.

cameraPositionsSelectItemsScrollBarHandlerNormalColor

Type: (String) - default: #767676

The default camera position select menu items scrollbar handler normal color, HEX, RGB or RGBA.

cameraPositionsSelectItemsScrollBarHandlerSelectedColor

Type: (String) - default: #FFFFFF

The default camera position select menu items scrollbar handler selected color, HEX, RGB or RGBA.

cameraPositionsSelectItemNormalColor

Type: (String) - default: #D9D9D9

The default camera position select menu items text normal color, HEX, RGB or RGBA.

cameraPositionsSelectItemSelectedColor

Type: (String) - default: #FFFFFF

The default camera position select menu items text selected color, HEX, RGB or RGBA.

infoWindowData

Type: (String) - default: unset

This id for the info window that contains the HTML markup, video tutorial.

infoWindowWidth

Type: (Number) - default: 920

The info window maximum width in px.

infoWindowMainBackgroundColor

Type: (String) - default: rgba(255, 255, 255, .7)

The info window background color, HEX, RBG and RGBA.

closeButtonSize

Type: (Number) - default: 24

The info window close button size width/height in px.

closeButtonBackgroundNormalColor

Type: (String) - default: #8b859b

The info window close button normal background color, HEX, RGB or RGBA.

closeButtonBackgroundSelectedColor

Type: (String) - default: #FFFFFF

The info window close button selected background color, HEX, RGB or RGBA.

infoWindowBackgroundColor

Type: (String) - default: #FFFFFF

The info window backgrond color, HEX, RGB or RGBA.

infoWindowScrollBarColor

Type: (String) - default: #8b859b

The info window scrollbar color, HEX, RGB or RGBA.

helpScreenText

Type: (String) - default: Help

The help screen header text.

mouseRotateAndZoomText

Type: (String) - default: Rotate And Zoom

The help screen mouse and rotate text.

mouseRotateAndZoomInfo

Type: (String) - default: Use the left mouse click to rotate and mousewheel to zoom.

The help screen mouse and rotate info.

mousePanText

Type: (String) - default: Pan With Mouse

The help screen mouse and pan text.

mousePanInfo

Type: (String) - default: Use the right click mouse button to pan.

The help screen mouse and pan info.

keyboardPanText

Type: (String) - default: Pan With Keyboard

The help screen keyboard pan text.

keyboardPanInfo

Type: (String) - default: Use the the W A S D keyboard keys to pan.

The help screen keyboard pan info.

touchRotateText

Type: (String) - default: Rotate

The help screen touch rotation text.

touchRotateInfo

Type: (String) - default: Use one finger to rotate.

The help screen touch rotation info.

touchPanText

Type: (String) - default: Pan

The help screen touch pan text.

touchPanInfo

Type: (String) - default: Use two fingers to pan.

The help screen touch pan info.

helpScreenIconColor

Type: (String) - default: #10A0F1

The help screen icon text color.

showGUI

Type: (String) - default: no

This can be yes or no, enable the GUI live settings, this feature is not available on mobile devices.

closeGUIWhenNotHit

Type: (String) - default: no

This can be yes or no, enable to close the GUI live features when the mouse is clicked outside it.

modelScaleOffsetMin

Type: (Number) - default: 0

The minimum value for the GUI model scale offset.

modelScaleOffsetMax

Type: (Number) - default: 1

The maximum value for the GUI model scale offset.

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.

// API.
let fwdemvAPI = setInterval(() =>{
if(window['fwdemv0']){
	console.log('EMV API ready')
	clearInterval(fwdemvAPI);

	// Register the START_TO_LOAD event.
	fwdemv0.addEventListener(FWDEMV.START_TO_LOAD, onStartToLoad);
}
}, 100);

// Listen for the START_TO_LOAD event.
function onStartToLoad(e){
	console.log(e)
}

FWDEMV.NORMAL_SCREEN

Dispatched when the viewer goes to normal screen.

FWDEMV.FULL_SCREEN

Dispatched when the viewer goes in full screen.

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

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

Dispatched when the model is starting to load.

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

Dispatched when the model loading is complete.

FWDEMV.AUTOROTATE_PLAY

Dispatched when the model auto-rotation starts.

FWDEMV.AUTOROTATE_PAUSE

Dispatched when the model auto-rotation is paused.

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

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

FWDEMV.ERROR

Dispatched when a loading error occurs.

JavaScript Documentation

Getting Started

Installation

Add your own model

Add a poster

Using an environment map

Working with the default animation

Setup Info Window

Working with markers

Marker tooltip window

Marker info window

Open in lightbox

Settings

Example

instance

displayType

parentId

maxWidth

startResizingWidth

maxHeight

autoScale

initializeWhenVisible

lightboxCloseButtonWidth

lightboxCloseButtonHeight

lightboxCloseButtonBackgroundNormalColor

lightboxCloseButtonBackgroundSelectedColor

lightboxCloseButtonIconNormalColor

lightboxCloseButtonIconSelectedColor

lightboxBackgroundColor

backgroundColor

fullscreenBackgroundColor

preloaderText

preloaderPosition

preloaderOffsetX

preloaderOffsetY

showPreloaderProgressBar

preloaderWidth

preloaderProgressBarBackgroundColor

preloaderProgressBarFillColor

preloaderFontColor

preloaderBackgroundColor

showGridHelper

modelWireframe

showSkeletonHelper

source

posterSource

animateModelOpacityOnIntro

showModelInfoInTheConsole

loadModelDelay

buttons

buttonsToolTips

showButtonsLabels

showBlockTouchButton

blockTouchButtonSize

hideControllerDelay

buttonSize

startAndEndButtonsHorizontalGap

startAndEndButtonsVerticalGap

spaceBetweenButtons

controllerOffsetY

buttonsToolTipOffsetY

buttonsIconNormalColor

buttonsIconSelectedColor

buttonToolTipBackgroundColor

controllerBackgrondColor

enableOrbitalControls

zoomFactor

zoomSpeed

dampingFactor

autoRotate

autoRotateSpeed

screenSpacePanning

enablePan

enableZoom

enableKeboardPan

keysType

panSpeed

keyPanSpeed

zoomMinDistance

zoomMaxDistance