Geometry Generation Error

${error.message}

\n \n `;\n document.body.appendChild(errorDiv);\n \n // Auto-remove after 5 seconds\n setTimeout(() => {\n if (document.body.contains(errorDiv)) {\n document.body.removeChild(errorDiv);\n }\n }, 5000);\n \n } finally {\n setIsLoading(false);\n }\n }, [appState, onShapeGenerated]);\n\n // Enhanced 3D visualization with advanced materials and effects\n const createEnhancedVisualization = useCallback(async (\n vertices: Vector3D[],\n edges: { start: number; end: number }[],\n faces: { vertices: number[] }[]\n ) => {\n if (!geometryGroupRef.current) return;\n\n const group = geometryGroupRef.current;\n\n // Create enhanced vertices with glow effect\n if (appState.rendering.showVertices) {\n const vertexGeometry = new THREE.SphereGeometry(0.06, 12, 8);\n \n // Create instanced mesh for better performance\n const instancedVertexMesh = new THREE.InstancedMesh(\n vertexGeometry,\n new THREE.MeshPhongMaterial({\n color: appState.rendering.vertexColor,\n transparent: true,\n opacity: appState.rendering.opacity,\n emissive: appState.rendering.vertexColor,\n emissiveIntensity: 0.2,\n shininess: 100\n }),\n vertices.length\n );\n\n const matrix = new THREE.Matrix4();\n vertices.forEach((vertex, index) => {\n matrix.setPosition(vertex.x, vertex.y, vertex.z);\n instancedVertexMesh.setMatrixAt(index, matrix);\n });\n instancedVertexMesh.instanceMatrix.needsUpdate = true;\n \n group.add(instancedVertexMesh);\n\n // Add vertex glow effect\n const glowGeometry = new THREE.SphereGeometry(0.12, 8, 6);\n const glowMaterial = new THREE.MeshBasicMaterial({\n color: appState.rendering.vertexColor,\n transparent: true,\n opacity: appState.rendering.opacity * 0.3,\n blending: THREE.AdditiveBlending\n });\n\n vertices.forEach(vertex => {\n const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);\n glowMesh.position.set(vertex.x, vertex.y, vertex.z);\n group.add(glowMesh);\n });\n }\n\n // Create enhanced edges with animated flow effect\n if (appState.rendering.showEdges) {\n const edgeGeometry = new THREE.BufferGeometry();\n const edgePositions: number[] = [];\n const edgeColors: number[] = [];\n\n edges.forEach(edge => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n \n if (start && end) {\n edgePositions.push(start.x, start.y, start.z);\n edgePositions.push(end.x, end.y, end.z);\n \n // Add color variation based on edge length\n const distance = Math.sqrt(\n (end.x - start.x) ** 2 + (end.y - start.y) ** 2 + (end.z - start.z) ** 2\n );\n const intensity = Math.min(1, distance / 2);\n \n const color = new THREE.Color(appState.rendering.edgeColor);\n color.multiplyScalar(intensity);\n \n edgeColors.push(color.r, color.g, color.b);\n edgeColors.push(color.r, color.g, color.b);\n }\n });\n\n edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));\n edgeGeometry.setAttribute('color', new THREE.Float32BufferAttribute(edgeColors, 3));\n \n const edgeMaterial = new THREE.LineBasicMaterial({\n vertexColors: true,\n transparent: true,\n opacity: appState.rendering.opacity,\n linewidth: 2\n });\n\n const edgeLines = new THREE.LineSegments(edgeGeometry, edgeMaterial);\n group.add(edgeLines);\n\n // Add animated flow effect on edges\n if (appState.isAnimating) {\n const flowGeometry = new THREE.BufferGeometry();\n const flowPositions: number[] = [];\n \n edges.slice(0, Math.min(20, edges.length)).forEach(edge => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n \n if (start && end) {\n flowPositions.push(start.x, start.y, start.z);\n }\n });\n\n flowGeometry.setAttribute('position', new THREE.Float32BufferAttribute(flowPositions, 3));\n \n const flowMaterial = new THREE.PointsMaterial({\n color: 0x00ffff,\n size: 0.1,\n transparent: true,\n opacity: 0.8,\n blending: THREE.AdditiveBlending\n });\n\n const flowPoints = new THREE.Points(flowGeometry, flowMaterial);\n group.add(flowPoints);\n }\n }\n\n // Create enhanced faces with advanced materials\n if (appState.rendering.showFaces && faces.length > 0) {\n const faceGroup = new THREE.Group();\n \n faces.forEach((face, faceIndex) => {\n if (face.vertices.length >= 3) {\n const faceGeometry = new THREE.BufferGeometry();\n const facePositions: number[] = [];\n const faceNormals: number[] = [];\n const faceUVs: number[] = [];\n const faceIndices: number[] = [];\n\n // Add vertices\n face.vertices.forEach((vertexIndex, i) => {\n const vertex = vertices[vertexIndex];\n if (vertex) {\n facePositions.push(vertex.x, vertex.y, vertex.z);\n \n // Generate UVs for texture mapping\n const u = (i % 2);\n const v = Math.floor(i / 2) % 2;\n faceUVs.push(u, v);\n }\n });\n\n // Create triangles for faces with more than 3 vertices\n for (let i = 1; i < face.vertices.length - 1; i++) {\n faceIndices.push(0, i, i + 1);\n }\n\n faceGeometry.setAttribute('position', new THREE.Float32BufferAttribute(facePositions, 3));\n faceGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(faceUVs, 2));\n faceGeometry.setIndex(faceIndices);\n faceGeometry.computeVertexNormals();\n\n // Enhanced material with multiple rendering modes\n let faceMaterial: THREE.Material;\n \n if (appState.rendering.wireframe) {\n faceMaterial = new THREE.MeshBasicMaterial({\n color: appState.rendering.color,\n wireframe: true,\n transparent: true,\n opacity: appState.rendering.opacity\n });\n } else {\n faceMaterial = new THREE.MeshPhongMaterial({\n color: appState.rendering.color,\n transparent: true,\n opacity: appState.rendering.opacity * 0.7,\n side: THREE.DoubleSide,\n shininess: 30,\n specular: 0x111111,\n emissive: appState.rendering.color,\n emissiveIntensity: 0.1\n });\n }\n\n const faceMesh = new THREE.Mesh(faceGeometry, faceMaterial);\n faceMesh.castShadow = true;\n faceMesh.receiveShadow = true;\n \n // Add subtle animation to faces\n if (appState.isAnimating) {\n faceMesh.userData = { \n originalScale: 1,\n animationOffset: faceIndex * 0.1\n };\n }\n \n faceGroup.add(faceMesh);\n }\n });\n \n group.add(faceGroup);\n }\n\n // Add bounding box visualization\n const box = new THREE.Box3().setFromPoints(\n vertices.map(v => new THREE.Vector3(v.x, v.y, v.z))\n );\n \n const boxHelper = new THREE.Box3Helper(box, 0x444444);\n boxHelper.material.transparent = true;\n boxHelper.material.opacity = 0.1;\n group.add(boxHelper);\n\n }, [appState.rendering, appState.isAnimating]);\n\n // Enhanced cross-section visualization with advanced effects\n const createEnhancedCrossSectionVisualization = useCallback((points: Vector3D[]) => {\n if (!geometryGroupRef.current || points.length === 0) return;\n\n const group = geometryGroupRef.current;\n\n // Create cross-section points with pulsing effect\n const crossSectionGeometry = new THREE.SphereGeometry(0.04, 8, 6);\n const crossSectionMaterial = new THREE.MeshPhongMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.9,\n emissive: '#ff2222',\n emissiveIntensity: 0.3\n });\n\n points.forEach((point, index) => {\n const pointMesh = new THREE.Mesh(crossSectionGeometry, crossSectionMaterial);\n pointMesh.position.set(point.x, point.y, point.z);\n pointMesh.userData = { \n type: 'crossSection',\n animationOffset: index * 0.2\n };\n group.add(pointMesh);\n\n // Add glow effect\n const glowGeometry = new THREE.SphereGeometry(0.08, 6, 4);\n const glowMaterial = new THREE.MeshBasicMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.3,\n blending: THREE.AdditiveBlending\n });\n \n const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);\n glowMesh.position.set(point.x, point.y, point.z);\n glowMesh.userData = { \n type: 'crossSectionGlow',\n animationOffset: index * 0.2\n };\n group.add(glowMesh);\n });\n\n // Connect cross-section points with enhanced lines\n if (points.length > 1) {\n const lineGeometry = new THREE.BufferGeometry();\n const linePositions: number[] = [];\n const lineColors: number[] = [];\n\n for (let i = 0; i < points.length; i++) {\n const current = points[i];\n const next = points[(i + 1) % points.length];\n \n linePositions.push(current.x, current.y, current.z);\n linePositions.push(next.x, next.y, next.z);\n \n // Gradient colors\n lineColors.push(1, 0.2, 0.2); // Red\n lineColors.push(1, 0.6, 0.2); // Orange\n }\n\n lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n lineGeometry.setAttribute('color', new THREE.Float32BufferAttribute(lineColors, 3));\n \n const lineMaterial = new THREE.LineBasicMaterial({\n vertexColors: true,\n transparent: true,\n opacity: 0.8,\n linewidth: 3\n });\n\n const lines = new THREE.LineSegments(lineGeometry, lineMaterial);\n lines.userData = { type: 'crossSectionLines' };\n group.add(lines);\n\n // Create cross-section surface if enough points\n if (points.length >= 3) {\n const surfaceGeometry = new THREE.BufferGeometry();\n const surfacePositions: number[] = [];\n const surfaceIndices: number[] = [];\n\n points.forEach(point => {\n surfacePositions.push(point.x, point.y, point.z);\n });\n\n // Create triangulated surface\n for (let i = 1; i < points.length - 1; i++) {\n surfaceIndices.push(0, i, i + 1);\n }\n\n surfaceGeometry.setAttribute('position', new THREE.Float32BufferAttribute(surfacePositions, 3));\n surfaceGeometry.setIndex(surfaceIndices);\n surfaceGeometry.computeVertexNormals();\n\n const surfaceMaterial = new THREE.MeshPhongMaterial({\n color: '#ff6666',\n transparent: true,\n opacity: 0.4,\n side: THREE.DoubleSide,\n emissive: '#ff2222',\n emissiveIntensity: 0.1\n });\n\n const surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial);\n surfaceMesh.userData = { type: 'crossSectionSurface' };\n group.add(surfaceMesh);\n }\n }\n }, []);\n\n // Enhanced animation loop with performance monitoring and smooth effects\n const animate = useCallback(() => {\n if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;\n\n const currentTime = performance.now();\n const deltaTime = currentTime - performanceRef.current.lastTime;\n performanceRef.current.lastTime = currentTime;\n\n // Update FPS counter\n performanceRef.current.frameCount++;\n if (performanceRef.current.frameCount % 60 === 0) {\n const fps = Math.round(1000 / (deltaTime || 16.67));\n performanceRef.current.fps = fps;\n \n const fpsElement = document.getElementById('fpsCounter');\n if (fpsElement) {\n fpsElement.textContent = fps.toString();\n fpsElement.style.color = fps > 45 ? '#00ff00' : fps > 30 ? '#ffff00' : '#ff0000';\n }\n }\n\n // Update camera controls\n if (controlsRef.current?.updateCamera) {\n controlsRef.current.updateCamera();\n }\n\n // Animate geometry elements\n if (geometryGroupRef.current) {\n const time = currentTime * 0.001;\n \n geometryGroupRef.current.traverse((object) => {\n if (object.userData.type === 'crossSection') {\n const scale = 1 + Math.sin(time * 3 + object.userData.animationOffset) * 0.2;\n object.scale.setScalar(scale);\n } else if (object.userData.type === 'crossSectionGlow') {\n const opacity = 0.3 + Math.sin(time * 2 + object.userData.animationOffset) * 0.2;\n if (object instanceof THREE.Mesh && object.material instanceof THREE.Material) {\n object.material.opacity = opacity;\n }\n } else if (object.userData.originalScale && appState.isAnimating) {\n const scale = object.userData.originalScale + Math.sin(time + object.userData.animationOffset) * 0.05;\n object.scale.setScalar(scale);\n }\n });\n\n // Rotate the entire geometry group if auto-rotation is enabled\n if (appState.isAnimating) {\n geometryGroupRef.current.rotation.y += 0.005 * appState.animationSpeed;\n geometryGroupRef.current.rotation.x += 0.003 * appState.animationSpeed;\n }\n }\n\n // Render the scene\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n animationFrameRef.current = requestAnimationFrame(animate);\n }, [appState.isAnimating, appState.animationSpeed]);\n\n // Initialize scene on mount\n useEffect(() => {\n const cleanup = initializeScene();\n \n if (cleanup) {\n return cleanup;\n }\n }, [initializeScene]);\n\n // Update geometry when app state changes with debouncing\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n updateGeometry();\n }, 100);\n\n return () => clearTimeout(timeoutId);\n }, [updateGeometry]);\n\n // Start animation loop\n useEffect(() => {\n animate();\n \n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [animate]);\n\n // Update camera when FOV changes\n useEffect(() => {\n if (cameraRef.current) {\n cameraRef.current.fov = appState.camera.fov;\n cameraRef.current.updateProjectionMatrix();\n }\n }, [appState.camera.fov]);\n\n // Update renderer settings when rendering options change\n useEffect(() => {\n if (rendererRef.current) {\n rendererRef.current.shadowMap.enabled = appState.rendering.showFaces;\n }\n }, [appState.rendering.showFaces]);\n\n // Handle window visibility change for performance optimization\n useEffect(() => {\n const handleVisibilityChange = () => {\n if (document.hidden) {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n } else {\n animate();\n }\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n return () => document.removeEventListener('visibilitychange', handleVisibilityChange);\n }, [animate]);\n\n // Render loading indicator and performance stats\n return (\n <>\n {isLoading && (\n

\n Generating {appState.dimension}D {appState.currentShape}...\n

\n )}\n\n {/* Performance overlay */}\n

0 ? 'block' : 'none'\n }}>\n

Performance Stats:

FPS: 45 ? '#00ff00' : performanceRef.current.fps > 30 ? '#ffff00' : '#ff0000' }}>\n {performanceRef.current.fps}\n

Vertices: {renderStats.vertices}

Faces: {renderStats.faces}

Draw Calls: {renderStats.drawCalls}

\n\n \n \n );\n}\n}","deleted","label",[172,173,154],"frontend","components","permalink","https://www.val.town/x/spooky/AIDA/code/frontend/components/GeometryViewer.tsx","extension","actionData","errors"]