To use the renderer API you must include javascript API into your html file.

Initialize Viewport¶

var viewport = new Tailormate3d(options);

Parameters¶

• options Object?
  • options.container HTMLElement document.getElementById('container') (optional, default : document.body)
  • baseUrl String? Server URL (Required) - https://tailormate3d.com/{instanceName}/
  • apikey String? API Key required to access the data from server (Required)
  • options.offsetWidth Number canvas element width (optional, default : Container element width)
  • options.offsetHeight Number canvas element height (optional, default : Container element height)
  • options.shadow Boolean Enable/Disable 3d object shadow (optional, default false)

Returns ViewportObject

Functions¶

resize¶

Resize the viewport

Parameters¶

• width Number? (Required)
• height Number? (Required)

Example:

viewport.resize(width,height);

loadScene¶

Load 3d scene into the viewport

Parameters¶

• sceneReferenceId String? Reference id of scene (Required) - find in data API
• options Object? (required in case of callback)
  • options.scale Number change the scale of object - Float (optional, default : 1)
  • options.positionX Number change the x position of object - Float (optional, default : 1)
  • options.positionY Number change the y position of object - Float (optional, default : 1)
  • options.positionZ Number change the z position of object - Float (optional, default : 1)
• callback Function? called on completion with one arguments (err, info). info contains the scene data.

Example:

var options = {};
viewport.loadScene('spread_collar',options,function(err, info){

});

Returns -

getListOfObjectsLoaded¶

Get list of objects loaded on the viewport

Returns¶

array Array? Array of objects

• Name String
• Id String
• SceneId String
• Visibility Boolean

Example:

viewport.getListOfObjectsLoaded();

Sample return:

[{
    'Name' : 'spread_collar_inner',
    'Id' : 'spread_collar_inner',
    'SceneId': 'spread_collar',
    'Visibility' : true
},{
    'Name' : 'spread_collar_outer',
    'Id' : 'spread_collar_outer',
    'SceneId': 'spread_collar',
    'Visibility' : true
}]

hideScene¶

Hide scene on the viewport

Parameters¶

• sceneId String? Scene id (Required)

Example:

viewport.hideScene('{sceneId}');

showScene¶

Show the hidden scene on the viewport

Parameters¶

• sceneId String? Scene id (Required)

Example:

viewport.showScene('{sceneId}');

removeScene¶

Remove scene from the viewport

Parameters¶

• sceneId String? Scene id (Required)

Example:

viewport.removeScene('{sceneId}');

hideObject¶

Hide particular scene object on the viewport

Parameters¶

• objectId String? Object id (Required) - find in getListOfObjectsLoaded function

Example:

viewport.hideObject('{objectId}');

showObject¶

Show the previous hidden scene object on the viewport

Parameters¶

• objectId String? Object id (Required) - find in getListOfObjectsLoaded function

Example:

viewport.showObject('{objectId}');

removeObject¶

Remove object from the viewport

Parameters¶

• objectId String? Object id (Required) - find in getListOfObjectsLoaded function

Example:

viewport.removeObject('{objectId}');

flipBack¶

Show the back part of the scene

Example:

viewport.flipBack();

resetPosition¶

Reset the position of all scenes loaded on viewport

Example:

viewport.resetPosition();

loadTextureBySceneId¶

Render the texture on the scene (Find the texture in designs data API)

Parameters¶

• imageUrl String? Design image url https://tailormate3d.com/{instanceName}/texture/{referenceId}
• sceneId String? Scene id
• options Object? (required in case of callback)
  • options.shininess Number Increase/Decrease shine - float 1 to 1000 (optional, default : 1)
  • options.repeatSet Number Repeat image on model - float 0.01 to 100 (optional, default : 1)
  • options.transparency Number change the transparency of model - float 0 to 1 (optional, default : 1)
• onSuccess Function? called on completion with no argument.
• onError Function? called on fail to load with one argument (error). Error?
• onProgress Function? called on progress to load with one argument (progress). Progress?

Example:

var url = 'https://tailormate3d.com/{instanceName}/texture/{referenceId}';
var options = {
    repeatSet: 5
};
viewport.loadTextureBySceneId(url,'spread_collar',options,function(){
    //Call on success   
}, function(error){
    //Call on error
},function(progress){
    //Call on progress
});

loadTextureByName¶

Render the texture on specific scene object (Find the texture in designs data API)

Parameters¶

• imageUrl String? Design image url https://tailormate3d.com/{instanceName}/texture/{referenceId}
• sceneId String? Object id
• options Object? (required in case of callback)
  • options.shininess Number Increase/Decrease shine - float 1 to 1000 (optional, default : 1)
  • options.repeatSet Number Repeat image on model - float 0.01 to 100 (optional, default : 1)
  • options.transparency Number change the transparency of model - float 0 to 1 (optional, default : 1)
• onSuccess Function? called on completion with no argument.
• onError Function? called on fail to load with one argument (error). Error?
• onProgress Function? called on progress to load with one argument (progress). Progress?

Example:

var url = 'https://tailormate3d.com/{instanceName}/texture/{referenceId}';
var options = {
    repeatSet: 5
};
viewport.loadTextureByName(url,'spread_collar',options,function(){
    //Call on success   
}, function(error){
    //Call on error
},function(progress){
    //Call on progress
});

loadColorBySceneId¶

Render the RGB color on the scene

Parameters¶

• r Number? Red color of RGB - Integer 0 to 255 (required)
• g Number? Green color of RGB - Integer 0 to 255 (required)
• b Number? Blue color of RGB - Integer 0 to 255 (required)
• sceneId String? Scene id
• options Object? (required in case of callback)
  • options.shininess Number Increase/Decrease shine - float 1 to 1000 (optional, default : 1)
  • options.transparency Number change the transparency of model - float 0 to 1 (optional, default : 1)
• onSuccess Function? called on completion with no argument.
• onError Function? called on fail to load with no argument. Error due to invalid RGB color

Example:

var url = 'https://tailormate3d.com/{instanceName}/texture/{referenceId}';
var options = {};
viewport.loadColorBySceneId(212,112,32,'spread_collar',options,function(){
    //Call on success   
}, function(error){
    //Call on error
});

loadColorByName¶

Render the RGB color on specific scene object

Parameters¶

• r Number? Red color of RGB - Integer 0 to 255 (required)
• g Number? Green color of RGB - Integer 0 to 255 (required)
• b Number? Blue color of RGB - Integer 0 to 255 (required)
• sceneId String? Object id
• options Object? (required in case of callback)
  • options.shininess Number Increase/Decrease shine - float 1 to 1000 (optional, default : 1)
  • options.transparency Number change the transparency of model - float 0 to 1 (optional, default : 1)
• onSuccess Function? called on completion with no argument.
• onError Function? called on fail to load with no argument. Error due to invalid RGB color

Example:

var url = 'https://tailormate3d.com/{instanceName}/texture/{referenceId}';
var options = {};
viewport.loadColorByName(212,112,32,'spread_collar',options,function(){
    //Call on success   
}, function(error){
    //Call on error
});