// Create new instance of simulator on DIV yourDIV_id. Minimum code to run

var simulator=new API3DMAPPWEB.Simulator('yourDIV_id',{token:"kRY5ehcnrudmuEadKjRLEwFIxkYGjyQdaHobhytTgCkRq"});

// token= kRY5ehcnrudmuEadKjRLEwFIxkYGjyQdaHobhytTgCkRq is for demo test. For production you need to get your own token from 3dmapp Admin

Methods

inner addAmbientLight(params)

• Add Ambient Light

Parameters:

Name	Type	Description
params		a container with parameters. If params is null, will use default values Properties Name Type Description color hex Set light's color intensity number Set light's intensity

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var params={
      color:"0x598CA6",
      intensity:1.0,
  }
  simulator.addAmbientLight(params);
}

inner addDirectionalLight(params)

• Add Directional Light. If params is null, will use default values

Parameters:

Name	Type	Description
params		a container with parameters. Properties Name Type Description color hex Set light's color intensity number Set light's intensity position object Set position of light Properties Name Type Description x number the x value of the vector. Default is 0. y number the y value of the vector. Default is 0. z number the z value of the vector. Default is 0. shadow object Shadow Item Properties Name Type Description cast boolean if true, light cast shadows . Default is true. width number Default 1024 height number Default 1024 camera object Define Camera settings for this light ortho object Default 300 near object Default 0.1 far object Default 1000

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var params={
      color:0xffffff,
      intensity:1.8,
      position:{x:0.5,y:1,z:0.35}
      shadow:{cast:true,width:1024,height:1024},
      camera:{ortho:300, near:0.1,far:1000}
  }
  simulator.addDirectionalLight(params);
}

inner addGround(params)

• Add Ground

Parameters:

Name	Type	Description
params		a container with parameters.. If params is null, will use default values Properties Name Type Description width number height number material object Properties Name Type Description color hex roughness number How rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse. Default is 0.5. metalness number How much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, with nothing (usually) in between. Default is 0.5. A value between 0.0 and 1.0 could be used for a rusty metal look shadow object Properties Name Type Description cast boolean Plane will receive shadows from scene's objects.Default is true

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var params={
      width:10000,
      height:10000,
      material:{color:0xffffff,roughness:0,metalness:0}
      shadow:{cast:true}
  }
  simulator.addGround(params);
}

inner addHemisphereLight(params)

• Add Hemisphere Light

Parameters:

Name	Type	Description
params		a container with parameters. If params is null, will use default values Properties Name Type Description color hex Set top light color groundColor hex Set ground light Color intensity number Set light's intensity position object Set position of light Properties Name Type Description x number The x value of the vector. Default is 0. y number The y value of the vector. Default is 0. z number The z value of the vector. Default is 0.

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var params={
      color:"0x598CA6",
      groundColor:0x243842,
      intensity:1.0,
      position:{x:0.0,y:10,z:0}
  }
  simulator.addHemisphereLight(params);
}

inner addPointLight(params)

• Add Point Light

Parameters:

Name	Type	Description
params		a container with parameters. If params is null, will use default values Properties Name Type Description color hex Set light's color intensity number Set light's intensity position object Set position of light Properties Name Type Description x number The x value of the vector. Default is 0. y number The y value of the vector. Default is 0. z number The z value of the vector. Default is 0. shadow object Scale v texture Coordenates Properties Name Type Description cast boolean if true, light cast shadows width number default 1024 height number default 1024 // simulator is an instance of API3DMAPPWEB.Simulator if(simulator!=null) { var params={ color:0xffffff, intensity:1.0, } simulator.addPointLight(params); }

inner addRealisticLights(items-)

• Add RealisticLights

Parameters:

Name	Type	Description
items-	array	Default null :Add Fog, Sky, hemisphere, directional light
items.item	object	Represent Fog, Sky, hemisphere, Directional Lihgt,Point Light,AmbientLight. See values on function addFog, addSky, etc.. Properties Name Type Description type string Define type of light: Fog,Sky,HemisphereLight,DirectionalLight,PointLight,AmbientLight. See each addXXXX Function to undestand parameters for each type

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var sky={type:"Sky",topColor:0xffffff,bottomColor:0xdedede,offset:33,exponent:0.6,geometry:{radius:6000,width:32,height:15}shadow:{cast:true}};
  var fog={type:"Fog",color:0xffffff,near:1,far:4000 };
  var items=[sky,fog];
  simulator.addRealisticLights(items);
  
}

inner AddSky(params)

• Add Sky.

Parameters:

