Methods¶

The 270 Customiser plugin adds the following methods to the Viewer.

Use the el.getObjectNames() method to see the available objects to pass in these methods

getColor¶

Get current color of object as a hexstring, or css rgb value and returns it as a string.

el.getColor({name: 'Base', rgb: true});

Parameters:

name: Type: string
The name of the Object
rgb:
- Type: Boolean
- Default: false
  When true, returns the color as an css rgb value instead of a hexidecimal value.

hideObject¶

Hides or shows the passed object. Identical to showObject({ name: 'Base', visible: false, render: true }).
Automatically calls ME.setShadow() to update the shadow.

el.hideObject({name: 'Base', visible: true, render: true });

Parameters:

name: Type: string
The name of the Object
visible:
- Type: Boolean
- Default: true
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider setting this to false and call requestRender() manually to prevent unneeded frames.

scaleTexture¶

Scale the passed Object3Ds texture to the passed factor.

A scaled texture will force the offset to true.

el.scaleTexture({name: 'Base', scale: 0.5, render: true});

Parameters:

name: Type: string
The name of the Object
scale: Type: Float
Factor to scale the texture to.
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider settings this to false and call requestRender() manually to prevent unneeded frames.

setColor¶

Set color of passed Object's material and automatically render a new frame (optional).

el.setColor({name: 'Base', color: '#ff0000', render: true});

Parameters:

name: Type: string
The name of the Object
color:
- Type: hexidecimal string | css value
  The color to set. Both hexidecimals (#ffffff) or valid css values (white, rgb(255,255,255)) are allowed.
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider setting this to false and call requestRender() manually to prevent unneeded frames.

setText¶

Write text on the passed Object.
Can be used as a promise.

el.setText({name: 'Base', text: 'Hello world', color: '#ff0000', size: 128, render: true}).then(() => { /* callback */ });

Parameters:

name: Type: string
The name of the Object
text: Type: string
The text to add
color:
- Type: hexidecimal string | css value
- Default: #000000
  The color of the text. Both hexidecimals (#ffffff) or valid css values (white, rgb(255,255,255)) are allowed.
background:
- Type: hexidecimal string | css value
- Default: current material color
  The color of the background. Both hexidecimals (#ffffff) or valid css values (white, rgb(255,255,255)) are allowed.
  Ignored when transparent is set to true.
transparent:
- Type: Boolean
- Default: current material's transparency
  Adds transparency as the background.
font:
- Type: string
- Default: sans-serif
  The font used to write the text with.
  
  When using a custom font, make sure that the font file is loaded and used.
size:
- Type: integer
- Default: 128
  The size of the text, in pixels.
  
  While fontsize is an absolute value, it will have different results depending on the Objects texture size. So a size of 128 might look smaller or bigger going from one Object to another.
fontStyle:
- Type: string
- Default: normal
  Apply a css font style to the text. Options are normal, italic, oblique.
fontWeight:
- Type: string
- Default: normal
  Apply a css font weight to the text. Options are lighter, light, normal, bold, bolder.
retina:
- Type: Boolean
- Default: true
  Upscales the font for sharper rendering. Recommended in most cases.
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider settings this to false and call requestRender() manually to prevent unneeded frames.

setTexture¶

Map the passed image on the Object. Image source can be a HTMLImage, HTMLCanvas, Base64 or uri string.
Can be used as a promise.

el.setTexture({name: 'Base', source: document.querySelector('#image'), background: '#ff0000', scale: 'contain'}).then(() => { /* callback */ });

Parameters:

name: Type: string
The name of the Object
source: Type: HTMLNode | string
The image source to add. Image source can be a HTMLImage, HTMLCanvas, Base64 or uri string.
background:
- Type: string
- Default: current material color
  The color of the background when the source contains transparency. Both hexidecimals (#ffffff) or valid css values (white, rgb(255,255,255)) are allowed.
  Ignored when transparent is set to true.
transparent:
- Type: Boolean
- Default: current material's transparency
  Render transparent pixels from the source as transparent.
scale:
- Type: string | Float
- Default: fit
  The scaling method used on the image, or the scale factor:
  - fit scales the image dimensions to the texture dimensions.
  - contain scales the image as large as possible within its container without cropping or stretching the image.
  - cover scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space.
  - none keeps the intrinsic image dimensions.
  - Float scales the texture to the passed factor.
    
    Passing a Float forces the scaling method to contain, and offset to true.
offset:
- Type: Boolean
- Default: false
  Adds a safe border around the image to prevent anti-alias smearing. This is typically needed if the Object UV size does not match passed image.
retina:
- Type: Boolean
- Default: false
  Upscales the image for sharper rendering, but at a performance cost. It is recommended to only use this when needed.
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider settings this to false and call requestRender() manually to prevent unneeded frames.

setVariant¶

Applies the passed variant to the loaded Asset or Object and optionally renders a new frame. A variant is a preconfigured set of colors and/or materials, available in the loaded Asset.
Can be used as a promise.

el.setVariant({name: 'plane', variant: 'leather', render: true}).then(() => { /* callback */ })

Parameters:

name: Type: string
The name of the Object
variant: Type: string
The name of the desired variant. Use getVariants() to find the available variants.
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider setting this to false and call requestRender() manually to prevent unneeded frames.

showObject¶

Shows or hides the passed Object. Identical to hideObject({ name: 'Base', visible: false, render: true }).
Automatically calls ME.setShadow() to update the shadow.

el.showObject({ name: 'Base', visible: true, render: true });

Parameters:

name: Type: string
The name of the Object
visible:
- Type: Boolean
- Default: true
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider settings this to false and call requestRender() manually to prevent unneeded frames.

removeText¶

Removes any text set on passed Object.

el.removeText({name: 'Base', render: true});

Parameters:

name: Type: string
The name of the Object
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider settings this to false and call requestRender() manually to prevent unneeded frames.

removeTexture¶

Removes any image set on passed Object. The Object's base color will remain as is.

el.removeTexture({name: 'Base', render: true});

Parameters:

name: Type: string
The name of the Object
transparent:
- Type: Boolean
- Default: current material's transparency
  Forces transparency on the material after texture has been removed. false will render the material as white opaque.
render:
- Type: Boolean
- Default: true
  Immediately renders a new frame when true. If you are changing multiple items in the Viewer, consider settings this to false and call requestRender() manually to prevent unneeded frames.