adding items

packages/viewer/src/components/renderers/item/item-renderer.tsx

@@ -2,7 +2,8 @@ import { type AnyNodeId, type ItemNode, useRegistry, useScene } from '@pascal-ap
 import { Clone } from '@react-three/drei/core/Clone'
 import { useGLTF } from '@react-three/drei/core/Gltf'
 import { Suspense, useEffect, useRef } from 'react'
-import type { Group } from 'three'
+import type { Group, Mesh } from 'three'
+import { MeshStandardNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 
 export const ItemRenderer = ({ node }: { node: ItemNode }) => {
@@ -33,6 +34,20 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
     useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
   }, [node.parentId])
 
+  useEffect(() => {
+    scene.traverse((child) => {
+      if ((child as Mesh).isMesh) {
+        child.castShadow = true
+        child.receiveShadow = true
+        child.material = new MeshStandardNodeMaterial({
+          color: 0xffffff,
+          roughness: 0.8,
+          metalness: 0,
+        })
+      }
+    })
+  }, [scene])
+
   return (
     <Clone
       object={scene}

packages/viewer/src/components/viewer/index.tsx

@@ -32,6 +32,7 @@ const Viewer: React.FC<ViewerProps> = ({ children }) => {
     >
       <color attach="background" args={['#ececec']} />
 
+      <directionalLight position={[10, 10, 5]} intensity={1.5} castShadow />
       <Environment preset="sunset" />
       <Bvh>
         <SceneRenderer />