Name	Type	Description
params		a container with parameters. If params is null, will use default values Properties Name Type Description topColor hex bottomColor hex offset number exponent number geometry object Properties Name Type Description radius number width number height number

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var params={
      topColor:0xffffff,
      bottomColor:0xdedede,
      offset:33,
      exponent:0.6,
      geometry:{radius:6000,width:32,height:15}
      shadow:{cast:true}
  }
  simulator.AddSky(params);
}

inner autoRotacion(value)

• Set to true to automatically rotate around the target.

Parameters:

Name	Type	Description
value	boolean

inner createMaterial(params, callback) → {Material3D}

• Create material

Parameters:

Name	Type	Description
params	object	params to define a material Properties Name Type Description file string the path or URL to the file for diffuse normalFile object the path or URL to the file for normalMapping sizeX number Width in mm of texture sizeY number Height in mm of texture roughness number How rough the material appears.0.0 means diffuse , 1.0 means a smooth mirror reflection. metalness number How much the material is like a metal. o means non metallic, 1.0 means metallic. A value between 0.0 and 1.0 could be used. color hex Material Color enviroment boolean if true, material reflects enviroment
callback	function	Return material instance after textures are loaded correctly

Returns:

Material3D -

Return material instance

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
    var mat=simulator.createMaterial({file:"textures/1415.jpg",sizeX:300,sizeY:300,roughness:0.6,specularColor:"#424242",enviroment:true},function(mat)
    {
    	// mat has all textures loaded
	  });
}

inner deleteObject(id)

• Delete Object

Parameters:

Name	Type	Description
id	string	Object ID.

Example

// simulator is an instance of API3DMAPPWEB.Simulator

window.addEventListener("API3DMAPPWEB_Click", onClickObject);

if(simulator!=null)
{	
   // Delete Object when user click on it
   function onClickObject(event)
   {
      var objMouseOver=simulator.getObjectMouseOver();
      if(objMouseOver)
      {
         simulator.deleteObject(objMouseOver);
      }
   }
}

inner generaCube(urls, callback)

• Creates a cube texture made up of six images.

Parameters:

Name	Type	Description
urls	array	array of 6 urls to images, one for each side of the CubeTexture. The urls should be specified in the following order: pos-x, neg-x, pos-y, neg-y, pos-z, neg-z
callback	function	Will be called when load completes

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var urls = [
      'px.jpg', 'nx.jpg',
      'py.jpg', 'ny.jpg',
      'pz.jpg', 'nz.jpg',
  ];    
  simulator.generaCube(urls);
}

inner getCamaraPosition(x, y, z, targetincluded)

• Move camera position

Parameters:

Name	Type	Description
x	number	the x value of the vector.
y	number	the y value of the vector.
z	number	the z value of the vector.
targetincluded	boolean	if true, move target camera too

inner getCameraFilters() → {json|object|string|object}

• Get array of Camera effects.

Returns:

• json -

  list -

• object -

  list.item - Contains effect values

• string -

  list.item.name - name of effect. Can be :Ssao,Vignette,Bloom,Fxaa,ToneMapping,Focus

• object -

  list.item.params - Contains effets values

inner getJsonEffects() → {string}

• Get json format of Camera effects.

Returns:

string -

json format of camera effects list.

inner getJsonLights() → {string}

• Get json data from Lights

Returns:

string -

• Json data from all lights on scene

inner getJsonScene() → {string}

• Get json data from scene

Returns:

string -

• Json data from all objects in scene. include texture information

inner getLights() → {array}

• Get Lights information

Returns:

array -

• Array of items values on JSon format

inner getMaterialGroupName(id) → {object|string|number|string|string}

• Get Material instance of Group if the object is joined. if not return material object

Parameters:

Name	Type	Description
id	string	Object ID.

Returns:

• object -

  item - json values that represent a material

• string -

  item.name - material name

• number -

  item.rougness - How rough the material appears.0.0 means diffuse , 1.0 means a smooth mirror reflection.

• string -

  item.metalness - How much the material is like a metal. o means non metallic, 1.0 means metallic. A value between 0.0 and 1.0 could be used.

• string -

  item.color - Color of the material.

inner GetMaterialObjectName(id) → {object|string|number|string|string}

• Get Material instance from Object name

Parameters:

Name	Type	Description
id	string	Object ID.

Returns:

• object -

  item - json values that represent a material of object, independent if this object is joined to a group.

• string -

  item.name - material name

• number -

  item.rougness - How rough the material appears.0.0 means diffuse , 1.0 means a smooth mirror reflection.

• string -

  item.metalness - How much the material is like a metal. o means non metallic, 1.0 means metallic. A value between 0.0 and 1.0 could be used.

