@chocodrop/mcp 0.1.0-alpha.0

package/runtime/site/examples/react-three-fiber/AdvancedExample.jsx

@@ -0,0 +1,338 @@
+import React, { useRef, useEffect, useState } from 'react';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { SceneManager, CommandUI, createChocoDrop } from 'chocodrop';
+
+/**
+ * React Three.js Scene with ChocoDrop integration
+ * This example demonstrates how to integrate ChocoDrop with React
+*/
+const ChocoDropScene = () => {
+  const mountRef = useRef(null);
+  const sceneRef = useRef(null);
+  const rendererRef = useRef(null);
+  const cameraRef = useRef(null);
+  const controlsRef = useRef(null);
+  const sceneManagerRef = useRef(null);
+  const commandUIRef = useRef(null);
+  const animationIdRef = useRef(null);
+  
+  const [isReady, setIsReady] = useState(false);
+  const [stats, setStats] = useState({
+    objects: 0,
+    commands: 0
+  });
+
+  useEffect(() => {
+    if (!mountRef.current) return;
+
+    // Scene setup
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      75, 
+      window.innerWidth / window.innerHeight, 
+      0.1, 
+      1000
+    );
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    renderer.setClearColor(0x87ceeb);
+    
+    mountRef.current.appendChild(renderer.domElement);
+    
+    // Environment setup
+    scene.fog = new THREE.Fog(0x87ceeb, 50, 200);
+    
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+    scene.add(ambientLight);
+    
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(50, 50, 50);
+    directionalLight.castShadow = true;
+    scene.add(directionalLight);
+    
+    // Ground
+    const groundGeometry = new THREE.PlaneGeometry(200, 200);
+    const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x90ee90 });
+    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+    
+    // Camera
+    camera.position.set(0, 10, 20);
+    
+    // Controls
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    
+    // ChocoDrop Integration
+    const sceneManager = new SceneManager(scene, {
+      camera,
+      renderer, // rendererを渡す
+      serverUrl: 'http://localhost:3011',
+      showLocationIndicator: true,
+      indicatorDuration: 2000,
+      enableMouseInteraction: true // マウス操作を明示的に有効化（オプション）
+    });
+    
+    const commandUI = new CommandUI({
+      sceneManager,
+      activationKey: '@',
+      position: 'bottom-right',
+      onControlsToggle: (disabled) => {
+        controls.enabled = !disabled;
+      }
+    });
+    
+    // Store refs
+    sceneRef.current = scene;
+    rendererRef.current = renderer;
+    cameraRef.current = camera;
+    controlsRef.current = controls;
+    sceneManagerRef.current = sceneManager;
+    commandUIRef.current = commandUI;
+    
+    // Animation loop
+    const animate = () => {
+      animationIdRef.current = requestAnimationFrame(animate);
+      
+      controls.update();
+      renderer.render(scene, camera);
+      
+      // Update stats
+      const objects = sceneManager.getSpawnedObjects();
+      const commands = sceneManager.getCommandHistory();
+      setStats({
+        objects: objects.length,
+        commands: commands.length
+      });
+    };
+    
+    animate();
+    setIsReady(true);
+    
+    // Handle window resize
+    const handleResize = () => {
+      if (!camera || !renderer) return;
+      
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+    
+    window.addEventListener('resize', handleResize);
+    
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+      
+      if (commandUI) {
+        commandUI.dispose();
+      }
+      
+      if (sceneManager) {
+        sceneManager.dispose();
+      }
+      
+      if (controls) {
+        controls.dispose();
+      }
+      
+      if (renderer) {
+        renderer.dispose();
+      }
+      
+      if (mountRef.current && renderer) {
+        mountRef.current.removeChild(renderer.domElement);
+      }
+    };
+  }, []);
+
+  const clearAllObjects = () => {
+    if (sceneManagerRef.current) {
+      sceneManagerRef.current.clearAll();
+    }
+  };
+
+  const showCommandHistory = () => {
+    if (commandUIRef.current) {
+      commandUIRef.current.showHistory();
+    }
+  };
+
+  const showExamples = () => {
+    if (commandUIRef.current) {
+      commandUIRef.current.showExamples();
+    }
+  };
+
+  return (
+    <div className="live-command-scene">
+      {/* Control Panel */}
+      <div className="control-panel" style={{
+        position: 'fixed',
+        top: '10px',
+        left: '10px',
+        background: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        padding: '15px',
+        borderRadius: '8px',
+        fontFamily: 'monospace',
+        fontSize: '14px',
+        zIndex: 100
+      }}>
+        <h3 style={{ margin: '0 0 10px 0', color: '#4a90e2' }}>
+          🧪 ChocoDrop
+        </h3>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <strong>Status:</strong> {isReady ? '🟢 Ready' : '🟡 Loading...'}
+        </div>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <strong>Objects:</strong> {stats.objects}<br/>
+          <strong>Commands:</strong> {stats.commands}
+        </div>
+        
+        <div style={{ marginBottom: '15px' }}>
+          <strong>Activation:</strong> Press <code>@</code>
+        </div>
+        
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+          <button
+            onClick={showExamples}
+            style={{
+              padding: '8px',
+              background: '#4a90e2',
+              border: 'none',
+              borderRadius: '4px',
+              color: 'white',
+              cursor: 'pointer',
+              fontSize: '12px'
+            }}
+          >
+            Show Examples
+          </button>
+          
+          <button
+            onClick={showCommandHistory}
+            style={{
+              padding: '8px',
+              background: '#95a5a6',
+              border: 'none',
+              borderRadius: '4px',
+              color: 'white',
+              cursor: 'pointer',
+              fontSize: '12px'
+            }}
+          >
+            Show History
+          </button>
+          
+          <button
+            onClick={clearAllObjects}
+            style={{
+              padding: '8px',
+              background: '#e74c3c',
+              border: 'none',
+              borderRadius: '4px',
+              color: 'white',
+              cursor: 'pointer',
+              fontSize: '12px'
+            }}
+          >
+            Clear All
+          </button>
+        </div>
+      </div>
+      
+      {/* Three.js mount point */}
+      <div 
+        ref={mountRef} 
+        style={{ 
+          width: '100vw', 
+          height: '100vh',
+          overflow: 'hidden'
+        }} 
+      />
+    </div>
+  );
+};
+
+/**
+ * Main App Component
+ */
+const App = () => {
+  return (
+    <div className="app">
+      <ChocoDropScene />
+      
+      {/* Instructions overlay */}
+      <div style={{
+        position: 'fixed',
+        bottom: '10px',
+        left: '10px',
+        background: 'rgba(0, 0, 0, 0.7)',
+        color: 'white',
+        padding: '10px',
+        borderRadius: '5px',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '12px',
+        maxWidth: '300px'
+      }}>
+        <strong>使用方法:</strong><br/>
+        • <code>@</code> キーでコマンド入力画面を表示<br/>
+        • 例: 「右上にドラゴンを作って」<br/>
+        • <code>Escape</code> でUI非表示<br/>
+        • マウスでカメラ操作
+      </div>
+    </div>
+  );
+};
+
+export default App;
+
+// Usage instructions for package.json scripts:
+/*
+{
+  "name": "live-command-react-example",
+  "version": "1.0.0",
+  "type": "module",
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "three": "^0.158.0",
+    "chocodrop": "file:../",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+*/
+
+// Vite configuration (vite.config.js):
+/*
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000
+  }
+});
+*/

