Digital 3D AI Teacher

Ask any educational question and get an AI-powered response

\n \n

Realistic 3D Teacher with advanced facial expressions

\n \n \n

\n 👩‍🏫\n

Hello! I'm your AI teacher. Ask me any educational question, and I'll do my best to help you learn!

\n \n

\n Thinking\n .\n .\n .\n

\n \n \n

\n \n \n \n\n","label",[159,64],"frontend","pulls","branches","forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_33":214,"_13":159,"_62":150,"_43":-5,"_35":36,"_151":40,"_152":91,"_37":215,"_39":26,"_65":216,"_155":-5,"_66":24,"_157":-5,"_183":217,"_17":218},{"_33":205,"_13":206,"_62":207,"_43":150,"_35":36,"_151":114,"_152":91,"_37":208,"_39":209,"_65":210,"_155":211,"_66":24,"_157":-5,"_183":212,"_17":213},{"_33":149,"_13":64,"_62":63,"_43":150,"_35":36,"_151":72,"_152":91,"_37":202,"_39":154,"_65":21,"_155":156,"_66":24,"_157":-5,"_183":203,"_17":204},{"_33":194,"_13":195,"_62":196,"_43":150,"_35":36,"_151":197,"_152":91,"_37":198,"_39":154,"_65":21,"_155":199,"_66":24,"_157":-5,"_183":200,"_17":201},{"_33":186,"_13":187,"_62":188,"_43":-5,"_35":36,"_151":189,"_152":91,"_37":190,"_39":154,"_65":21,"_155":191,"_66":24,"_157":-5,"_183":192,"_17":193},{"_33":176,"_13":177,"_62":89,"_43":-5,"_35":36,"_151":178,"_152":91,"_37":179,"_39":180,"_65":181,"_155":182,"_66":24,"_157":-5,"_183":184,"_17":185},"baf292a6-3308-11f0-bcc7-569c3dd06744","index.ts",18,["D",1747477303761],6,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n \n // Inject project info\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint for AI responses\napp.post(\"/api/ask\", async c => {\n try {\n const body = await c.req.json();\n const { question, history = [] } = body;\n \n if (!question) {\n return c.json({ error: \"Question is required\" }, 400);\n }\n \n const openai = new OpenAI();\n \n // Prepare messages with history and enhanced system prompt\n const messages = [\n { \n role: \"system\", \n content: `You are an expert educational AI teacher specializing in making complex topics easy to understand.\nYour responses should:\n- Be clear, concise, and accurate\n- Break down complex concepts into simple explanations\n- Use analogies and real-world examples to illustrate points\n- Include step-by-step explanations when teaching processes or methods\n- Highlight key terms or concepts that are important to remember\n- End with a thought-provoking question to encourage further learning\n- Keep content educational, engaging, and suitable for students\n- Format your response with markdown for better readability when appropriate`\n },\n ...history,\n { role: \"user\", content: question }\n ];\n \n const completion = await openai.chat.completions.create({\n messages,\n model: \"gpt-4o-mini\",\n max_tokens: 800,\n });\n \n // Return the answer and updated conversation history\n return c.json({ \n answer: completion.choices[0].message.content,\n history: [\n ...messages.slice(1), // Skip the system message\n { role: \"assistant\", content: completion.choices[0].message.content }\n ]\n });\n } catch (error) {\n console.error(\"Error processing request:\", error);\n return c.json({ error: \"Failed to process your question\" }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","children",[],[177],"87c49faa-3308-11f0-91f7-569c3dd06744","README.md","fea2b384-3306-11f0-ad17-569c3dd06744",14,["D",1747477217896],"# Digital 3D AI-Powered Teacher\n\nThis Val Town project creates an interactive 3D AI-powered teacher that can answer educational questions.\n\n## Features\n\n- Realistic 3D avatar representation using Three.js\n - Advanced materials with physical properties\n - Detailed facial features with realistic skin, eyes, and hair\n - Lifelike animations and expressions\n- AI-powered responses using OpenAI's API\n- Interactive chat interface\n- Educational content delivery\n\n## Project Structure\n\n- `index.ts` - Main HTTP entry point\n- `frontend/` - Frontend assets and components\n - `index.html` - Main HTML template\n - `app.js` - Frontend JavaScript with 3D rendering\n - `style.css` - Styling\n\n## How to Use\n\n1. Visit the application URL\n2. Ask educational questions in the chat interface\n3. The 3D teacher avatar will respond with AI-generated educational content\n4. Watch the realistic facial expressions and animations as the teacher responds\n\n## Technologies Used\n\n- Three.js for 3D rendering\n - MeshPhysicalMaterial for realistic materials\n - Advanced lighting setup for photorealistic rendering\n - Facial animation system\n- OpenAI API for AI responses\n- Tailwind CSS for styling",[],[187],"a0e87574-3308-11f0-a95f-569c3dd06744","style.css","1444d096-3307-11f0-9adf-569c3dd06744",16,["D",1747477260070],"/* Custom styles for the Digital 3D AI Teacher */\n\n/* Chat message styling */\n.chat-message {\n margin-bottom: 1rem;\n max-width: 80%;\n}\n\n.chat-message.teacher {\n align-self: flex-start;\n margin-right: auto;\n}\n\n.chat-message.user {\n align-self: flex-end;\n margin-left: auto;\n text-align: right;\n}\n\n.chat-message.user .message {\n background-color: #e0f2fe;\n}\n\n#chat-messages {\n display: flex;\n flex-direction: column;\n}\n\n/* Animation delays for thinking dots */\n.delay-75 {\n animation-delay: 0.75s;\n}\n\n.delay-150 {\n animation-delay: 0.15s;\n}\n\n.delay-300 {\n animation-delay: 0.3s;\n}\n\n/* 3D avatar container */\n#avatar-container {\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n}\n\n/* Ensure canvas is responsive */\ncanvas {\n width: 100% !important;\n height: 100% !important;\n display: block;\n}\n\n/* Add a subtle gradient background to the avatar container */\n#avatar-container::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, #e0f7fa 0%, #f5f5f5 100%);\n z-index: -1;\n}\n\n/* Enhance message styling */\n.message {\n border-radius: 1rem;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n}\n\n.message:hover {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Add a subtle animation to the avatar container */\n@keyframes subtle-glow {\n 0% {\n box-shadow: 0 0 10px rgba(66, 153, 225, 0.1);\n }\n 50% {\n box-shadow: 0 0 20px rgba(66, 153, 225, 0.2);\n }\n 100% {\n box-shadow: 0 0 10px rgba(66, 153, 225, 0.1);\n }\n}\n\n#avatar-container {\n animation: subtle-glow 4s infinite;\n}",[],[159,195],["D",1747477290757],[],[159,64],"df4566f6-3308-11f0-a923-569c3dd06744","app.js","2aa7eb48-3307-11f0-9743-569c3dd06744",["D",1747477364702],8,"script","// Import Three.js from the global scope\nconst THREE = window.THREE;\n\n// Initialize project info\nconst projectInfo = window.__PROJECT_INFO__ || { url: \"#\" };\ndocument.getElementById(\"view-source\").href = projectInfo.url;\n\n// DOM Elements\nconst questionForm = document.getElementById(\"question-form\");\nconst questionInput = document.getElementById(\"question-input\");\nconst chatMessages = document.getElementById(\"chat-messages\");\nconst thinkingIndicator = document.getElementById(\"thinking\");\nconst avatarContainer = document.getElementById(\"avatar-container\");\nconst avatarLoading = document.getElementById(\"avatar-loading\");\n\n// 3D Scene Variables\nlet scene, camera, renderer, model, mixer, clock;\nlet isAvatarTalking = false;\nlet animationTimeout;\nlet facialFeatures = {}; // Store facial features for animation\nlet headModel, eyesMaterial;\n\n// Initialize 3D Scene\ninitScene();\n\n// Store conversation history\nlet chatHistory = [];\n\n// Event Listeners\nquestionForm.addEventListener(\"submit\", handleQuestionSubmit);\n\n// Functions\nasync function handleQuestionSubmit(e) {\n e.preventDefault();\n \n const question = questionInput.value.trim();\n if (!question) return;\n \n // Add user message to chat\n addMessageToChat(\"user\", question);\n \n // Clear input\n questionInput.value = \"\";\n \n // Show thinking indicator\n thinkingIndicator.classList.remove(\"hidden\");\n \n try {\n // Send question to API with conversation history\n const response = await fetch(\"/api/ask\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ \n question,\n history: chatHistory\n }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to get response\");\n }\n \n const data = await response.json();\n \n // Hide thinking indicator\n thinkingIndicator.classList.add(\"hidden\");\n \n // Add AI response to chat\n addMessageToChat(\"teacher\", data.answer);\n \n // Update conversation history\n chatHistory = data.history || [];\n \n // Animate the avatar talking\n animateAvatarTalking();\n } catch (error) {\n console.error(\"Error:\", error);\n thinkingIndicator.classList.add(\"hidden\");\n addMessageToChat(\"teacher\", \"Sorry, I encountered an error while processing your question. Please try again.\");\n }\n}\n\nfunction addMessageToChat(role, text) {\n const messageDiv = document.createElement(\"div\");\n messageDiv.className = `chat-message ${role}`;\n \n const avatarEmoji = role === \"teacher\" ? \"👩‍🏫\" : \"👤\";\n \n // Simple markdown parsing for teacher responses\n let formattedText = text;\n if (role === \"teacher\") {\n // Convert markdown to HTML (basic implementation)\n // Bold text\n formattedText = formattedText.replace(/\\*\\*(.*?)\\*\\*/g, '$1');\n // Italic text\n formattedText = formattedText.replace(/\\*(.*?)\\*/g, '$1');\n // Headers\n formattedText = formattedText.replace(/^### (.*?)$/gm, '

