tailormate3d-lib-esm v3.0.0
tailormate3d-lib-esm
Website Tailormate3d
Initialize Viewport
var viewport = new Tailormate3d(options);
Parameters
options
Objectoptions.container
HTMLElementdocument.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, defaultfalse
)options.offsetWidth
Number canvas element width (optional, default : Container element width)options.offsetHeight
Number canvas element height (optional, default : Container element height)backgroundColor
Colorfloor
Object (Optional)fog
Object (Optional)model
Object (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 filetype
String? Type of scene (Required) - Custom identifier of the sceneoptions
ObjectresetPosition
Boolean If you set true then model position will reset when load complete. This could be use with initial load (optional, defaultfalse
)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, defaultfalse
)
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
Example:
viewport.resize(width,height);
loadScene
Load 3d scene into the viewport
Parameters
sceneReferenceId
String? Reference id of scene (Required) - find in scene configoptions
Object? (required in case of callback)type
Number change the scale of object - Float (optional)
success
Function? called on completion with one argumentsinfo
contains the scene data.error
Function? called on error with one argumentserror
.
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
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 functionviewport.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 urlhttps://tailormate3d.com/{instanceName}/texture/{referenceId}
sceneId
String? Scene idoptions
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 urlhttps://tailormate3d.com/{instanceName}/texture/{referenceId}
sceneId
String? Object idoptions
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 optionsglossy
/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
Example:
viewport.getPosition();
setPosition
Set position of model
Parameters
object
Object
Example:
viewport.setPosition({
x1: 0,
y1: 0,
z1: 0,
x2: 0,
y2: 0,
z2: 0,
});
3 years ago