package/runtime/site/examples/react-three-fiber/App.jsx

@@ -0,0 +1,97 @@
+import React, { useRef, useEffect } from 'react';
+import { Canvas, useThree } from '@react-three/fiber';
+import { OrbitControls, Box, Sphere } from '@react-three/drei';
+import { createChocoDrop } from 'chocodrop';
+
+/**
+ * ChocoDrop統合コンポーネント
+ * React Three Fiberのシーンに ChocoDrop を統合
+ */
+function ChocoDropIntegration() {
+  const { scene, camera, gl } = useThree();
+  const chocoDropRef = useRef(null);
+  const controlsRef = useRef(null);
+
+  useEffect(() => {
+    // ChocoDrop初期化
+    const chocoDrop = createChocoDrop(scene, {
+      camera,
+      renderer: gl,
+      serverUrl: 'http://localhost:3011', // 省略可能（自動検出）
+      onControlsToggle: (disabled) => {
+        // UI開閉時にOrbitControlsを制御
+        if (controlsRef.current) {
+          controlsRef.current.enabled = !disabled;
+        }
+      }
+    });
+
+    chocoDropRef.current = chocoDrop;
+
+    // クリーンアップ
+    return () => {
+      chocoDrop.dispose();
+    };
+  }, [scene, camera, gl]);
+
+  return (
+    <>
+      {/* React Three Fiberのコントロール */}
+      <OrbitControls
+        ref={controlsRef}
+        enablePan={true}
+        enableZoom={true}
+        enableRotate={true}
+      />
+
+      {/* 既存の3Dオブジェクト */}
+      <ambientLight intensity={0.5} />
+      <pointLight position={[10, 10, 10]} />
+
+      <Box position={[-2, 0, 0]} onClick={() => console.log('Box clicked')}>
+        <meshStandardMaterial color="orange" />
+      </Box>
+
+      <Sphere position={[2, 0, 0]}>
+        <meshStandardMaterial color="hotpink" />
+      </Sphere>
+    </>
+  );
+}
+
+/**
+ * メインアプリケーション
+ */
+function App() {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Canvas camera={{ position: [0, 0, 5] }}>
+        <ChocoDropIntegration />
+      </Canvas>
+
+      {/* 使用方法ガイド */}
+      <div style={{
+        position: 'fixed',
+        top: 10,
+        left: 10,
+        color: 'white',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        padding: '10px',
+        borderRadius: '5px',
+        fontSize: '14px',
+        zIndex: 100
+      }}>
+        <h3>ChocoDrop + React Three Fiber</h3>
+        <p><strong>@キー</strong> - コマンドUI起動</p>
+        <p><strong>使用例:</strong></p>
+        <ul>
+          <li>"ドラゴンを右上に作って"</li>
+          <li>"桜を中央に配置"</li>
+          <li>"青い猫を左下に"</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/runtime/site/examples/react-three-fiber/README.md

@@ -0,0 +1,294 @@
+# React Three Fiber + ChocoDrop
+
+React Three Fiberプロジェクトに ChocoDrop を統合する例です。
+
+## 🚀 セットアップ
+
+### 1. 依存関係インストール
+
+```bash
+npm install react react-dom
+npm install @react-three/fiber @react-three/drei three
+npm install chocodrop
+```
+
+### 2. 開発環境
+
+```bash
+npm install -D vite @vitejs/plugin-react
+```
+
+### 3. Vite設定 (vite.config.js)
+
+```javascript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    include: ['chocodrop']
+  }
+});
+```
+
+## 🎮 使用方法
+
+### 基本統合
+
+```jsx
+import { useThree } from '@react-three/fiber';
+import { createChocoDrop } from 'chocodrop';
+
+function ChocoDropIntegration() {
+  const { scene, camera, gl } = useThree();
+
+  useEffect(() => {
+    const chocoDrop = createChocoDrop(scene, {
+      camera,
+      renderer: gl,
+      onControlsToggle: (disabled) => {
+        // OrbitControls制御
+        controlsRef.current.enabled = !disabled;
+      }
+    });
+
+    return () => chocoDrop.dispose();
+  }, [scene, camera, gl]);
+
+  return <OrbitControls ref={controlsRef} />;
+}
+```
+
+### フック化
+
+```jsx
+import { useChocoDrop } from './hooks/useChocoDrop';
+
+function Scene() {
+  const chocoDropRef = useChocoDrop({
+    serverUrl: 'http://localhost:3011'
+  });
+
+  const handleGenerateImage = async () => {
+    if (chocoDropRef.current) {
+      await chocoDropRef.current.client.generateImage('beautiful landscape');
+    }
+  };
+
+  return (
+    <>
+      <OrbitControls />
+      <button onClick={handleGenerateImage}>Generate Landscape</button>
+    </>
+  );
+}
+```
+
+## 🔧 カスタムフック例
+
+### useChocoDrop.js
+
+```javascript
+import { useRef, useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+import { createChocoDrop } from 'chocodrop';
+
+export function useChocoDrop(options = {}) {
+  const { scene, camera, gl } = useThree();
+  const chocoDropRef = useRef(null);
+  const controlsRef = useRef(null);
+
+  useEffect(() => {
+    const chocoDrop = createChocoDrop(scene, {
+      camera,
+      renderer: gl,
+      onControlsToggle: (disabled) => {
+        if (controlsRef.current) {
+          controlsRef.current.enabled = !disabled;
+        }
+      },
+      ...options
+    });
+
+    chocoDropRef.current = chocoDrop;
+
+    return () => {
+      chocoDrop.dispose();
+    };
+  }, [scene, camera, gl]);
+
+  return { chocoDropRef, controlsRef };
+}
+```
+
+## 🎨 統合パターン
+
+### 1. 基本統合
+
+```jsx
+function App() {
+  return (
+    <Canvas>
+      <ChocoDropIntegration />
+      <Box position={[0, 0, 0]} />
+    </Canvas>
+  );
+}
+```
+
+### 2. State管理統合
+
+```jsx
+import { atom, useAtom } from 'jotai';
+
+const chocoDropAtom = atom(null);
+
+function Scene() {
+  const [chocoDrop, setChocoDrop] = useAtom(chocoDropAtom);
+  const { scene, camera, gl } = useThree();
+
+  useEffect(() => {
+    const instance = createChocoDrop(scene, { camera, renderer: gl });
+    setChocoDrop(instance);
+    return () => instance.dispose();
+  }, []);
+
+  return <OrbitControls />;
+}
+```
+
+### 3. コンテキスト統合
+
+```jsx
+const ChocoDropContext = createContext(null);
+
+export function ChocoDropProvider({ children }) {
+  const [chocoDrop, setChocoDrop] = useState(null);
+
+  return (
+    <ChocoDropContext.Provider value={chocoDrop}>
+      <Canvas>
+        <ChocoDropSetup onReady={setChocoDrop} />
+        {children}
+      </Canvas>
+    </ChocoDropContext.Provider>
+  );
+}
+
+export function useChocoDropContext() {
+  return useContext(ChocoDropContext);
+}
+```
+
+## 🎭 イベント処理
+
+### UI状態管理
+
+```jsx
+function ChocoDropUI() {
+  const [isUIOpen, setIsUIOpen] = useState(false);
+  const chocoDrop = useChocoDrop({
+    onControlsToggle: (disabled) => {
+      setIsUIOpen(disabled);
+    }
+  });
+
+  return (
+    <>
+      {isUIOpen && (
+        <div className="ui-overlay">
+          ChocoDrop UI is active
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+### カスタムコマンド
+
+```jsx
+function CustomCommands() {
+  const { chocoDropRef } = useChocoDrop();
+
+  const handleCustomCommand = async (command) => {
+    if (chocoDropRef.current) {
+      await chocoDropRef.current.client.executeCommand(command);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={() => handleCustomCommand('ドラゴンを作って')}>
+        ドラゴン生成
+      </button>
+      <button onClick={() => handleCustomCommand('全て削除')}>
+        全削除
+      </button>
+    </div>
+  );
+}
+```
+
+## 🏗️ TypeScript 対応
+
+### 型定義
+
+```typescript
+import { RefObject } from 'react';
+import { Object3D } from 'three';
+
+interface ChocoDropInstance {
+  client: ChocoDropClient;
+  sceneManager: SceneManager;
+  ui: CommandUI;
+  dispose: () => void;
+}
+
+interface UseChocoDropReturn {
+  chocoDropRef: RefObject<ChocoDropInstance | null>;
+  controlsRef: RefObject<any>;
+}
+
+export function useChocoDrop(options?: ChocoDropOptions): UseChocoDropReturn;
+```
+
+## 🔧 トラブルシューティング
+
+### よくある問題
+
+1. **レンダラーの取得に失敗**
+```jsx
+// ✅ 正しい
+const { gl } = useThree();
+
+// ❌ 間違い
+const renderer = new THREE.WebGLRenderer();
+```
+
+2. **コントロールの競合**
+```jsx
+// ✅ 正しい
+onControlsToggle: (disabled) => {
+  controlsRef.current.enabled = !disabled;
+}
+
+// ❌ 間違い - コントロール無効化なし
+onControlsToggle: () => {}
+```
+
+3. **依存関係の問題**
+```bash
+# Three.jsバージョン確認
+npm ls three
+
+# React Three Fiber互換性確認
+npm ls @react-three/fiber
+```
+
+## 📚 関連リンク
+
+- [React Three Fiber 公式](https://docs.pmnd.rs/react-three-fiber)
+- [Three.js Drei 公式](https://github.com/pmndrs/drei)
+- [ChocoDrop API](../docs/API.md)