• string -

  item.color - Color of the material.

inner getObjectMouseOver() → {string}

• Get ID from object that are below mousepointer.

Returns:

string -

ID object

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
   var objMouseOver=simulator.getObjectMouseOver();
   if(objMouseOver)
   {

   }
}

inner getScreenShot()

• Get ScreenShot of view

inner getScreenShotCentered()

• Center scene on view and Get ScreenShot

inner getSky() → {params}

• Get Sky

Returns:

params

inner initPostProcessing(list)

• Add Camera effects.

Parameters:

Name	Type	Description
list	array	Properties Name Type Description item object Contains effect values Properties Name Type Description name string name of effect. Can be :Ssao,Vignette,Bloom,Fxaa,ToneMapping,Focus params object Contains effets values

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var efectoVignette={name:"Vignette",params:[{name:"enable",caption:"Enable",value: 1,min:0,max:1,step:1},{name:"offset",caption:"Offset",value: 1,min:0,max:10,step:0.1},{name:"darkness",caption:"Darkness",value: 1,min:0,max:1,step:0.1}]};
  var efectoBloom={name:"Bloom",params:[{name:"enable",caption:"Enable",value: 1,min:0,max:1,step:1},{name:"threshold",caption:"Threshold",value: 0.95,min:0,max:1,step:0.1},{name:"strength",caption:"Strength",value: 0.26,min:0,max:1,step:0.1},{name:"radius",caption:"Radious",value: 0.06,min:0,max:1,step:0.1}]};
  var efectoFXAA={name:"Fxaa",params:[{name:"enable",caption:"Enable",value: 1,min:0,max:1,step:1}]};    
  var efectoToneMapping={name:"ToneMapping",params:[{name:"enable",caption:"Enable",value: 1,min:0,max:1,step:1},{name:"toneMappingExposure",caption:"Exposure",value: 3,min:1,max:10,step:0.1},{name:"toneMappingWhitePoint",caption:"W.Point",value: 5.7,min:1,max:10,step:0.1}]};
  var efectobokeh={name:"Focus",params:[{name:"enable",caption:"Enable",value: 0,min:0,max:1,step:1},{name:"focus",caption:"Focus",value: 0,min:0,max:3000,step:0.1},{name:"aperture",caption:"Aperture",coef:0.00001,value: 2,min:0,max:10,step:0.1},{name:"maxblur",caption:"MaxBlur",value: 0.01,min:0,max:1,step:0.001}]};
  effects=[efectoVignette,efectoBloom,efectoFXAA,efectoToneMapping,efectobokeh];     
  simulator.initPostProcessing(effects);
}

inner isFullMapped() → {boolean}

• Check if all objects are mapped by texture.

Returns:

boolean -

return true if all objects from scene are mapped, if not false.

inner isObjectTexturizable(id) → {boolean}

• Check if object accept mapping function

Parameters:

Name	Type	Description
id		Object ID

Returns:

boolean

inner joinUnJoin(id)

• Create groups of objects that share same material. Use same function with a joined object to unjoin.

Parameters:

Name	Type	Description
id		Object ID

inner limitCameraOrbitVertical(min, max)

• Define limits orbit vertically by degrees

Parameters:

Name	Type	Description
min	number	How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.
max	number	How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.

inner loadFromJson(json)

• Load an stire scene from json data.

Parameters:

Name	Type	Description
json	string	Json data that contains all scene information. Data from getJsonScene

inner panCamera(x, y, z, targetincluded)

• Move camera position

Parameters:

Name	Type	Default	Description
x	number		the x value of the vector.
y	number		the y value of the vector.
z	number		the z value of the vector.
targetincluded	boolean	false	if true, move target camera too

inner reset()

• Delete all objects from scene

inner setBackgroundColor(color)

• Set Background Color

Parameters:

Name	Type	Description
color	hex

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  simulator.setBackgroundColor(0xff0000); //Background color set to Red
}

inner setCameraY(y)

• Move camera position in Y axis

Parameters:

Name	Type	Description
y	number	the y value of the vector.

inner setCenter(x, y, z)

• Set position target camera

Parameters:

Name	Type	Description
x	number	the x value of the vector.
y	number	the y value of the vector.
z	number	the z value of the vector.

inner setDefaultMaterial(mat)

• Define initial material to show and object when it is loaded.

Parameters:

Name	Type	Description
mat	material3D	Material3d instance . see createMaterial function.

inner setFog(params)

• Set Fog values. If params is null, will use default values

Parameters:

Name	Type	Description
params		a container with parameters. Properties Name Type Description color hex Set Fog's color near number Default 1 far object Default 4000

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  var params={
      color:0xffffff,
      near:1,
      far:4000,
  }
  simulator.setFog(params);
}

