Moving, Rotating & Scaling Objects

Placing, rotating and scaling meshes and mesh groups in your variant.

Positioning objects in variants can be incredibly powerful, especially when combined with nesting transformable groups, but comes with some additional complexity.

Setting Transform Options

Specifying a new position, rotation and scale on a Mesh/Mesh Group looks like this:

{
      tag: 'REAR_PANEL',
      enabled: true,
      position: { x: 0, y: 0, z: 1},
      rotation: { x: 0, y: 90, z: 0},
      scale: { x: 1, y: 2, z: 1},      
},

In this example we are:

• Positioning the object at the location [0,0,1] (one meter in the Z axis from its 0,0,0 position).

• Setting its rotation to 90 degrees in the Y axis.

• Setting the Y scale to twice the height of the other axes.

All values are relative to the parent object (AKA being in "local space"), just like in a 3D editor, 3D scene, or GLTF file. Values you specify will replace existing values, not be added to them as an offset.

This means if the object was already at placed at position 0,0,1 in the 3D file, it won't change position.

Units

• Position values are in meters

• Rotation values are in degrees

• Scale is relative to the parent transforms, but in most cases 1,1,1 will be the original size

Nesting Transforms

If the object you are transforming has children, they will also be effected by the transform. You can even nest tagged meshes inside other tagged meshes in the 3D file, which will inherit their parents position, rotation and scale when transformed via the API.

For example, if you had a built-in USB port on a desk that could be placed anywhere along the front edge of the desk, and the desk height was also customisable; you would nest the USB object inside the desk object, then set its left/right position via the USB X position, and the desk height via the desk Y position, as below.

Now the USB port always stays attached to the desktop, while the position of both can be freely customised.

{
      tag: 'USB_PORT',
      enabled: true,
      position: { x: 0.37, y: 0, z: 0},
   
},
{
      tag: 'DESKTOP',
      enabled: true,
      position: { x: 0, y: 1.33, z: 0},  
},

Preparing your 3D file for transforms

Since all transforms are local, its often easier for developers to reason about transforms if the parent objects of movable Meshes/Groups all have default values (e.g. position/rotation 0,0,0 and scale of 1,1,1).

The only time you should nest tagged objects you intend to transform is if the position of one should effect the position of its children.

To avoid the need for rework, we recommend having a pre-agreed plan between 3D Editors and Web Developers as to what items do and don't need to be transformable, prior to building the 3D file.