@modelcontextprotocol/server-threejs 0.4.1 → 1.0.0

package/README.md

@@ -4,6 +4,45 @@
 
 Interactive 3D scene renderer using Three.js. Demonstrates streaming code preview and full MCP App integration.
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "threejs": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "--silent",
+        "--registry=https://registry.npmjs.org/",
+        "@modelcontextprotocol/server-threejs",
+        "--stdio"
+      ]
+    }
+  }
+}
+```
+
+### Local Development
+
+To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path):
+
+```json
+{
+  "mcpServers": {
+    "threejs": {
+      "command": "bash",
+      "args": [
+        "-c",
+        "cd ~/code/ext-apps/examples/threejs-server && npm run build >&2 && node dist/index.js --stdio"
+      ]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Interactive 3D Rendering**: Execute JavaScript code to create and animate Three.js scenes
@@ -108,3 +147,31 @@ React component that:
 - Displays streaming preview from `toolInputsPartial.code` as code arrives
 - Executes final code from `toolInputs.code` when complete
 - Renders to a pre-created canvas with configurable height
+
+## Performance
+
+### Visibility-Based Pause
+
+Animation automatically pauses when the view scrolls out of view:
+
+- Uses `IntersectionObserver` to track visibility (browser-native, no polling)
+- Wraps `requestAnimationFrame` to skip frames when not visible
+- Animation loop stops completely → zero CPU usage while hidden
+- Queued callbacks resume instantly when scrolled back into view
+
+This is transparent to user code - just use `requestAnimationFrame` normally.
+
+### Transparent Background
+
+Supports alpha transparency for seamless host UI integration:
+
+```javascript
+const renderer = new THREE.WebGLRenderer({
+  canvas,
+  antialias: true,
+  alpha: true,
+});
+renderer.setClearColor(0x000000, 0); // Fully transparent
+```
+
+This is the default - 3D objects composite directly over the host background.