Gumball

The gumball feature can be used to translate, rotate and scale geometry in the scene. This is a basic behavior that is commonly used in most 3D software.

The Gumball has already been integrated with App Builder. This allows you to use a component in Grasshopper to initialize the Gumball. With this approach, no coding is needed.

The complete API documentation of the gumball 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

npm install --save @shapediver/viewer.features.gumball

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

Initial Setup

The initial setup of the gumball is quite straightforward. After creating a viewport (and a session) you can create the gumball as follows:

import { Gumball, GumballEventResponseMapping } from '@shapediver/viewer.features.gumball';
import { addListener, EVENTTYPE_GUMBALL } from '@shapediver/viewer';

// create the Gumball with a viewport and the nodes
const gumball = new Gumball(viewport, nodes);

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

    console.log(
        `Gumball has changed: 
        - viewportId: ${gumballEvent.viewportId}
        - nodes: ${gumballEvent.nodes}
        - transformations: ${gumballEvent.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 gumball.

Additional Examples

Additional example can be found on the viewer examples page in the gumball section.