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",[],[141,178],"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}",[],[141,186],["D",1747476588508],[157,158,159],[141],["D",1747476448969],{"_11":12,"_87":83},{"_11":12,"_81":-5,"_82":83,"_44":45,"_84":85,"_86":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_76":-5,"_77":-5,"_78":-5,"_79":14,"_80":12},"ctx",{"_69":-5,"_109":234,"_235":236,"_237":238,"_239":38,"_240":38,"_241":38,"_242":49,"_243":-5,"_244":-7,"_245":-7,"_246":53,"_247":38,"_248":38,"_249":-5,"_250":38,"_251":38,"_252":38,"_253":-5},"ENV",{"_205":206,"_207":208,"_209":26,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Branches1

Branches
1