Add Custom 3D Model Viewer Component

components/Model Viewer 3D/README.md

@@ -0,0 +1,18 @@
+# 3D Model Viewer
+
+A 3D viewer component using React Three Fiber and Drei.
+
+## Features
+- **OBJ Support**: Load OBJ models from external URLs or Retool Storage.
+- **Controls**: Smooth zooming and rotation using `CameraControls`.
+- **Customizable**: Toggle grid visibility.
+
+## Setup In Retool
+1. Drag a 'Custom Component' into your canvas.
+2. Use the `modelUrl` property to specify your OBJ file.
+
+## Dependencies
+- `three`
+- `@react-three/fiber`
+- `@react-three/drei`
+- `@tryretool/custom-component-support`

components/Model Viewer 3D/metadata.json

@@ -0,0 +1,10 @@
+{
+  "id": "model-viewer-3d",
+  "title": "Model Viewer 3D",
+  "author": "@smeng9",
+  "shortDescription": "A 3D viewer component using React Three Fiber and Drei.",
+  "tags": [
+    "UI Components",
+    "Custom"
+  ]
+}

components/Model Viewer 3D/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "my-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
+    "@tryretool/custom-component-support": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.183.2"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "npx retool-ccl dev",
+    "deploy": "npx retool-ccl deploy",
+    "test": "vitest"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "postcss-modules": "^6.0.0",
+    "prettier": "^3.0.3",
+    "vitest": "^4.0.17"
+  },
+  "retoolCustomComponentLibraryConfig": {
+    "name": "ModelViewer3D",
+    "label": "Model Viewer 3D",
+    "description": "A 3D viewer component using React Three Fiber and Drei.",
+    "entryPoint": "src/index.tsx",
+    "outputPath": "dist"
+  }
+}

components/Model Viewer 3D/src/ModelViewer3D.tsx

@@ -0,0 +1,53 @@
+import { Suspense } from 'react'
+import { Canvas, useLoader } from '@react-three/fiber'
+import { CameraControls, Grid, Stage } from '@react-three/drei'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
+import { Retool } from '@tryretool/custom-component-support'
+
+export const ModelViewer3D = () => {
+  const [modelUrl] = Retool.useStateString({
+    name: 'modelUrl',
+    label: 'Model URL',
+    description: 'URL to an OBJ file. Please add CORS headers to Retool Storage URLs due to CORS restrictions.',
+    initialValue: 'https://cors-anywhere.herokuapp.com/https://raw.githubusercontent.com/spdegabrielle/teapot/refs/heads/master/teapot.obj'
+  })
+
+  const [showGrid] = Retool.useStateBoolean({
+    name: 'showGrid',
+    label: 'Show Grid',
+    initialValue: false
+  })
+
+  Retool.useComponentSettings({
+    defaultWidth: 6,
+    defaultHeight: 40,
+  })
+
+  const obj = useLoader(OBJLoader, modelUrl)
+
+  return (
+    <Canvas
+      camera={{ position: [5, 5, 5] }}
+    >
+      <Suspense fallback={null}>
+        <Stage adjustCamera>
+          <primitive object={obj} />
+          <CameraControls
+            minDistance={1}
+            maxDistance={100}
+          />
+          {showGrid && (
+            <Grid
+              infiniteGrid
+              fadeDistance={50}
+              fadeStrength={5}
+              fadeFrom={0}
+              sectionColor="lightgrey"
+              cellColor="grey"
+            />
+          )}
+        </Stage>
+      </Suspense>
+    </Canvas>
+  )
+}

components/Model Viewer 3D/src/index.tsx

@@ -0,0 +1 @@
+export { ModelViewer3D } from './ModelViewer3D';