ControlledGroup

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

Usage

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'
 
<ControlledGroup
  position={[0, 0, 0]}
  positionAccessor={state => {
    const distance = state.lidar_mm
 
    // Position the box
    return [0, distance * 10, 0]
  }}
>
  // Add a Red cube
  <mesh>
    <boxBufferGeometry attach="geometry" args={[5, 5, 5]} />
    <meshStandardMaterial attach="material" color="red" roughness={0.6} />
  </mesh>
</ControlledGroup>

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'
 
GLTF.preload(SpaceShipModel)
 
<ControlledGroup
  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} />
<ControlledGroup