@wandelbots/wandelbots-js-react-components 2.39.0 → 2.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/3d-viewport/collider/ColliderCollection.tsx

@@ -0,0 +1,34 @@
+import type { ThreeElements } from "@react-three/fiber"
+import type { Collider } from "@wandelbots/nova-api/v1"
+import ColliderElement from "./ColliderElement"
+
+export type MeshChildrenProvider = (
+  key: string,
+  collider: Collider,
+) => React.ReactNode
+
+type ColliderCollectionProps = {
+  name?: string
+  colliders: Record<string, Collider>
+  meshChildrenProvider: MeshChildrenProvider
+} & ThreeElements["group"]
+
+export default function ColliderCollection({
+  name,
+  colliders,
+  meshChildrenProvider,
+  ...props
+}: ColliderCollectionProps) {
+  return (
+    <group name={name} {...props}>
+      {Object.entries(colliders).map(([colliderKey, collider]) => (
+        <ColliderElement
+          key={colliderKey}
+          name={colliderKey}
+          collider={collider}
+          children={meshChildrenProvider(colliderKey, collider)}
+        />
+      ))}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/ColliderElement.tsx

@@ -0,0 +1,36 @@
+import type { Collider } from "@wandelbots/nova-api/v1"
+import type React from "react"
+import * as THREE from "three"
+import { colliderShapeToBufferGeometry } from "./colliderShapeToBufferGeometry"
+
+type ColliderElementProps = {
+  name?: string
+  collider: Collider
+  children?: React.ReactNode
+}
+
+export default function ColliderElement({
+  name,
+  collider,
+  children,
+}: ColliderElementProps) {
+  const position = collider.pose?.position ?? [0, 0, 0]
+  const rotation = collider.pose?.orientation ?? [0, 0, 0]
+  if (collider.margin) {
+    console.warn(`${name} margin is not supported`)
+  }
+  return (
+    <mesh
+      name={name}
+      position={new THREE.Vector3(
+        position[0],
+        position[1],
+        position[2],
+      ).divideScalar(1000)}
+      rotation={new THREE.Euler(rotation[0], rotation[1], rotation[2], "XYZ")}
+      geometry={colliderShapeToBufferGeometry(collider.shape)}
+    >
+      {children}
+    </mesh>
+  )
+}

package/src/components/3d-viewport/collider/CollisionSceneRenderer.tsx

@@ -0,0 +1,26 @@
+import type { CollisionScene } from "@wandelbots/nova-api/v1"
+import ColliderCollection, {
+  type MeshChildrenProvider,
+} from "./ColliderCollection"
+
+type CollisionSceneRendererProps = {
+  scene: CollisionScene
+  meshChildrenProvider: MeshChildrenProvider
+}
+
+export default function CollisionSceneRenderer({
+  scene,
+  meshChildrenProvider,
+}: CollisionSceneRendererProps) {
+  const colliders = scene.colliders
+  return (
+    <group>
+      {colliders && (
+        <ColliderCollection
+          meshChildrenProvider={meshChildrenProvider}
+          colliders={colliders}
+        />
+      )}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/colliderShapeToBufferGeometry.ts

@@ -0,0 +1,48 @@
+import type { ColliderShape } from "@wandelbots/nova-api/v1"
+import * as THREE from "three"
+import { ConvexGeometry } from "three-stdlib"
+
+export function colliderShapeToBufferGeometry(
+  shape: ColliderShape,
+): THREE.BufferGeometry {
+  const shapeType = shape.shape_type
+  switch (shapeType) {
+    case "convex_hull":
+      return new ConvexGeometry(
+        shape.vertices.map(
+          (vertex) =>
+            new THREE.Vector3(
+              vertex[0] / 1000,
+              vertex[1] / 1000,
+              vertex[2] / 1000,
+            ),
+        ),
+      )
+    case "box":
+      return new THREE.BoxGeometry(
+        shape.size_x / 1000,
+        shape.size_y / 1000,
+        shape.size_z / 1000,
+      )
+    case "sphere":
+      return new THREE.SphereGeometry(shape.radius / 1000)
+    case "capsule":
+      return new THREE.CapsuleGeometry(
+        shape.radius / 1000,
+        shape.cylinder_height / 1000,
+      )
+    case "cylinder":
+      return new THREE.CylinderGeometry(
+        shape.radius / 1000,
+        shape.radius / 1000,
+        shape.height / 1000,
+      )
+    case "rectangle": {
+      return new THREE.BoxGeometry(shape.size_x / 1000, shape.size_y / 1000, 0)
+    }
+    default: {
+      console.warn(`${shape.shape_type} is not supported`)
+      return new THREE.BufferGeometry()
+    }
+  }
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+export { default as CollisionSceneRenderer } from "./components/3d-viewport/collider/CollisionSceneRenderer"
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
@@ -21,9 +22,9 @@ export * from "./components/RobotCard"
 export * from "./components/RobotListItem"
 export * from "./components/robots/AxisConfig"
 export {
+  MANUFACTURER_HOME_CONFIGS,
   extractManufacturer,
   getDefaultHomeConfig,
-  MANUFACTURER_HOME_CONFIGS,
 } from "./components/robots/manufacturerHomePositions"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"