// App.jsx import React, { useEffect, useRef, useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // // This code can be used in any JS project by simply importing this class and using it. ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('chat'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); const cameraRef = useRef(null); const targetCameraZRef = useRef(5); const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches); const [showUI, setShowUI] = useState(true); const [shapeParams, setShapeParams] = useState({ type: 'cube', segments: 1, zoom: 1, // Add zoom factor rotationX: 0, rotationY: 0, rotationSpeed: 0.02, autoRotate: false, scale: 1, wireframe: true, pattern: 'single', // single, circular, grid count: 1, // number of shapes in pattern spacing: 2, // spacing between shapes showConnections: false, // show lines between shapes color: 0x00ffff, // base color for shapes colorVariation: 0.2, // amount of random color variation distribution: 'uniform', // uniform, gaussian, exponential groupRotation: false, // enable group rotation groupRotationSpeed: 0.1 // group rotation speed (revolutions per second) }); const animationRef = useRef({ lastTime: null, totalRotation: 0, groupRotationStartTime: null, currentGroupRotation: 0, targetGroupRotation: 0 }); const sceneRef = useRef(null); const shapeRef = useRef(null); // Handle system dark mode changes useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const handleChange = (e) => setIsDarkMode(e.matches); mediaQuery.addEventListener('change', handleChange); return () => mediaQuery.removeEventListener('change', handleChange); }, []); // Store rotation values in a ref to persist across renders const rotationStateRef = useRef({ autoRotationX: 0, autoRotationY: 0 }); useEffect(() => { // Scene setup sceneRef.current = new THREE.Scene(); const scene = sceneRef.current; const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: "high-performance", precision: "highp" }); // Handle responsive renderer const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); }; handleResize(); window.addEventListener('resize', handleResize); mountRef.current.appendChild(renderer.domElement); // Create initial geometry based on type const createGeometry = (type, segments) => { switch (type) { case 'sphere': return new THREE.SphereGeometry(1, segments * 4, segments * 4); case 'torus': return new THREE.TorusGeometry(1, 0.4, segments * 4, segments * 6); case 'octahedron': return new THREE.OctahedronGeometry(1, segments); case 'icosahedron': return new THREE.IcosahedronGeometry(1, segments); case 'dodecahedron': return new THREE.DodecahedronGeometry(1, segments); case 'tetrahedron': return new THREE.TetrahedronGeometry(1, segments); case 'cube': default: return new THREE.BoxGeometry(1, 1, 1, segments, segments, segments); } }; const createShapes = () => { const shapes = []; const positions = []; const connectionLines = []; // Pre-calculate angles for symmetrical distribution const angleStep = (Math.PI * 2) / shapeParams.count; const angleOffset = -Math.PI / 2; // Start from top const getPatternPosition = (index, total) => { const basePosition = (() => { switch(shapeParams.pattern) { case 'circular': // Ensure perfect circular symmetry const angleOffset = -Math.PI / 2; // Start from top const angle = angleOffset + (index / total) * Math.PI * 2; const radius = shapeParams.spacing; return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, z: 0 }; case 'grid': // Ensure grid symmetry const size = Math.ceil(Math.sqrt(total)); const halfSize = (size - 1) / 2; const row = Math.floor(index / size); const col = index % size; return { x: (col - halfSize) * shapeParams.spacing, y: (row - halfSize) * shapeParams.spacing, z: 0 }; default: return { x: 0, y: 0, z: 0 }; } })(); // Apply distribution const applyDistribution = (value) => { const angle = angleOffset + (index * angleStep); switch(shapeParams.distribution) { case 'gaussian': // Symmetrical gaussian distribution based on angle const gaussianFactor = Math.cos(angle * 2) * 0.3; return value * (1 + gaussianFactor); case 'exponential': // Symmetrical exponential distribution based on angle const expFactor = Math.abs(Math.sin(angle * 2)) * 0.3; return value * (1 + expFactor); default: // uniform return value; } }; return { x: applyDistribution(basePosition.x), y: applyDistribution(basePosition.y), z: applyDistribution(basePosition.z) }; }; for(let i = 0; i < shapeParams.count; i++) { const geometry = createGeometry(shapeParams.type, shapeParams.segments); // Create color variation const baseColor = new THREE.Color(shapeParams.color); const variation = (Math.random() - 0.5) * shapeParams.colorVariation; baseColor.offsetHSL(variation, variation, variation); const material = new THREE.MeshBasicMaterial({ color: baseColor, wireframe: shapeParams.wireframe }); const shape = new THREE.Mesh(geometry, material); const position = getPatternPosition(i, shapeParams.count); shape.position.set(position.x, position.y, position.z); shape.scale.setScalar(shapeParams.scale); shape.rotation.x = rotationStateRef.current.autoRotationX + (shapeParams.rotationX * Math.PI * 2); shape.rotation.y = rotationStateRef.current.autoRotationY + (shapeParams.rotationY * Math.PI * 2); shapes.push(shape); positions.push(position); scene.add(shape); } // Create connections if enabled if(shapeParams.showConnections && shapeParams.count > 1) { const lineMaterial = new THREE.LineBasicMaterial({ color: isDarkMode ? 0x444444 : 0xcccccc }); for(let i = 0; i < positions.length; i++) { for(let j = i + 1; j < positions.length; j++) { const geometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(positions[i].x, positions[i].y, positions[i].z), new THREE.Vector3(positions[j].x, positions[j].y, positions[j].z) ]); const line = new THREE.Line(geometry, lineMaterial); connectionLines.push(line); scene.add(line); } } } return { shapes, connectionLines }; }; const { shapes, connectionLines } = createShapes(); shapeRef.current = { shapes, connectionLines }; cameraRef.current = camera; // Calculate required camera distance const calculateRequiredDistance = () => { const baseDistance = 5; const patternMultiplier = shapeParams.pattern === 'single' ? 1 : Math.sqrt(shapeParams.count) * (shapeParams.spacing / 2); const scaleMultiplier = shapeParams.scale; return baseDistance * Math.max(1, patternMultiplier * scaleMultiplier); }; targetCameraZRef.current = calculateRequiredDistance(); camera.position.z = targetCameraZRef.current; // Animation const animate = () => { // Smooth camera transition if (cameraRef.current) { const currentZ = cameraRef.current.position.z; const targetZ = targetCameraZRef.current; const distance = targetZ - currentZ; if (Math.abs(distance) > 0.01) { cameraRef.current.position.z += distance * 0.05; } } const animationId = requestAnimationFrame(animate); if (typeof animationRef.current === 'object') { animationRef.current.animationId = animationId; } if (shapeRef.current && shapeRef.current.shapes) { const manualX = shapeParams.rotationX * Math.PI * 2; const manualY = shapeParams.rotationY * Math.PI * 2; const currentTime = Date.now(); // Ensure animationRef.current is an object if (typeof animationRef.current !== 'object' || animationRef.current === null) { animationRef.current = { lastTime: null, totalRotation: 0, groupRotationStartTime: null }; } // Handle group rotation start/stop if (shapeParams.groupRotation && !animationRef.current.groupRotationStartTime) { animationRef.current.groupRotationStartTime = currentTime; } else if (!shapeParams.groupRotation) { animationRef.current.groupRotationStartTime = null; } // Smooth group rotation calculation const targetRotation = ((currentTime - (animationRef.current.groupRotationStartTime || currentTime)) * (shapeParams.groupRotation ? shapeParams.groupRotationSpeed : 0.02) * 0.001) % (Math.PI * 2); // Lerp current rotation towards target animationRef.current.currentGroupRotation += (targetRotation - animationRef.current.currentGroupRotation) * 0.1; const groupRotationAngle = animationRef.current.currentGroupRotation; shapeRef.current.shapes.forEach((shape, index) => { if (shapeParams.groupRotation) { // Create rotation matrix for smoother rotation const rotationMatrix = new THREE.Matrix4(); const radius = Math.sqrt( shape.position.x * shape.position.x + shape.position.y * shape.position.y ); const currentAngle = Math.atan2(shape.position.y, shape.position.x); const newAngle = currentAngle + groupRotationAngle; // Apply matrix transformation for smoother rotation rotationMatrix.makeRotationZ(groupRotationAngle); shape.position.applyMatrix4(rotationMatrix); // Maintain consistent radius const currentRadius = Math.sqrt( shape.position.x * shape.position.x + shape.position.y * shape.position.y ); if (currentRadius !== 0) { const scale = radius / currentRadius; shape.position.x *= scale; shape.position.y *= scale; } } // Individual rotation if (shapeParams.autoRotate) { shape.rotation.x = manualX + (currentTime * shapeParams.rotationSpeed * 0.003); shape.rotation.y = manualY + (currentTime * shapeParams.rotationSpeed * 0.003); } else { shape.rotation.x = manualX; shape.rotation.y = manualY; } }); // Update connection lines if they exist if (shapeRef.current.connectionLines.length > 0) { let lineIndex = 0; for (let i = 0; i < shapeRef.current.shapes.length; i++) { for (let j = i + 1; j < shapeRef.current.shapes.length; j++) { const line = shapeRef.current.connectionLines[lineIndex]; const positions = line.geometry.attributes.position.array; const shape1 = shapeRef.current.shapes[i]; const shape2 = shapeRef.current.shapes[j]; positions[0] = shape1.position.x; positions[1] = shape1.position.y; positions[2] = shape1.position.z; positions[3] = shape2.position.x; positions[4] = shape2.position.y; positions[5] = shape2.position.z; line.geometry.attributes.position.needsUpdate = true; lineIndex++; } } } } renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); mountRef.current?.removeChild(renderer.domElement); shapeRef.current.shapes.forEach(shape => { shape.geometry.dispose(); shape.material.dispose(); }); shapeRef.current.connectionLines.forEach(line => { line.geometry.dispose(); line.material.dispose(); }); renderer.dispose(); }; }, [isDarkMode, shapeParams.type, shapeParams.segments, shapeParams.wireframe, shapeParams.scale, shapeParams.rotationX, shapeParams.rotationY, shapeParams.pattern, shapeParams.count, shapeParams.spacing, shapeParams.showConnections, shapeParams.zoom]); // Update camera position when pattern parameters change useEffect(() => { if (cameraRef.current) { const baseDistance = 5; const patternMultiplier = shapeParams.pattern === 'single' ? 1 : Math.sqrt(shapeParams.count) * (shapeParams.spacing / 2); const scaleMultiplier = shapeParams.scale; const zoomMultiplier = shapeParams.zoom; targetCameraZRef.current = baseDistance * Math.max(1, patternMultiplier * scaleMultiplier) * zoomMultiplier; } }, [shapeParams.pattern, shapeParams.count, shapeParams.spacing, shapeParams.scale, shapeParams.zoom]); return (

