Improve consistency and organization of examples for AI learning
- Add `.gitignore` files to all 19 examples (`node_modules/`, `dist/`) - Replace custom `log` objects with standard `console` methods - Add `ontoolcancelled` handler to all `basic-server-*` examples - Add host styling integration (`applyDocumentTheme`, `applyHostFonts`, `applyHostStyleVariables`) to non-React `basic-server-*` examples - Add section headers for better code organization in feature examples - Update READMEs with Build System section explaining single-file bundling These changes make examples more consistent and easier to adapt. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
6166242136
commit
4140565b77
1 changed files with 449 additions and 363 deletions
|
|
@ -12,11 +12,21 @@ import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
|
|||
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
|
||||
import type { WidgetProps } from "./mcp-app-wrapper.tsx";
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
// =============================================================================
|
||||
|
||||
interface ThreeJSToolInput {
|
||||
code?: string;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
type ThreeJSAppProps = WidgetProps<ThreeJSToolInput>;
|
||||
|
||||
// =============================================================================
|
||||
// Constants
|
||||
// =============================================================================
|
||||
|
||||
// Default demo code shown when no code is provided
|
||||
const DEFAULT_THREEJS_CODE = `const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
|
||||
|
|
@ -52,7 +62,9 @@ function animate() {
|
|||
}
|
||||
animate();`;
|
||||
|
||||
type ThreeJSAppProps = WidgetProps<ThreeJSToolInput>;
|
||||
// =============================================================================
|
||||
// Streaming Preview
|
||||
// =============================================================================
|
||||
|
||||
const SHIMMER_STYLE = `
|
||||
@keyframes shimmer {
|
||||
|
|
@ -119,7 +131,10 @@ function LoadingShimmer({ height, code }: { height: number; code?: string }) {
|
|||
);
|
||||
}
|
||||
|
||||
// Context object passed to user code
|
||||
// =============================================================================
|
||||
// Three.js Execution
|
||||
// =============================================================================
|
||||
|
||||
const threeContext = {
|
||||
THREE,
|
||||
OrbitControls,
|
||||
|
|
@ -145,6 +160,10 @@ async function executeThreeCode(
|
|||
await fn(threeContext, canvas, width, height);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Main Component
|
||||
// =============================================================================
|
||||
|
||||
export default function ThreeJSApp({
|
||||
toolInputs,
|
||||
toolInputsPartial,
|
||||
|
|
|
|||
Loading…
Reference in a new issue