Add origin_color prop to frame objects (#320)

src/viser/_messages.py

@@ -228,6 +228,8 @@ class FrameProps:
     """Radius of each axis. Synchronized automatically when assigned."""
     origin_radius: float
     """Radius of the origin sphere. Synchronized automatically when assigned."""
+    origin_color: Tuple[int, int, int]
+    """Color of the origin sphere as RGB integers. Synchronized automatically when assigned."""
 
 
 @dataclasses.dataclass

src/viser/_scene_api.py

@@ -802,6 +802,7 @@ def add_frame(
         axes_length: float = 0.5,
         axes_radius: float = 0.025,
         origin_radius: float | None = None,
+        origin_color: RgbTupleOrArray = (236, 236, 0),
         wxyz: tuple[float, float, float, float] | np.ndarray = (1.0, 0.0, 0.0, 0.0),
         position: tuple[float, float, float] | np.ndarray = (0.0, 0.0, 0.0),
         visible: bool = True,
@@ -840,6 +841,7 @@ def add_frame(
                 axes_length=axes_length,
                 axes_radius=axes_radius,
                 origin_radius=origin_radius,
+                origin_color=_encode_rgb(origin_color),
             ),
         )
         return FrameHandle._make(self, message, name, wxyz, position, visible)

src/viser/client/src/SceneTree.tsx

@@ -147,6 +147,7 @@ function useObjectFactory(message: SceneNodeMessage | undefined): {
             axesLength={message.props.axes_length}
             axesRadius={message.props.axes_radius}
             originRadius={message.props.origin_radius}
+            originColor={rgbToInt(message.props.origin_color)}
           />
         ),
       };

src/viser/client/src/SceneTreeState.tsx

@@ -37,6 +37,7 @@ export const rootNodeTemplate: SceneNode = {
       axes_length: 0.5,
       axes_radius: 0.0125,
       origin_radius: 0.025,
+      origin_color: [236, 236, 0],
     },
   },
   children: ["/WorldAxes"],
@@ -51,6 +52,7 @@ const worldAxesNodeTemplate: SceneNode = {
       axes_length: 0.5,
       axes_radius: 0.0125,
       origin_radius: 0.025,
+      origin_color: [236, 236, 0],
     },
   },
   children: [],

src/viser/client/src/ThreeAssets.tsx

@@ -54,7 +54,6 @@ function rgbToInt(rgb: [number, number, number]): number {
   return (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
 }
 const originGeom = new THREE.SphereGeometry(1.0);
-const originMaterial = new THREE.MeshBasicMaterial({ color: 0xecec00 });
 
 const PointCloudMaterial = /* @__PURE__ */ shaderMaterial(
   { scale: 1.0, point_ball_norm: 0.0 },
@@ -259,13 +258,15 @@ export const CoordinateFrame = React.forwardRef<
     axesLength?: number;
     axesRadius?: number;
     originRadius?: number;
+    originColor?: number;
   }
 >(function CoordinateFrame(
   {
     showAxes = true,
     axesLength = 0.5,
     axesRadius = 0.0125,
     originRadius = undefined,
+    originColor = 0xecec00,
   },
   ref,
 ) {
@@ -276,9 +277,9 @@ export const CoordinateFrame = React.forwardRef<
         <>
           <mesh
             geometry={originGeom}
-            material={originMaterial}
             scale={new THREE.Vector3(originRadius, originRadius, originRadius)}
           >
+            <meshBasicMaterial color={originColor} />
             <OutlinesIfHovered />
           </mesh>
           <Instances limit={3}>

src/viser/client/src/WebsocketMessages.ts

@@ -126,6 +126,7 @@ export interface FrameMessage {
     axes_length: number;
     axes_radius: number;
     origin_radius: number;
+    origin_color: [number, number, number];
   };
 }
 /** Batched axes message.