new Simulator(id, params)
- Create an instance of 3D simulator
Parameters:
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
id |
name container simulator |
||||||||||||||||||||||
params |
a container with parameters. Properties
|
Example
// 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}]); }