Rectangle Transform

The Rectangle Transform feature can be used to translate, rotate and scale geometry in the scene using a 2D rectangular handle. Unlike the Gumball, the Rectangle Transform operates entirely within a defined plane, which makes it especially well-suited for flat or planar objects such as furniture, panels, or floor elements.

The complete API documentation of the Rectangle Transform module can be found here.

This is a feature that can be added via a separate CDN or npm-module on top of our viewer module.

To install it call

CODE

npm install --save @shapediver/viewer.features.transformation-tools

or if you use the viewer via a CDN you can just get the SDVTransformationTools property from the window object.

Initial Setup

The initial setup of the Rectangle Transform requires a viewport, the nodes to transform, and a plane definition. The plane defines the surface on which the rectangular handle will be drawn and interacted with.

TYPESCRIPT

import {
    RectangleTransform,
    EventResponseMapping,
} from '@shapediver/viewer.features.transformation-tools';
import { addListener, EVENTTYPE_TRANSFORMATION_TOOLS } from '@shapediver/viewer';

// create the RectangleTransform with a viewport, nodes, and a plane definition
const rectangleTransform = new RectangleTransform(viewport, nodes, {
    plane: {
        origin: [0, 0, 0],
        vector_u: [1, 0, 0],
        vector_v: [0, 1, 0],
    },
});

// listen to the event to be notified of changes
const eventListenerToken = addListener(EVENTTYPE_TRANSFORMATION_TOOLS.MATRIX_CHANGED, (e) => {
    const event = e as EventResponseMapping[EVENTTYPE_TRANSFORMATION_TOOLS.MATRIX_CHANGED];

    // filter for this specific instance when multiple instances are active
    if (event.id !== rectangleTransform.id) return;

    console.log(
        `RectangleTransform has changed:
        - viewportId: ${event.viewportId}
        - nodes: ${event.nodes}
        - transformations: ${event.transformations}`
    );
});

The nodes can either be taken from the scene tree or supplied by a user selection (as can be seen in the showcase below). For further information on the settings that are available, please visit the API documentation.

Showcase

In this example you can select one or multiple of the boxes and manipulate them with the Rectangle Transform.

Additional Examples

Additional examples can be found on the viewer examples page in the transformation tools section.