Scene3D

Scene3D builds on the same data and composition paradigms as Colight Plot but adds support for WebGPU–powered 3D primitives.

A Basic Point Cloud

Let’s start by creating a simple point cloud. Our point cloud takes an array of 3D coordinates and an array of colors.

Define some 3D positions and corresponding colors.

Create the point cloud component.

Next, we combine the point cloud with a camera configuration. The camera is specified in a properties dictionary using the key "defaultCamera".

scene_pc

Other Primitives

Scene3D supports several primitive types: PointCloud, Ellipsoid, Cuboid, and LineBeams.

Create a point cloud of 100 particles in a tight 3D Gaussian distribution

Generate random colors between purple [1,0,1] and cyan [0,1,1]

Create an ellipsoid component

(
    ellipsoid := Ellipsoid(
        centers=[
            [0, 0, 0],
            [1.5, 0, 0],
        ],
        half_sizes=[0.5, 0.5, 0.5],  # Can be a single value or a list per instance
        colors=np.array(
            [
                [0, 1, 1],  # cyan
                [1, 0, 1],  # magenta
            ],
            dtype=np.float32,
        ),
        alphas=np.array([1.0, 0.5]),  # Opaque and semi-transparent
    )
)

Create a wireframe ellipsoid

Create a cuboid component

Create line beams connecting points to form letter A

Composition

Use the + operator to overlay multiple scene components.

(
    gaussian_cloud
    + ellipsoid
    + wireframe
    + cuboid
    + beams
    + {
        "defaultCamera": {
            "position": [3.915157, 4.399701, 3.023268],
            "target": [0.401950, 0.815510, -0.408825],
            "up": [0.000000, 0.000000, 1.000000],
            "fov": 45,
        }
    }
)

Decorations

Decorations allow you to modify the appearance of specific instances in a component. You can decorate instances by providing:

• color: Override the color for decorated instances (RGB array, e.g. [1.0, 0.0, 0.0] for red)
• alpha: Set transparency (0.0 = fully transparent, 1.0 = opaque)
• scale: Scale the size of decorated instances relative to their base size

The deco() function takes an array of indices to decorate and the desired appearance properties.

Create a point cloud with 100 points

cloud

Picking

A picking system allows for selecting elements in a scene using the onHover callback.

In the example below, we decorate the hovered cube.

Define centers for three non-overlapping cubes

Create interactive cubes with hover effect

(
    Plot.initialState({"hovered": 1})  # Middle cube initially selected
    | Cuboid(
        centers=cuboid_centers,
        color=[1.0, 1.0, 0.0],  # yellow
        half_size=[0.4, 0.4, 0.4],
        alpha=0.5,
        onHover=Plot.js("(index) => $state.update({'hovered': index})"),
        decorations=[
            # Make hovered cube red and translucent
            deco(
                Plot.js("typeof $state.hovered === 'number' ? [$state.hovered] : []"),
                color=[1.0, 0.0, 0.0],
            )
        ],
    )
)