tailormate3d-lib-esm

Website Tailormate3d

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)
  • backgroundTransparent Boolean Enable/Disable background(optional, default false)
  • options.offsetWidth Number canvas element width (optional, default : Container element width)
  • options.offsetHeight Number canvas element height (optional, default : Container element height)
  • backgroundColor Color
  • floor Object (Optional)
    • enabled Boolean Enable/Disable(optional, default true)
    • color Color (optional, default #ffffff)
  • fog Object (Optional)
    • enabled Boolean Enable/Disable(optional, default true)
    • color Color (optional, default #a0a0a0)
  • model Object (Optional)
    • position Object? (Optional)
      • x Number position x (optional)
      • y Number position y (optional)
      • z Number position z (optional)
    • scale Number Object scale (optional)

Return ViewportObject

Initialize Color

Parameters

• color Hex color

Example:

var gray = new Tailormate3d.Color(0xa0a0a0)
var red = new Tailormate3d.Color('#ff0000')

Initialize Scene

Parameters

• sceneReferenceId String? Reference id of scene (Required) - provided in config file
• type String? Type of scene (Required) - Custom identifier of the scene
• options Object
  • resetPosition Boolean If you set true then model position will reset when load complete. [This could be use with initial load] (optional, default false)
  • isHidden Boolean If you set true then model will load but it will not display on viewport. You can manually show model once model will load. [This could be use with initial load] (optional, default false)

Example:

const opt = {
    resetPosition:true,
    isHidden:false
};
var scene = new Tailormate3d.Scene('shirt_cuff_one_button_rounded','cuff',options)

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 scene config
• options Object? (required in case of callback)
  • type Number change the scale of object - Float (optional)
• success Function? called on completion with one arguments info contains the scene data.
• error Function? called on error with one arguments error.

Return Promise

Example:

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

}, function() {
    //Error
});

Load multiple scenes together:

var opt = {
    resetPosition:true,
    isHidden:false
};
var scenes = [
    new Tailormate3d.Scene('shirt_cuff_one_button_rounded','cuff',opt),
    new Tailormate3d.Scene('shirt_bottom_normal_curved','bottom',opt),
    new Tailormate3d.Scene('shirt_bottom_normal_curved_back_no_pleat','back',opt),
    new Tailormate3d.Scene('shirt_sleeve_long','sleeves',opt),
    new Tailormate3d.Scene('shirt_collar_classic_spread','collar',opt),
    new Tailormate3d.Scene('shirt_front_placket','placket',opt),
    new Tailormate3d.Scene('shirt_regular_yoke','yoke',opt),
    new Tailormate3d.Scene('shirt_pocket_diamond_left','pocket',opt),
]
viewport.loadScene(scenes,
    opt,
    function onComplete(info){
        console.log('Complete', info);
    },
    function onError(err){
        console.log(err)
    }
)

// You can use it using promise
viewport.loadScene(scenes)
.then(function(info) {
    console.log('Complete', info);
})
.catch(function(err){
    console.log(err)
})

removeScene

Remove scene by scene id

Parameters

• sceneReferenceId String? Reference id of scene (Required) - find in scene config

Example:

viewport.removeScene('shirt_cuff_one_button_rounded');

removeSceneByType

Remove scene by scene id

Parameters

• type String? Type you defined when scene load (Required)

Example:

viewport.removeSceneByType('cuff');

getSceneObjects

Get list of objects loaded on the viewport

Return Array

array Array? Array of objects

• color Color
• name String
• scene_id String
• type Boolean
• hidden Boolean
• texture String

Example:

viewport.getSceneObjects();

Sample return:

[{
    'color': { r: 1, g: 1, b: 1 }
    'name': "shirt_pocket_diamond_left"
    'scene_id': 'shirt_pocket_diamond_left',
    'hidden': false,
    'texture': 'https://tailormate3d.com/xx-texture.jpg'
},{
    'color': { r: 1, g: 1, b: 1 },
    'name' : 'shirt_bottom_normal_curved',
    'scene_id': 'spread_collar',
    'hidden': false,
    'texture': 'https://tailormate3d.com/xx-texture.jpg'
}]

