Thank you for your purchase! If you need help, mail me to melnik909@ya.ru.

File structure

When you unpack archive, you'll see next structure:

							
viewy/
│ 
├──core/
│  │  ├──css
│  │  │  ├──helpers/
│  │  │  ├──configurator/
│  │  │  │  ├──viewy_configurator.less
│  │  │  │  ├──viewy_configurator_elements.less
│  │  │  │  ├──viewy_configurator_form.less
│  │  │  │  ├──viewy_configurator_help.less
│  │  │  │  ├──viewy_configurator_param_color.less
│  │  │  │  ├──viewy_configurator_skin.less
│  │  │  ├──viewy_preloader.less
│  │  │  ├──not_support_webgl_animation.less
│  │  ├──icons
│  │  ├──js
│  │  │  ├──three.min.js
│  │  │  ├──viewy.js
│  │  │  ├──viewy_configurator.js
├──demo/
│  ├──css
│  │  ├──viewy_status.less
├─doc/
├─examples/
├─models/
		
							
						
  • css/helpers/ - folder of helping mixins for crossbrowser supporting of 'transform', 'animation', 'flexbox', 'transition'
  • viewy_configurator.less - file with main css styles for correct work of configurator.
  • viewy_configurator_elements.less - file with css for form elemets with configurator options
  • viewy_configurator_form.less - file with css for form with configurator options
  • viewy_configurator_help.less - file with css for popup tooltip
  • viewy_configurator_param_color.less - file with css for choosing color
  • viewy_configurator_skin.less - file with css for exterior layout of configurator. It's unnecessary file, but you'll need it, if exterior layout is required.
  • viewy_preloader.less - css for animation of preloading
  • not_support_webgl_animation.less - css file with animation, when browser is't support WebGl
  • three.min.js - ThreeJS library for working with WebGl
  • viewy.js - viewy plugin
  • viewy_configurator.js - configurator for displaying models
  • demo/ - folder of styles for examples
  • viewy_status.less - css file with examples of using plugin statuses
  • examples/ - examples

Initialization of plugin

Step 1

Attach viewy_preloader.css, not_support_webgl_animation.css and viewy_status.css(optional) in /head, like it's showed here:

						
<head>
<link rel="stylesheet" href="../demo/css/viewy_status.css">
</head>
						
					

Step 2

Attach three.min.js and viewy.js before /body, like it's showed here:

						
 <script src="../core/js/three.min.js"></script>						
 <script src="../core/js/viewy.js"></script>	
</body>
</html>
						
					

Step 3

Create block, in which will be displaying model, and set 'id'. For example:

						
<div id="viewport"></div>						
						
					

Step 4

Initialize plugin after already attached three.min.js and viewy.js. For example:

						
(function(){
 viewy.init({
  renderElement: document.body.querySelector("#viewport"),
  canvasW: 500,
  canvasH: 150,
  cameraX: 100,
  cameraZ: 180,
  basePath:  '../models/iphone6/iphone-gold/',
  fileOBJ: 'iphone.obj',
  fileMTL: 'iphone.mtl',
 });
})();						
						
					

Preloader

Copy and past this markup.

						
<div id="viewy-preloader_js" class="viewy-preloader">
 <div class="viewy-preloader__element">Loading</div>
</div>						
						
					

Attach viewy_preloader.css in /head, like it's showed here:

						
<head>
<link rel="stylesheet" href="../core/css/viewy_preloader.css">
</head>
						
					

Update a initialization code(step 4), like it's showed here:

						
(function(){

 var preloader = document.querySelector("#viewy-preloader_js");

 viewy.init({
  renderElement: document.body.querySelector("#viewport"),
  canvasW: 500,
  canvasH: 150,
  cameraX: 100,
  cameraZ: 180,
  basePath:  '../models/iphone6/iphone-gold/',
  fileOBJ: 'iphone.obj',
  fileMTL: 'iphone.mtl',
  successLoadCallback: function(){

   preloader.style.display = "none";

  },
   errorWebGLCallback: function(){
		
    preloader.style.display = "none";
    document.body.classList.add("viewy-no-support-webgl");
		
   }
 });
})();						
						
					

