/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useState, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import * as THREE from "https://esm.sh/three@0.152.2"; function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function ThreeScene({ generatedCode }) { const mountRef = useRef(null); const sceneRef = useRef(null); const rendererRef = useRef(null); const cameraRef = useRef(null); const animationRef = useRef(null); const generatedAnimationRef = useRef(null); useEffect(() => { if (!mountRef.current) return; const width = mountRef.current.clientWidth; const height = 400; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setClearColor(0xf0f0f0, 1); mountRef.current.appendChild(renderer.domElement); camera.position.z = 5; // Add a light source const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(5, 5, 5); scene.add(pointLight); sceneRef.current = scene; rendererRef.current = renderer; cameraRef.current = camera; const animate = () => { animationRef.current = requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); return () => { cancelAnimationFrame(animationRef.current); if (generatedAnimationRef.current) { cancelAnimationFrame(generatedAnimationRef.current); } mountRef.current?.removeChild(renderer.domElement); renderer.dispose(); }; }, []); useEffect(() => { if (!sceneRef.current || !generatedCode) return; // Clear existing objects from the scene while(sceneRef.current.children.length > 0){ sceneRef.current.remove(sceneRef.current.children[0]); } // Add lights back to the scene const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); sceneRef.current.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(5, 5, 5); sceneRef.current.add(pointLight); const executeGeneratedCode = () => { try { // Cancel any existing generated animation loop if (generatedAnimationRef.current) { cancelAnimationFrame(generatedAnimationRef.current); } // Execute the generated code const scene = sceneRef.current; const camera = cameraRef.current; const renderer = rendererRef.current; // Create a sandbox environment for the generated code const sandbox = { scene, camera, renderer, THREE, requestAnimationFrame: (callback) => { generatedAnimationRef.current = requestAnimationFrame(callback); }, cancelAnimationFrame: (id) => { cancelAnimationFrame(id); } }; // Wrap the generated code in a function to create a new scope const wrappedCode = ` (function(scene, camera, renderer, THREE, requestAnimationFrame, cancelAnimationFrame) { ${generatedCode} })(scene, camera, renderer, THREE, requestAnimationFrame, cancelAnimationFrame); `; const executeCode = new Function(...Object.keys(sandbox), wrappedCode); executeCode(...Object.values(sandbox)); console.log("Three.js scene updated successfully"); } catch (error) { console.error("Error executing Three.js code:", error); throw error; // Re-throw the error to be caught by the outer try-catch } }; try { executeGeneratedCode(); } catch (error) { console.error("Error in executeGeneratedCode:", error); } // Cleanup function return () => { if (generatedAnimationRef.current) { cancelAnimationFrame(generatedAnimationRef.current); } }; }, [generatedCode]); return

; } function App() { const [prompt, setPrompt] = useState(""); const [output, setOutput] = useState([]); const [generatedCode, setGeneratedCode] = useState(""); const [isCodeVisible, setIsCodeVisible] = useState(false); const [isLoading, setIsLoading] = useState(false); const generateCode = useCallback(async (prompt) => { if (!prompt.trim()) { setGeneratedCode(""); return; } setIsLoading(true); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); setGeneratedCode(result.generatedCode); } catch (error) { setOutput([`Error generating code: ${error.message}`]); setGeneratedCode(""); } finally { setIsLoading(false); } }, []); const debouncedGenerateCode = useCallback(debounce(generateCode, 450), [generateCode]); const executeCode = useCallback(() => { if (!generatedCode) return; let output = []; try { const originalConsoleLog = console.log; console.log = (...args) => { const logString = args.map(arg => String(arg)).join(" "); output.push(extractMessage(logString)); }; // Execute the generated code const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); const executeGeneratedCode = new Function('scene', 'camera', 'renderer', 'THREE', generatedCode); executeGeneratedCode(scene, camera, renderer, THREE); console.log = originalConsoleLog; } catch (error) { output.push(`Error executing code: ${error.message}`); } setOutput(output); }, [generatedCode]); useEffect(() => { debouncedGenerateCode(prompt); }, [prompt, debouncedGenerateCode]); useEffect(() => { executeCode(); }, [executeCode]); const toggleCodeVisibility = () => { setIsCodeVisible(!isCodeVisible); }; return (

Three.js Scene Generator

Enter a prompt to generate a Three.js scene.

setPrompt(e.target.value)}
        placeholder="Enter your Three.js scene prompt here... (e.g., 'Create a rotating red cube')"
      />
      <ThreeScene generatedCode={generatedCode} />
      <div className="output">
        <h2>Console Output:</h2>
        {isLoading ? <div className="loading">Generating code...</div> : (
          output.map((log, index) => (
            <div key={index} className="log-entry">
              <span className="log-message">{log}</span>
            </div>
          ))
        )}
      </div>
      {generatedCode && (
        <div className="code-accordion">
          <button onClick={toggleCodeVisibility} className="accordion-toggle">
            {isCodeVisible ? "Hide Generated Code" : "View Generated Code"}
          </button>
          {isCodeVisible && (
            <pre className="generated-code">
              <code>{generatedCode}</code>
            </pre>
          )}
        </div>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

function stripCodeFences(code: string): string {
  return code.replace(/^```javascript\n|^```\n|```$/gm, "").trim();
}

function extractMessage(logOutput: string): string {
  try {
    const parsed = JSON.parse(logOutput);
    return parsed.message || logOutput;
  } catch (e) {
    return logOutput;
  }
}

const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

async function retryWithBackoff(fn: () => Promise<any>, maxRetries = 5) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      return await fn();
    } catch (error) {
      if (error.status === 429) {
        const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000;
        console.log(`Rate limited. Retrying in ${delay}ms...`);
        await sleep(delay);
        retries++;
      } else {
        throw error;
      }
    }
  }
  throw new Error("Max retries reached");
}

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/generate") {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();

const { prompt } = await request.json();

try {
      const completion = await retryWithBackoff(() =>
        openai.chat.completions.create({
          messages: [
            {
              role: "system",
              content:
                "You are a Three.js code generator. Generate valid JavaScript code using Three.js based on the given prompt, without any explanations or markdown code fences. Include console.log statements at the end of the code to output the results of important operations or final values. Do not wrap the code in ```javascript or ``` tags. Do not use import statements. The variables 'scene', 'camera', 'renderer', and 'THREE' are available in the code environment. Use these variables directly in your generated code. Focus on creating 3D scenes, geometries, materials, and animations. If you need an animation loop, use the provided requestAnimationFrame and cancelAnimationFrame functions instead of the global ones.",
            },
            { role: "user", content: prompt },
          ],
          model: "gpt-4o-mini",
          max_tokens: 500,
        })
      );

let generatedCode = stripCodeFences(completion.choices[0].message.content);

return new Response(JSON.stringify({ generatedCode }), {
        headers: { "Content-Type": "application/json" },
      });
    } catch (error) {
      console.error("Error generating code:", error);
      return new Response(JSON.stringify({ error: "Failed to generate code. Please try again later." }), {
        status: 500,
        headers: { "Content-Type": "application/json" },
      });
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>Three.js Scene Generator</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    }
  );
}

invincibleAmberKiwi