inner setMaxDistance(value)

• Set maximum distance between Camera and center scene.

Parameters:

Name	Type	Description
value	number

inner setModel(params)

• open model . Obj Format

Parameters:

Name	Type	Description
params		a container with parameters. Properties Name Type Description objFile string url to obj file colorMat hex Default color Material scale number Scale object scaleUVX number Scale u texture Coordenates scaleUVY number Scale v texture Coordenates alone boolean before load, delete all objects from scene callback function Call function after load object

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{
  simulator.setModel(
  {
      objFile:"modelos/sample.obj", // local path of obj model
      colorMat:"#ffffff",
      scale:1.0,
      scaleUVX:300,
      scaleUVY:300,
      callback:modelLoaded
  });
}

function modelLoaded(id)
{
  // Model is loaded. You are free to use Api functions like Set Materials to object
  simulator.createMaterial({file:"textures/metal.jpg",sizeX:300,sizeY:300,roughness:0.6,metalness:1.0,specularColor:"#424242",enviroment:true},function(mat){
      simulator.setTextureByMaterialName("metalParts",mat,false);
  });

  // or map a texture directy to object
  simulator.createMaterial({file:"textures/texture1.jpg",sizeX:500,sizeY:500},function(mat){
      simulator.setTextureByObjectName(id,mat,false);
  });
};
  

inner setPositionCamara(x, y, z, ticks)

• Move camera position

Parameters:

Name	Type	Default	Description
x	number		the x value of the vector.
y	number		the y value of the vector.
z	number		the z value of the vector.
ticks	number	0	set animation in miliseconds. default 0

inner setRotation(azimuthalAngle, polarangle)

• rotate camera by angle

Parameters:

Name	Type	Description
azimuthalAngle	number	Orbit horizontally. Range is 0 to 360 degress
polarangle	number	Orbit vertically. Range is 0 to 360 degress

inner setTextureByMaterialName(name, mat, reset)

• Set Texture By MaterialName

Parameters:

Name	Type	Description
name	string	Material Name from Material Library in Obj file.
mat	Material3D	Instance of Material3D
reset	boolean	Reset Previous material before apply new.

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
    programa.createMaterial({file:"textures/1415.jpg",sizeX:300,sizeY:300,roughness:0.6,specularColor:"#424242",enviroment:true},function(mat)
    {
           // we use setTextureByMaterialName on callback function, to be sure material has all textures loaded before apply to object
           programa.setTextureByMaterialName("metalParts",mat,false);
    });
}

inner setTextureByObjectName(id, mat, all)

• Set Texture By Object ID

Parameters:

Name	Type	Description
id	string	Object ID.
mat	Material3D	Instance of Material3D
all	boolean	if true, apply texture to all items inside object. If false , apply texture to material that name start with T_ or G_

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
   var objMouseOver=simulator.getObjectMouseOver();
   if(objMouseOver)
   {
       simulator.createMaterial({file:"textures/1415.jpg",sizeX:300,sizeY:300,roughness:0.6,specularColor:"#424242",enviroment:true},function(mat)
       {
           // we use setTextureByObjectName on callback function, to be sure material has all textures loaded before apply to object
           simulator.setTextureByObjectName(objMouseOver,mat,false);
       });
   }
}

inner setValueEffect(list)

• Set value of effect camera

Parameters:

Name	Type	Description
list	array	Properties Name Type Description item object Contains effect values Properties Name Type Description name string name of effect. Can be :Ssao,Vignette,Bloom,Fxaa,ToneMapping,Focus params object Contains effets values

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  //Disable Vignette effect
  simulator.setValueEffect([{name:"Vignette",param:"enable", value: false}]);

  //Change threshold Bloom effect
  simulator.setValueEffect([{name:"Bloom",param:"threshold", value: 0.8}]);
}

inner setZoom(value)

• Set Zoom Camera

Parameters:

Name	Type	Description
value	number

inner toggleRotacion()

• Activate/desactivate automatically rotation camera

inner updateMaterial(name, params)

• update material values

Parameters:

Name	Type	Description
name	string	name of material
params	array	list of material values Properties Name Type Description item object define material property Properties Name Type Description name object name of material property : roughness,metalness,color value object value of material property .Float for roughness,metalness. Hex for color

Example

// simulator is an instance of API3DMAPPWEB.Simulator

if(simulator!=null)
{	
  //Change roughness and metalness value on an Object
  simulator.updateMaterial(id,[{name:"roughness",value: 0.8},{name:"metalness",value: 1.0}]);
}