@wandelbots/wandelbots-js-react-components 1.42.0 → 1.43.0

package/package.json

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

package/src/components/robots/Robot.tsx

@@ -8,8 +8,8 @@ import { defaultGetModel } from "./robotModelLogic"
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
-  isGhost?: boolean
   flangeRef?: React.Ref<Group>
+  transparentColor?: string
 } & GroupProps
 
 /**
@@ -26,8 +26,8 @@ export type RobotProps = {
 export function Robot({
   connectedMotionGroup,
   getModel = defaultGetModel,
-  isGhost = false,
   flangeRef,
+  transparentColor,
   ...props
 }: RobotProps) {
   if (!connectedMotionGroup.dhParameters) {
@@ -42,8 +42,8 @@ export function Robot({
       modelFromController={connectedMotionGroup.modelFromController || ""}
       dhParameters={connectedMotionGroup.dhParameters}
       getModel={getModel}
-      isGhost={isGhost}
       flangeRef={flangeRef}
+      transparentColor={transparentColor}
       {...props}
     />
   )

package/src/components/robots/SupportedRobot.tsx

@@ -24,10 +24,10 @@ export type SupportedRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   modelFromController: string
   dhParameters: DHParameter[]
-  isGhost?: boolean
   flangeRef?: React.Ref<THREE.Group>
   getModel?: (modelFromController: string) => string
   postModelRender?: () => void
+  transparentColor?: string
 } & GroupProps
 
 export const SupportedRobot = externalizeComponent(
@@ -36,9 +36,9 @@ export const SupportedRobot = externalizeComponent(
     modelFromController,
     dhParameters,
     getModel = defaultGetModel,
-    isGhost = false,
     flangeRef,
     postModelRender,
+    transparentColor,
     ...props
   }: SupportedRobotProps) => {
     const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)
@@ -50,12 +50,12 @@ export const SupportedRobot = externalizeComponent(
     useEffect(() => {
       if (!robotGroup) return
 
-      if (isGhost) {
-        applyGhostStyle(robotGroup)
+      if (transparentColor) {
+        applyGhostStyle(robotGroup, transparentColor)
       } else {
         removeGhostStyle(robotGroup)
       }
-    }, [robotGroup, isGhost])
+    }, [robotGroup, transparentColor])
 
     const dhrobot = (
       <DHRobot

package/src/components/robots/ghostStyle.ts

@@ -1,37 +1,38 @@
-import type { Group, Object3D } from "three"
-import { Material, Mesh, MeshStandardMaterial } from "three"
+import * as THREE from "three"
 
-export const applyGhostStyle = (robot: Group) => {
+export const applyGhostStyle = (robot: THREE.Group, color: string) => {
   if (robot.userData.isGhost) return
 
   robot.traverse((obj) => {
-    if (obj instanceof Mesh) {
-      if (obj.material instanceof Material) {
-        obj.material.colorWrite = true
+    if (obj instanceof THREE.Mesh) {
+      if (obj.material instanceof THREE.Material) {
+        obj.material.colorWrite = false
       }
 
       // Create a clone of the mesh
       const depth = obj.clone()
       const ghost = obj.clone()
 
-      depth.material = new MeshStandardMaterial({
+      depth.material = new THREE.MeshStandardMaterial({
         depthTest: true,
         depthWrite: true,
         colorWrite: false,
         polygonOffset: true,
-        polygonOffsetFactor: 1,
+        polygonOffsetFactor: -1,
+        side: THREE.DoubleSide,
       })
       depth.userData.isGhost = true
 
       // Set the material for the ghost mesh
-      ghost.material = new MeshStandardMaterial({
-        color: "#D91433",
+      ghost.material = new THREE.MeshStandardMaterial({
+        color: color,
         opacity: 0.3,
         depthTest: true,
         depthWrite: false,
         transparent: true,
         polygonOffset: true,
-        polygonOffsetFactor: -1,
+        polygonOffsetFactor: -2,
+        side: THREE.DoubleSide,
       })
       ghost.userData.isGhost = true
 
@@ -45,16 +46,16 @@ export const applyGhostStyle = (robot: Group) => {
   robot.userData.isGhost = true
 }
 
-export const removeGhostStyle = (robot: Group) => {
+export const removeGhostStyle = (robot: THREE.Group) => {
   if (!robot.userData.isGhost) return
 
-  const objectsToRemove: Object3D[] = []
+  const objectsToRemove: THREE.Object3D[] = []
 
   robot.traverse((obj) => {
-    if (obj instanceof Mesh) {
+    if (obj instanceof THREE.Mesh) {
       if (obj.userData?.isGhost) {
         objectsToRemove.push(obj)
-      } else if (obj.material instanceof Material) {
+      } else if (obj.material instanceof THREE.Material) {
         obj.material.colorWrite = true
       }
     }
@@ -66,5 +67,5 @@ export const removeGhostStyle = (robot: Group) => {
     }
   })
 
-  robot.userData.isGhost = true
+  robot.userData.isGhost = false
 }