{/* Dark Mode Toggle */} {/* UI Visibility Toggle */}

Shape Creator

{/* Controls Panel */}

{/* Pattern Selection */}

Pattern

{/* Shape Count */} {shapeParams.pattern !== 'single' && (

Count: {shapeParams.count} setShapeParams(prev => ({ ...prev, count: parseInt(e.target.value) }))} style={{ width: '100%' }} />

)} {/* Shape Type Selection */}

Shape Type

{/* Segments Slider */}

Segments: {shapeParams.segments} setShapeParams(prev => ({ ...prev, segments: parseInt(e.target.value) }))} style={{ width: '100%' }} />

{/* Rotation Controls */}

X Rotation: {(shapeParams.rotationX * 360).toFixed(0)}° setShapeParams(prev => ({ ...prev, rotationX: parseFloat(e.target.value) }))} style={{ width: '100%' }} />

Y Rotation: {(shapeParams.rotationY * 360).toFixed(0)}° setShapeParams(prev => ({ ...prev, rotationY: parseFloat(e.target.value) }))} style={{ width: '100%' }} />

{/* Auto Rotation Controls */}

Auto Rotation Speed: {shapeParams.rotationSpeed.toFixed(4)} setShapeParams(prev => ({ ...prev, rotationSpeed: parseFloat(e.target.value) }))} style={{ width: '100%' }} />

