Controlled groups are a modified threejs group which allow for hardware controlled translation, rotation and scale.


Controlled groups can only be used as children in a Environment from @electricui/components-desktop-three.

For each of the scale, position and rotation properties, a base value can be specified, along with hardware integration using standard accessor syntax.

This simple example controls the position of a box:

import { ControlledGroup } from '@electricui/components-desktop-three'
position={[0, 0, 0]}
positionAccessor={state => {
const distance = state.lidar_mm
// Position the box
return [0, distance * 10, 0]
// Add a Red cube
<boxBufferGeometry attach="geometry" args={[5, 5, 5]} />
<meshStandardMaterial attach="material" color="red" roughness={0.6} />

Group properties are applied to all meshes, models or lights added as children to a ControlledGroup.

Nest multiple ControlledGroup components to build complex visualisations, for example, apply rotations for each joint in a robotic arm's series of actuators.

Other Accessors

A common visualisation is displaying the pose of a robotic system or sensor.

While the rotationAccessor can be used with Euler angles, mature INS and odometry solutions often use Quaternions to express rotation.

The quaternionAccessor provides a direct path from hardware to rendering without requiring manual conversion.

import { ControlledGroup, GLTF } from '@electricui/components-desktop-three'
import SpaceShipModel from './spaceship.glb'
position={[5, 0, 0]}
quaternionAccessor={state => {
const quat = state.quat
// The accessor requires either an array of [x y z w]
// or a THREE.Quaternion() class instance
return [quat.x, quat.y, quat.z, quat.w]
<GLTF asset={SpaceShipModel} />