Environment is the foundational component responsible for bridging the pre-prepared threejs context and the Electric UI context.

Screenshot of component Environment basic

Environment is the dashed outline, not the geometry inside it!


Like ChartContainer acting as the parent for specific charting features, the Environment component builds a react-three-fibre scene with the necessary setup and tweaks for easier integration.

It defaults to rendering with a transparent background for easier integration with your front-end.

import { Environment } from '@electricui/components-desktop-three'
// Add geometry, lighting, and other scene components
<sphereBufferGeometry attach="geometry" args={[8, 16, 16]} />
<meshStandardMaterial attach="material" color="orange" roughness={0.6} />
<ambientLight intensity={0.8} />

Environment from @electricui/components-desktop-three is required for use with ControlledGroup components. We handle suspense and context bridging to provide access to Electric UI state.


Environment default behaviour is to auto-fill it's parent.

We recommend controlling the size of the 3D canvas by setting width and height css properties on the parent (px, %, em are all accepted as normal).

Screenshot of component Environment size
<div style={{width: "100px", height: "100px"}}>
// ...

Camera Control

Environment accepts a camera property, with the various settings defined as members of a Javascript Object.


Modify the camera's field of view by providing a number value for the fov member.

Screenshot of component Environment fov
<Environment camera={{ fov: 30, }} >
// ...


The position property is specified as a Vector3, controlling the camera's starting position. By default, the camera will look towards the world origin [0, 0, 0] .

Screenshot of component Environment position
<Environment camera={{ position: [15, 5, -15], }} >
// ...


The zoom property controls the zoom factor for the camera.

It accepts a single number. Default is 1.

<Environment camera={{ zoom: 50, }} >
// ...

Orthographic Camera

Adding the orthographic property to Environment is useful when creating mock-2D visualisations, or scenes where camera controls are locked.

Screenshot of component Environment orthographic
<Environment orthographic >
// ...