Animation "Your browser don't support WebGL"

						
<div class="demo-box demo-smile">
 <div class="sad-smile">
  <div class="sad-smile_eyes sad-smile_lefteye"><div class="tear"></div></div>
  <div class="sad-smile_eyes sad-smile_righteye"><div class="tear"></div></div>
  <div class="sad-smile_mouth"></div>
 </div>
 <span class="demo-label">Sorry, your browser don't support WebGL</span>
</div>					
						
					

Attach not_support_webgl_animation.css in /head, like it's showed here:

						
<head>
<link rel="stylesheet" href="../core/css/not_support_webgl_animation.css">
</head>
						
					

Examples

Full-screen and adaptive initialization

						
(function(){

 var preloader = document.querySelector("#viewy-preloader_js");

 viewy.init({
  renderElement: document.body.querySelector("#viewport"),
  fullscreen: true,
  responsive: true,
  cameraX: 100,
  cameraZ: 180,
  basePath:  '../models/iphone6/iphone-gold/',
  fileOBJ: 'iphone.obj',
  fileMTL: 'iphone.mtl',
  successLoadCallback: function(){

   preloader.style.display = "none";

  },
   errorWebGLCallback: function(){
		
    preloader.style.display = "none";
    document.body.classList.add("viewy-no-support-webgl");
		
   }
 });
})();						
						
					

Result you can see here

Static version

						
(function(){

 var preloader = document.querySelector("#viewy-preloader_js");

 viewy.init({

   renderElement: document.body.querySelector("#viewport"),
   fullscreen: true,
   responsive: true,
   rotateModel: false,
   zoomModel: false,
   cameraX: 100,
   cameraZ: 180,
   basePath:  '../models/iphone6/iphone-gold/',
   fileOBJ: 'iphone.obj',
   fileMTL: 'iphone.mtl',
   successLoadCallback: function(){

    preloader.style.display = "none";
	
   },
   errorWebGLCallback: function(){
		
    preloader.style.display = "none";
    document.body.classList.add("viewy-no-support-webgl");
		
   }
	
 });
})();						
						
					

Result you can see here

Version with fixed sizes

						
(function(){

 var preloader = document.querySelector("#viewy-preloader_js");

 viewy.init({
  renderElement: document.body.querySelector("#viewport"),
  canvasW: 500,
  canvasH: 150,
  cameraX: 100,
  cameraZ: 180,
  basePath:  '../models/iphone6/iphone-gold/',
  fileOBJ: 'iphone.obj',
  fileMTL: 'iphone.mtl',
  colorRender: 0xffffff,
  successLoadCallback: function(){

   preloader.style.display = "none";

  },
  errorWebGLCallback: function(){

   preloader.style.display = "none";
   document.body.classList.add("viewy-no-support-webgl");

  }

 });
	
})();						
						
					

Result you can see here

Settings