$1

');\n formattedText = formattedText.replace(/^## (.*?)$/gm, '

$1

');\n formattedText = formattedText.replace(/^# (.*?)$/gm, '

$1

');\n // Lists\n formattedText = formattedText.replace(/^- (.*?)$/gm, '

');\n formattedText = formattedText.replace(/(

.*?<\\/li>)/gs, '

$1');\n // Code blocks\n formattedText = formattedText.replace(/`(.*?)`/g, '$1');\n // Line breaks\n formattedText = formattedText.replace(/\\n/g, '
');\n }\n \n messageDiv.innerHTML = `\n

\n ${avatarEmoji}\n

\n ${formattedText}\n

\n `;\n \n chatMessages.appendChild(messageDiv);\n \n // Scroll to bottom\n chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\nfunction initScene() {\n // Create scene with improved background\n scene = new THREE.Scene();\n scene.background = new THREE.Color(0xe8f4f8); // Softer blue-tinted background\n \n // Create camera with better positioning\n camera = new THREE.PerspectiveCamera(\n 40, // Narrower FOV for less distortion\n avatarContainer.clientWidth / avatarContainer.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(0, 1.6, 3.5); // Better framing of the head\n camera.lookAt(0, 1.2, 0);\n \n // Create renderer with enhanced settings\n renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: \"high-performance\"\n });\n renderer.setSize(avatarContainer.clientWidth, avatarContainer.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Cap pixel ratio for performance\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows\n renderer.outputEncoding = THREE.sRGBEncoding; // Better color reproduction\n renderer.toneMapping = THREE.ACESFilmicToneMapping; // Cinematic tone mapping\n renderer.toneMappingExposure = 1.2; // Slightly brighter\n \n // Remove loading indicator and append renderer\n avatarLoading.remove();\n avatarContainer.appendChild(renderer.domElement);\n \n // Create environment map for realistic reflections\n const cubeTextureLoader = new THREE.CubeTextureLoader();\n const environmentMap = cubeTextureLoader.load([\n 'https://threejs.org/examples/textures/cube/Park2/posx.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/negx.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/posy.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/negy.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/posz.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/negz.jpg'\n ]);\n scene.environment = environmentMap;\n \n // Enhanced lighting setup for more realistic appearance\n // Ambient light for base illumination\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);\n scene.add(ambientLight);\n \n // Main key light (simulates window light)\n const keyLight = new THREE.DirectionalLight(0xffffeb, 1.2); // Slightly warm\n keyLight.position.set(2, 2, 2);\n keyLight.castShadow = true;\n keyLight.shadow.mapSize.width = 1024;\n keyLight.shadow.mapSize.height = 1024;\n keyLight.shadow.camera.near = 0.5;\n keyLight.shadow.camera.far = 10;\n keyLight.shadow.bias = -0.0001;\n scene.add(keyLight);\n \n // Fill light (softer light from opposite side)\n const fillLight = new THREE.DirectionalLight(0xe6f0ff, 0.7); // Slightly cool\n fillLight.position.set(-2, 1, 1);\n scene.add(fillLight);\n \n // Rim light (edge highlight from behind)\n const rimLight = new THREE.DirectionalLight(0xffffff, 0.6);\n rimLight.position.set(0, 2, -3);\n scene.add(rimLight);\n \n // Create realistic avatar\n createRealisticAvatar();\n \n // Initialize animation clock\n clock = new THREE.Clock();\n \n // Start animation loop\n animate();\n \n // Handle window resize\n window.addEventListener(\"resize\", onWindowResize);\n}\n\nfunction createRealisticAvatar() {\n // Create a group to hold the avatar parts\n model = new THREE.Group();\n \n // Create a more realistic head using subdivision\n const headGeometry = new THREE.SphereGeometry(1, 64, 64); // Higher poly count\n \n // Create realistic skin material with subsurface scattering effect\n const headMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffe0c0, // Base skin tone\n roughness: 0.3, // Slightly glossy skin\n metalness: 0.0, // Non-metallic\n clearcoat: 0.5, // Subtle clearcoat for realism\n clearcoatRoughness: 0.4,\n envMapIntensity: 0.3, // Subtle environment reflections\n sheen: 0.2, // Subtle sheen\n sheenRoughness: 0.5,\n sheenColor: 0xffe0c0, // Matching sheen color\n transmission: 0.05, // Slight translucency for skin\n ior: 1.4 // Index of refraction for skin\n });\n \n headModel = new THREE.Mesh(headGeometry, headMaterial);\n // Slightly elongate the head for more realistic proportions\n headModel.scale.set(0.9, 1.05, 0.9);\n model.add(headModel);\n \n // Create more realistic eyes\n const eyeGeometry = new THREE.SphereGeometry(0.15, 32, 32);\n \n // Create eye white material\n const eyeWhiteMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffffff,\n roughness: 0.1,\n metalness: 0.0,\n clearcoat: 0.8,\n transmission: 0.1,\n ior: 1.4\n });\n \n // Create iris material with depth\n eyesMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0x3a8ab4, // Blue eyes\n roughness: 0.1,\n metalness: 0.1,\n clearcoat: 0.9,\n clearcoatRoughness: 0.1,\n transmission: 0.05,\n ior: 1.4\n });\n \n // Create pupil material (black)\n const pupilMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });\n \n // Left eye group\n const leftEyeGroup = new THREE.Group();\n leftEyeGroup.position.set(-0.3, 0.15, 0.85);\n \n // Eye white\n const leftEyeWhite = new THREE.Mesh(eyeGeometry, eyeWhiteMaterial);\n leftEyeGroup.add(leftEyeWhite);\n \n // Iris (slightly smaller and protruding)\n const leftIrisGeometry = new THREE.SphereGeometry(0.08, 32, 32);\n const leftIris = new THREE.Mesh(leftIrisGeometry, eyesMaterial);\n leftIris.position.z = 0.1;\n leftIris.name = \"leftIris\";\n leftEyeGroup.add(leftIris);\n \n // Pupil (even smaller and more protruding)\n const leftPupilGeometry = new THREE.SphereGeometry(0.04, 16, 16);\n const leftPupil = new THREE.Mesh(leftPupilGeometry, pupilMaterial);\n leftPupil.position.z = 0.12;\n leftPupil.name = \"leftPupil\";\n leftEyeGroup.add(leftPupil);\n \n // Right eye (same structure)\n const rightEyeGroup = new THREE.Group();\n rightEyeGroup.position.set(0.3, 0.15, 0.85);\n \n const rightEyeWhite = new THREE.Mesh(eyeGeometry, eyeWhiteMaterial);\n rightEyeGroup.add(rightEyeWhite);\n \n const rightIrisGeometry = new THREE.SphereGeometry(0.08, 32, 32);\n const rightIris = new THREE.Mesh(rightIrisGeometry, eyesMaterial);\n rightIris.position.z = 0.1;\n rightIris.name = \"rightIris\";\n rightEyeGroup.add(rightIris);\n \n const rightPupilGeometry = new THREE.SphereGeometry(0.04, 16, 16);\n const rightPupil = new THREE.Mesh(rightPupilGeometry, pupilMaterial);\n rightPupil.position.z = 0.12;\n rightPupil.name = \"rightPupil\";\n rightEyeGroup.add(rightPupil);\n \n // Add eyes to model\n model.add(leftEyeGroup);\n model.add(rightEyeGroup);\n \n // Store eye references for animation\n facialFeatures.leftEye = leftEyeGroup;\n facialFeatures.rightEye = rightEyeGroup;\n facialFeatures.leftIris = leftIris;\n facialFeatures.rightIris = rightIris;\n facialFeatures.leftPupil = leftPupil;\n facialFeatures.rightPupil = rightPupil;\n \n // Create realistic eyebrows\n const leftEyebrowGeometry = new THREE.BoxGeometry(0.25, 0.05, 0.05);\n const eyebrowMaterial = new THREE.MeshStandardMaterial({ \n color: 0x5a3825, // Dark brown\n roughness: 1.0\n });\n \n const leftEyebrow = new THREE.Mesh(leftEyebrowGeometry, eyebrowMaterial);\n leftEyebrow.position.set(-0.3, 0.35, 0.85);\n leftEyebrow.rotation.z = -0.1; // Slight angle\n leftEyebrow.name = \"leftEyebrow\";\n model.add(leftEyebrow);\n \n const rightEyebrowGeometry = new THREE.BoxGeometry(0.25, 0.05, 0.05);\n const rightEyebrow = new THREE.Mesh(rightEyebrowGeometry, eyebrowMaterial);\n rightEyebrow.position.set(0.3, 0.35, 0.85);\n rightEyebrow.rotation.z = 0.1; // Slight angle\n rightEyebrow.name = \"rightEyebrow\";\n model.add(rightEyebrow);\n \n facialFeatures.leftEyebrow = leftEyebrow;\n facialFeatures.rightEyebrow = rightEyebrow;\n \n // Create a more realistic mouth with lips\n const lipMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xd5756c, // Natural lip color\n roughness: 0.3,\n metalness: 0.0,\n clearcoat: 0.7,\n transmission: 0.1\n });\n \n // Upper lip\n const upperLipGeometry = new THREE.TorusGeometry(0.2, 0.05, 16, 32, Math.PI);\n const upperLip = new THREE.Mesh(upperLipGeometry, lipMaterial);\n upperLip.rotation.x = Math.PI;\n upperLip.position.set(0, -0.4, 0.9);\n upperLip.name = \"upperLip\";\n model.add(upperLip);\n \n // Lower lip\n const lowerLipGeometry = new THREE.TorusGeometry(0.2, 0.05, 16, 32, Math.PI);\n const lowerLip = new THREE.Mesh(lowerLipGeometry, lipMaterial);\n lowerLip.position.set(0, -0.5, 0.9);\n lowerLip.name = \"lowerLip\";\n model.add(lowerLip);\n \n facialFeatures.upperLip = upperLip;\n facialFeatures.lowerLip = lowerLip;\n \n // Create a nose\n const noseBaseGeometry = new THREE.SphereGeometry(0.12, 16, 16);\n const noseMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffdbbc, // Slightly darker than skin\n roughness: 0.4,\n metalness: 0.0,\n clearcoat: 0.3\n });\n \n const noseBase = new THREE.Mesh(noseBaseGeometry, noseMaterial);\n noseBase.position.set(0, -0.1, 1);\n noseBase.scale.set(1, 1.1, 1);\n model.add(noseBase);\n \n // Nose bridge\n const noseBridgeGeometry = new THREE.BoxGeometry(0.08, 0.2, 0.1);\n const noseBridge = new THREE.Mesh(noseBridgeGeometry, noseMaterial);\n noseBridge.position.set(0, 0.05, 0.95);\n model.add(noseBridge);\n \n // Add glasses with more realistic materials\n const glassesFrameMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0x222222,\n roughness: 0.2,\n metalness: 0.8,\n clearcoat: 0.9\n });\n \n const glassLensMaterial = new THREE.MeshPhysicalMaterial({\n color: 0xffffff,\n roughness: 0.1,\n metalness: 0.0,\n transmission: 0.9, // Highly transparent\n opacity: 0.2,\n transparent: true,\n ior: 1.5 // Glass IOR\n });\n \n // Left glasses frame\n const leftGlassesFrameGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 32, Math.PI * 2);\n const leftGlassesFrame = new THREE.Mesh(leftGlassesFrameGeometry, glassesFrameMaterial);\n leftGlassesFrame.position.set(-0.3, 0.15, 0.92);\n leftGlassesFrame.rotation.x = Math.PI / 2;\n model.add(leftGlassesFrame);\n \n // Left glasses lens\n const leftLensGeometry = new THREE.CircleGeometry(0.19, 32);\n const leftLens = new THREE.Mesh(leftLensGeometry, glassLensMaterial);\n leftLens.position.set(-0.3, 0.15, 0.91);\n leftLens.rotation.x = Math.PI / 2;\n model.add(leftLens);\n \n // Right glasses frame\n const rightGlassesFrameGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 32, Math.PI * 2);\n const rightGlassesFrame = new THREE.Mesh(rightGlassesFrameGeometry, glassesFrameMaterial);\n rightGlassesFrame.position.set(0.3, 0.15, 0.92);\n rightGlassesFrame.rotation.x = Math.PI / 2;\n model.add(rightGlassesFrame);\n \n // Right glasses lens\n const rightLensGeometry = new THREE.CircleGeometry(0.19, 32);\n const rightLens = new THREE.Mesh(rightLensGeometry, glassLensMaterial);\n rightLens.position.set(0.3, 0.15, 0.91);\n rightLens.rotation.x = Math.PI / 2;\n model.add(rightLens);\n \n // Glasses bridge\n const bridgeGeometry = new THREE.BoxGeometry(0.3, 0.02, 0.02);\n const bridge = new THREE.Mesh(bridgeGeometry, glassesFrameMaterial);\n bridge.position.set(0, 0.15, 0.92);\n model.add(bridge);\n \n // Glasses temples (arms)\n const leftTempleGeometry = new THREE.BoxGeometry(0.02, 0.02, 0.5);\n const leftTemple = new THREE.Mesh(leftTempleGeometry, glassesFrameMaterial);\n leftTemple.position.set(-0.5, 0.15, 0.7);\n leftTemple.rotation.y = Math.PI / 2.5;\n model.add(leftTemple);\n \n const rightTempleGeometry = new THREE.BoxGeometry(0.02, 0.02, 0.5);\n const rightTemple = new THREE.Mesh(rightTempleGeometry, glassesFrameMaterial);\n rightTemple.position.set(0.5, 0.15, 0.7);\n rightTemple.rotation.y = -Math.PI / 2.5;\n model.add(rightTemple);\n \n // Create realistic hair\n const hairMaterial = new THREE.MeshStandardMaterial({ \n color: 0x5a3825, // Dark brown\n roughness: 0.8,\n metalness: 0.1\n });\n \n // Main hair volume\n const hairGeometry = new THREE.SphereGeometry(1.05, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);\n const hair = new THREE.Mesh(hairGeometry, hairMaterial);\n hair.position.set(0, 0.1, 0);\n hair.rotation.x = Math.PI * 0.05;\n model.add(hair);\n \n // Add some hair strands for more realism\n const strandGeometry = new THREE.BoxGeometry(0.05, 0.2, 0.05);\n \n // Create several strands across the forehead\n for (let i = -0.8; i <= 0.8; i += 0.2) {\n const strand = new THREE.Mesh(strandGeometry, hairMaterial);\n strand.position.set(i, 0.5, 0.8);\n strand.rotation.x = Math.PI * 0.15;\n strand.rotation.z = Math.random() * 0.2 - 0.1;\n model.add(strand);\n }\n \n // Add ears\n const earGeometry = new THREE.SphereGeometry(0.2, 32, 16);\n const earMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffdbbc,\n roughness: 0.5,\n metalness: 0.0,\n clearcoat: 0.2\n });\n \n // Left ear\n const leftEar = new THREE.Mesh(earGeometry, earMaterial);\n leftEar.position.set(-0.9, 0.1, 0);\n leftEar.scale.set(0.5, 1, 0.7);\n model.add(leftEar);\n \n // Right ear\n const rightEar = new THREE.Mesh(earGeometry, earMaterial);\n rightEar.position.set(0.9, 0.1, 0);\n rightEar.scale.set(0.5, 1, 0.7);\n model.add(rightEar);\n \n // Add neck\n const neckGeometry = new THREE.CylinderGeometry(0.3, 0.4, 0.7, 32);\n const neckMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffe0c0,\n roughness: 0.3,\n metalness: 0.0,\n clearcoat: 0.3\n });\n \n const neck = new THREE.Mesh(neckGeometry, neckMaterial);\n neck.position.set(0, -0.8, 0);\n model.add(neck);\n \n // Add to scene\n scene.add(model);\n}\n\nfunction animateAvatarTalking() {\n // Clear any existing animation timeout\n if (animationTimeout) {\n clearTimeout(animationTimeout);\n }\n \n isAvatarTalking = true;\n \n // Animate eyebrows to show interest (raise slightly)\n if (facialFeatures.leftEyebrow && facialFeatures.rightEyebrow) {\n facialFeatures.leftEyebrow.position.y += 0.05;\n facialFeatures.rightEyebrow.position.y += 0.05;\n }\n \n // Make pupils dilate slightly to show engagement\n if (facialFeatures.leftPupil && facialFeatures.rightPupil) {\n facialFeatures.leftPupil.scale.set(1.2, 1.2, 1.2);\n facialFeatures.rightPupil.scale.set(1.2, 1.2, 1.2);\n }\n \n // Change eye color slightly to be more vibrant when talking\n if (eyesMaterial) {\n eyesMaterial.color.setHex(0x4a9ac4); // Brighter blue\n }\n \n // Set timeout to stop talking after 5 seconds\n animationTimeout = setTimeout(() => {\n isAvatarTalking = false;\n \n // Reset facial expressions\n if (facialFeatures.leftEyebrow && facialFeatures.rightEyebrow) {\n facialFeatures.leftEyebrow.position.y -= 0.05;\n facialFeatures.rightEyebrow.position.y -= 0.05;\n }\n \n if (facialFeatures.leftPupil && facialFeatures.rightPupil) {\n facialFeatures.leftPupil.scale.set(1, 1, 1);\n facialFeatures.rightPupil.scale.set(1, 1, 1);\n }\n \n if (eyesMaterial) {\n eyesMaterial.color.setHex(0x3a8ab4); // Back to normal blue\n }\n }, 5000);\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n \n const delta = clock.getDelta();\n const time = Date.now() * 0.001; // Current time in seconds\n \n // Animate the mouth if talking\n if (isAvatarTalking) {\n // More realistic mouth movement\n if (facialFeatures.upperLip && facialFeatures.lowerLip) {\n // Upper lip moves less than lower lip\n facialFeatures.upperLip.position.y = -0.4 + Math.sin(time * 10) * 0.02;\n // Lower lip moves more\n facialFeatures.lowerLip.position.y = -0.5 + Math.sin(time * 10) * 0.05;\n // Vary the mouth width slightly\n facialFeatures.upperLip.scale.x = 1 + Math.sin(time * 5) * 0.05;\n facialFeatures.lowerLip.scale.x = 1 + Math.sin(time * 5) * 0.05;\n }\n \n // Subtle head movement while talking (more active)\n if (model) {\n model.rotation.y = Math.sin(time * 1.5) * 0.1;\n model.rotation.x = Math.sin(time * 2) * 0.03;\n model.position.y = Math.sin(time * 2.5) * 0.03;\n }\n \n // Eye movement while talking (looking around slightly)\n if (facialFeatures.leftEye && facialFeatures.rightEye) {\n facialFeatures.leftEye.rotation.y = Math.sin(time * 0.5) * 0.2;\n facialFeatures.rightEye.rotation.y = Math.sin(time * 0.5) * 0.2;\n \n // Occasional blinks\n if (Math.sin(time * 3) > 0.95) {\n facialFeatures.leftEye.scale.y = 0.1;\n facialFeatures.rightEye.scale.y = 0.1;\n } else {\n facialFeatures.leftEye.scale.y = 1;\n facialFeatures.rightEye.scale.y = 1;\n }\n }\n } else {\n // Idle animations when not talking\n \n // Subtle breathing movement\n if (model) {\n model.rotation.y = Math.sin(time * 0.5) * 0.05;\n model.position.y = Math.sin(time * 0.7) * 0.02;\n }\n \n // Occasional random eye movements\n if (facialFeatures.leftEye && facialFeatures.rightEye) {\n // Look in random directions occasionally\n if (Math.sin(time * 0.3) > 0.9) {\n facialFeatures.leftEye.rotation.y = Math.sin(time * 0.2) * 0.3;\n facialFeatures.rightEye.rotation.y = Math.sin(time * 0.2) * 0.3;\n }\n \n // Random blinks\n if (Math.sin(time * 2) > 0.98) {\n facialFeatures.leftEye.scale.y = 0.1;\n facialFeatures.rightEye.scale.y = 0.1;\n } else {\n facialFeatures.leftEye.scale.y = 1;\n facialFeatures.rightEye.scale.y = 1;\n }\n }\n \n // Subtle mouth movements (breathing)\n if (facialFeatures.upperLip && facialFeatures.lowerLip) {\n facialFeatures.upperLip.position.y = -0.4;\n facialFeatures.lowerLip.position.y = -0.5 + Math.sin(time * 0.5) * 0.01;\n }\n }\n \n // Subtle skin color variations to simulate blood flow\n if (headModel) {\n const pulseIntensity = (Math.sin(time * 0.8) * 0.5 + 0.5) * 0.05;\n headModel.material.color.setRGB(\n 1.0 - pulseIntensity, \n 0.878 - pulseIntensity, \n 0.753 - pulseIntensity\n );\n }\n \n renderer.render(scene, camera);\n}\n\nfunction onWindowResize() {\n camera.aspect = avatarContainer.clientWidth / avatarContainer.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(avatarContainer.clientWidth, avatarContainer.clientHeight);\n}",[],[159,206],"109f7252-3307-11f0-b87d-569c3dd06744",["D",1747476588508],"directory",[171,172,173],[159],["D",1747476448969],{"_11":12,"_127":69},{"_11":12,"_123":-5,"_68":69,"_30":67,"_124":125,"_126":24},{"_39":114,"_13":16,"_33":36,"_115":79,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"ctx",{"_52":-5,"_146":256,"_257":258,"_259":260,"_261":24,"_262":24,"_263":24,"_264":91,"_265":-5,"_266":-7,"_267":-7,"_268":26,"_269":24,"_270":24,"_271":-5,"_272":24,"_273":24,"_274":24,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":16,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html