Tailormate3d-lib-esm NPM

tailormate3d-lib-esm

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,
});

3D tailormate Web3d Webgl

@everything-registry/sub-chunk-2873 @infinitebrahmanuniverse/nolb-tail

3.0.0

4 years ago