setSceneObjects

Update object scene id, type, visibility, color, texture

Parameters

• array Array The array return by function viewport.getSceneObjects()

Return Promise

Example:

viewport.getSceneObjects([{
    'color': { r: 1, g: 1, b: 1 }
    'name': "shirt_pocket_diamond_left"
    'scene_id': 'shirt_pocket_diamond_left',
    'hidden': false,
    'texture': 'https://tailormate3d.com/xx-texture.jpg'
},{
    'color': { r: 1, g: 1, b: 1 },
    'name' : 'shirt_bottom_normal_curved',
    'scene_id': 'spread_collar',
    'hidden': false,
    'texture': 'https://tailormate3d.com/xx-texture.jpg'
}]);

// or
var objects = viewport.getSceneObjects()
for(var i = 0; i < objects.length; i++){
    objects[i].texture = 'https://tailormate3d.com/xx-texture-2.jpg'
}
viewport.getSceneObjects(objects).then(function(){
    console.log('Complete');
});

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 all the objects of the scene

Parameters

• imageUrl String? Design image url https://tailormate3d.com/{instanceName}/texture/{referenceId}
• sceneId String? Scene id
• options Object? (required in case of callback)
  • shininess Number Increase/Decrease shine - float 1 to 1000 (optional, default : 1)
  • textureSize Number Repeat image on model - float 0.01 to 100 (optional, default : 1)
  • opacity Number change the transparency of model - float 0 to 1 (optional, default : 1)
  • rotate Number rotate model - 0 to 360 (optional, default : 1)
  • color Color
• 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?

Return Promise

Example:

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

// or
viewport.loadTextureBySceneId(url,'spread_collar').then(function(){
    //Success
})

loadTextureByName

Render the texture on specific scene object

Parameters

• imageUrl String? Design image url https://tailormate3d.com/{instanceName}/texture/{referenceId}
• sceneId String? Object id
• options Object? (required in case of callback)
  • shininess Number Increase/Decrease shine - float 1 to 1000 (optional, default : 1)
  • textureSize Number Repeat image on model - float 0.01 to 100 (optional, default : 1)
  • opacity Number change the transparency of model - float 0 to 1 (optional, default : 1)
  • rotate Number rotate model - 0 to 360 (optional, default : 1)
  • color Color
• 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?

Return Promise

Example:

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

// or

viewport.loadTextureBySceneId(url,'spread_collar').then(function(){
    //Success
})

loadColor

Render the color on the scene or scene object

Parameters

• color Color Color object (required)
• name String Scene id or object id (required)
• material String Available options glossy/plastic/glass (optional)

Return Promise

Example:

var color = new Tailormate3d.Color('#ff0000');
viewport.loadColor(color, 'front_button', 'plastic').then(function(){
    //Success
})

toImage

Return image of viewport

Return String

Base64 encoded url

Example:

viewport.toImage();

getImageBlob

Return image of viewport

Return Blob

Image Blob

Example:

viewport.getImageBlob();

startRotation

Enable model auto rotation

Parameters

• speed Number float (optional)

Example:

viewport.startRotation();

stopRotation

Disable model auto rotation

Example:

viewport.stopRotation();

toggleRotation

Enable/Disable model auto rotation

Parameters

• speed Number float (optional)

Example:

viewport.toggleRotation();

getPosition

Get position of model

Return

• object Object
  • x1 Number float
  • y1 Number float
  • z1 Number float
  • x2 Number float
  • y2 Number float
  • z2 Number float

Example:

viewport.getPosition();

setPosition

Set position of model

Parameters

• object Object
  • x1 Number float
  • y1 Number float
  • z1 Number float
  • x2 Number float
  • y2 Number float
  • z2 Number float

Example:

viewport.setPosition({
    x1: 0,
    y1: 0,
    z1: 0,
    x2: 0,
    y2: 0,
    z2: 0,
});