Name of option Description
renderElement Element of DOM tree, in which will be display loaded model. In option need to send 'id' of element. Don't have any value by default. Necessary parameter.
canvasW Width of the scene, where model will be displayed. The value is specified in pixels. For example - 100. The data type is number. Don't have any value by default.
canvasH Height of the scene, where model will be displayed. The value is specified in pixels. For example - 100. The data type is number. Don't have any value by default.
cameraX Coordinate of the camera along the X-axis. The value is specified in pixels. For example - 100. The data type is number. By default - 0.
cameraY Coordinate of the camera along the Y-axis. The value is specified in pixels. For example - 100. The data type is number. By default - 0.
cameraZ Coordinate of the camera along the Z-axis. The value is specified in pixels. For example - 100. The data type is number. By default - 0.
directionalLightColor Light source color. The value is specified in hexadecimal format. For example - 0xf0f0f0. The data type is number. By default - 0xf0f0f0
directionalLighX Coordinate of the Light source along the X-axis. The value is specified in pixels. The data type is number. For example - 1. By default - 0.
directionalLighY Coordinate of the Light source along the Y-axis. The value is specified in pixels. The data type is number. For example - 1. By default - 1.
directionalLighZ Coordinate of the Light source along the Z-axis. The value is specified in pixels. The data type is number. For example - 1. By default - 0.
colorRender The color of the scene. The value is specified in hexadecimal format. For example - 0xf0f0f0. The data type is number. By default - 0xf0f0f0
basePath The relative path to the folder. For example, models/iphone6/iphone-silver/. The data type is string. Don't have any value by default. Necessary parameter.
fileOBJ The OBJ file name. For example, iphone.obj. The data type is string. Don't have any value by default. Necessary parameter.
fileMTL The MTL file name. For example, iphone.mtl. The data type is string. Don't have any value by default. Necessary parameter.
objectX The model coordinate along the X-axis. The value is specified in pixels. For example - 100. The data type is number. By default - 0.
objectY The model coordinate along the Y-axis. The value is specified in pixels. For example - 100. The data type is number. By default - 0.
objectZ The model coordinate along the Z-axis. The value is specified in pixels. For example - 100. The data type is number. By default - 0.
fullscreen Flag, which allow display scene on whole viewport. Have two values - true or false. The data type is boolean or string. For example, true or 'true'. By default - false.
responsive Flag, which allow adaptation for renderElemt sizes. Have two values - true or false. The data type is boolean or string. For example, true or 'true'. By default - false.
rotateModel Flag, which allow rotation of model. If flag is true, then enabled the turn model using the keyboard and mouse. Have two values - true or false. The data type is boolean or string. For example, true or 'true'. By default - true.
zoomModel Flag, which allow zooming to model. If flag is true, then enabled zooming to model using the keyboard and mouse. Have two values - true or false. The data type is boolean or string. For example, true or 'true'. By default - true.
msgError Error message, if checking shows inability of browser to support WebGL. By default - "Sorry, your browser did't support WebGl"
msgLoadError Message about error, when you load the model. By default - "Sorry, failed to load model".
successLoadCallback Function which starts after successful loading. For example, successLoadCallback: function(){ alert("Done")}
progressLoadCallback Function which starts while loading. For example, progressLoadCallback: function(){ console.log("Done")}
errorLoadCallback Function which starts when model is not loaded. By default - function(){alert(defaults.msgLoadError);}
errorWebGLCallback Function which starts when browser is not support WebGL. By default - function(){alert(defaults.msgError);}

Methods

Name of the method Description
loadModel(basePath, fileOBJ, fileMTL) Method for loading the model. First argument takes a path to folder, second - OBJ file name, third - MTL file name.
destroyModel() Method for deleting the model from scene.
destroyScene() Method for deleting the scene

Statuses

You can use statuses, which returns the plugin. Status - it is CSS class, which added for tag 'body'. List of statuses:

Name of status Description
.viewy-support-webgl Status is added, when plugin defines, that supporting WebGL is available.
.viewy-no-support-webgl Status is added, when plugin defines, that supporting WebGL is not available.
.viewy-model-ready Status is added, when plugin defines, that browser loaded the model
.viewy-model-error Status is added, when plugin defines, that browser did not loaded the model

Configurator

To create a configurator you can use layout from the file configurator.html. Also you can use your own, but necessary to save next elements:

  • #viewy-form-options_js - Form of choosing the model.
  • .viewy-params_js - model parameters
  • .viewy-form-options__button_js - button for starting displaying the model
  • #viewy-viewport_js - scene for displaying the model
  • #viewy-configurator__preloader_js - preleader for configurator

Attaching CSS and JS files

Attach file viewy_configurator.css in section head, like it's showed here:

						
<head>					
 <link rel="stylesheet" href="../core/css/configurator/viewy_configurator.css"/>
</head>	 
						
					

Attach file viewy-configurator.js before /body, like it's showed here:

						
<script src="../core/js/viewy-configurator.js"></script>						
						
					

The path to the file is specified for a standard file structure. You can have another values.

After these steps, your configurator will be loaded. It's necessary to remember, that size of scene always will be same like size of #viewport. So, if you need to change scene size, then you must change #viewport size.