{/* Distribution Selection */}

Distribution

{/* Group Rotation Controls */}

{ setShapeParams(prev => ({ ...prev, groupRotation: e.target.checked, groupRotationSpeed: e.target.checked ? prev.groupRotationSpeed : 0.02 })); // Reset rotation start time when disabled if (!e.target.checked) { animationRef.current.groupRotationStartTime = null; } }} /> Group Rotation

{shapeParams.groupRotation && (

Group Speed: {shapeParams.groupRotationSpeed.toFixed(3)} setShapeParams(prev => ({ ...prev, groupRotationSpeed: parseFloat(e.target.value) }))} style={{ width: '100%' }} />

)}

setShapeParams(prev => ({ ...prev, autoRotate: e.target.checked }))} /> Auto Rotate

{/* Zoom Slider */}

Zoom: {shapeParams.zoom.toFixed(1)}x setShapeParams(prev => ({ ...prev, zoom: parseFloat(e.target.value) }))} style={{ width: '100%' }} />

{/* Scale Slider */}

Scale: {shapeParams.scale.toFixed(1)} setShapeParams(prev => ({ ...prev, scale: parseFloat(e.target.value) }))} style={{ width: '100%' }} />

{/* Wireframe Toggle */}

setShapeParams(prev => ({ ...prev, wireframe: e.target.checked }))} /> Wireframe

{/* Randomize Button */}

); }; // Add viewport meta tag for mobile const meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.head.appendChild(meta); const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();