{"id":5605,"date":"2026-03-05T22:05:31","date_gmt":"2026-03-06T01:05:31","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=5605"},"modified":"2026-03-19T14:45:43","modified_gmt":"2026-03-19T17:45:43","slug":"ley_de_gauss_2","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","title":{"rendered":"ley_de_gauss"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Flujo Electrico - Simulacion Interactiva<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg-color: #0f1218;\r\n --panel-bg: rgba(20, 25, 35, 0.92);\r\n --border-color: #2a3444;\r\n --text-main: #e8ecf2;\r\n --text-muted: #8899aa;\r\n --accent-violet: #9575cd; \/* Superficie *\/\r\n --accent-red: #ef5350; \/* Vector E *\/\r\n --accent-blue: #42a5f5; \/* Vector dA *\/\r\n --accent-green: #66bb6a; \/* Proyeccion *\/\r\n --accent-orange: #ffa726; \/* Lineas campo *\/\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n body {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background: var(--bg-color);\r\n color: var(--text-main);\r\n overflow: hidden;\r\n }\r\n\r\n #canvas-container {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 1;\r\n }\r\n\r\n .control-panel {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n width: 320px;\r\n background: var(--panel-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 16px;\r\n padding: 24px;\r\n z-index: 100;\r\n backdrop-filter: blur(16px);\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\r\n }\r\n\r\n .panel-title {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 4px;\r\n color: var(--text-main);\r\n }\r\n\r\n .panel-subtitle {\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n margin-bottom: 20px;\r\n padding-bottom: 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .section-header {\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n color: var(--text-muted);\r\n margin: 20px 0 12px 0;\r\n }\r\n\r\n .control-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .control-label {\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .dot-indicator {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n }\r\n\r\n .switch {\r\n position: relative;\r\n width: 48px;\r\n height: 26px;\r\n background: #1e2633;\r\n border-radius: 13px;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n\r\n .switch.active { background: var(--accent-violet); }\r\n\r\n .switch::after {\r\n content: '';\r\n position: absolute;\r\n top: 3px;\r\n left: 3px;\r\n width: 20px;\r\n height: 20px;\r\n background: white;\r\n border-radius: 50%;\r\n transition: transform 0.3s;\r\n }\r\n\r\n .switch.active::after { transform: translateX(22px); }\r\n\r\n .slider-group { margin-bottom: 16px; }\r\n .slider-header {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 8px;\r\n font-size: 0.85rem;\r\n }\r\n \r\n .slider-val { color: var(--accent-violet); font-family: 'JetBrains Mono', monospace; }\r\n\r\n input[type=\"range\"] {\r\n width: 100%;\r\n height: 4px;\r\n background: #1e2633;\r\n border-radius: 2px;\r\n outline: none;\r\n -webkit-appearance: none;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 18px;\r\n height: 18px;\r\n background: white;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n box-shadow: 0 2px 6px rgba(0,0,0,0.3);\r\n }\r\n\r\n .info-panel {\r\n position: fixed;\r\n top: 20px;\r\n right: 20px;\r\n width: 280px;\r\n background: var(--panel-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 16px;\r\n padding: 24px;\r\n z-index: 100;\r\n backdrop-filter: blur(16px);\r\n text-align: center;\r\n }\r\n\r\n .theta-display {\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n font-family: 'JetBrains Mono', monospace;\r\n color: var(--text-main);\r\n line-height: 1;\r\n margin: 10px 0;\r\n }\r\n\r\n .theta-label {\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .flux-box {\r\n background: rgba(0,0,0,0.2);\r\n border-radius: 12px;\r\n padding: 16px;\r\n margin-top: 16px;\r\n font-family: 'Times New Roman', serif;\r\n font-style: italic;\r\n font-size: 1.4rem;\r\n }\r\n\r\n .legend {\r\n margin-top: 24px;\r\n text-align: left;\r\n padding-top: 16px;\r\n border-top: 1px solid var(--border-color);\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n }\r\n .legend-line { width: 20px; height: 3px; border-radius: 2px; }\r\n\r\n .instructions {\r\n position: fixed;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: var(--panel-bg);\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n z-index: 100;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .logo-box {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: rgba(20, 25, 35, 0.9);\r\n padding: 12px 16px;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-color);\r\n z-index: 100;\r\n }\r\n \r\n .logo-img { width: 100px; }\r\n .logo-text { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }\r\n .logo-text b { display: block; color: var(--text-main); font-weight: 600; }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"canvas-container\"><\/div>\r\n\r\n<!-- Panel de Control -->\r\n<div class=\"control-panel\">\r\n <div class=\"panel-title\">Flujo Electrico<\/div>\r\n <div class=\"panel-subtitle\">Visualizacion de Superficie Gaussiana<\/div>\r\n\r\n <div class=\"section-header\">Opciones de Visualizacion<\/div>\r\n\r\n <div class=\"control-item\">\r\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-orange)\"><\/div>Lineas de Campo E<\/div>\r\n <div class=\"switch active\" id=\"tglLines\"><\/div>\r\n <\/div>\r\n <div class=\"control-item\">\r\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-violet)\"><\/div>Elemento dA<\/div>\r\n <div class=\"switch active\" id=\"tglDA\"><\/div>\r\n <\/div>\r\n <div class=\"control-item\">\r\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-green)\"><\/div>Proyeccion dA cos(theta)<\/div>\r\n <div class=\"switch active\" id=\"tglProj\"><\/div>\r\n <\/div>\r\n <div class=\"control-item\">\r\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-red)\"><\/div>Vector E<\/div>\r\n <div class=\"switch active\" id=\"tglE\"><\/div>\r\n <\/div>\r\n <div class=\"control-item\">\r\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-blue)\"><\/div>Vector Area<\/div>\r\n <div class=\"switch active\" id=\"tglN\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"section-header\">Transformar Superficie<\/div>\r\n\r\n <div class=\"slider-group\">\r\n <div class=\"slider-header\">\r\n <span>Tamano<\/span>\r\n <span class=\"slider-val\" id=\"valScale\">1.0x<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sldScale\" min=\"0.5\" max=\"2.0\" step=\"0.1\" value=\"1.0\">\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Panel de Informacion -->\r\n<div class=\"info-panel\">\r\n <div class=\"theta-label\">Angulo entre E y n<\/div>\r\n <div class=\"theta-display\" id=\"dispTheta\">0.0<\/div>\r\n \r\n <div class=\"flux-box\">\r\n <span style=\"color: var(--accent-violet)\">dPhi<\/span> = \r\n <span style=\"color: var(--accent-red)\">E<\/span> \r\n <span style=\"color: var(--accent-blue)\">dA<\/span> \r\n cos(<span style=\"color: var(--text-main)\" id=\"dispThetaSmall\">0<\/span>)\r\n <\/div>\r\n\r\n <div class=\"legend\">\r\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-orange)\"><\/div>Lineas de campo electrico<\/div>\r\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-red)\"><\/div>Vector campo electrico (E)<\/div>\r\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-blue)\"><\/div>Vector normal\/area (n \/ dA)<\/div>\r\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-green)\"><\/div>Area proyectada<\/div>\r\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-violet)\"><\/div>Superficie gaussiana<\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Instrucciones -->\r\n<div class=\"instructions\">\r\n Click Izq en superficie: Mover | Click Der en superficie: Rotar | Fondo: Rotar camara | Scroll: Zoom\r\n<\/div>\r\n\r\n<!-- Logo -->\r\n<div class=\"logo-box\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\r\n <div class=\"logo-text\"><b>FICA -UNSL<\/b>Simulaciones Interactivas<\/div>\r\n<\/div>\r\n\r\n<script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"three\": \"https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js\",\r\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/\"\r\n }\r\n}\r\n<\/script>\r\n\r\n<script type=\"module\">\r\nimport * as THREE from 'three';\r\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\r\n\r\n\/\/ --- CONFIGURACION DE ESCENA ---\r\nconst container = document.getElementById('canvas-container');\r\nconst scene = new THREE.Scene();\r\nscene.background = new THREE.Color(0x0f1218);\r\n\r\nconst camera = new THREE.PerspectiveCamera(50, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\ncamera.position.set(0, 5, 12);\r\n\r\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\ncontainer.appendChild(renderer.domElement);\r\n\r\nconst orbitControls = new OrbitControls(camera, renderer.domElement);\r\norbitControls.enableDamping = true;\r\norbitControls.minDistance = 5;\r\norbitControls.maxDistance = 30;\r\n\r\n\/\/ --- INICIO MODIFICACION: ZOOM GRADUAL MANUAL ---\r\n\/\/ Desactivamos el zoom por defecto de OrbitControls\r\norbitControls.enableZoom = false;\r\n\r\n\/\/ Implementamos nuestro propio zoom con la rueda del mouse\r\nrenderer.domElement.addEventListener('wheel', (event) => {\r\n event.preventDefault(); \/\/ Previene el scroll de la p\u00e1gina\r\n\r\n \/\/ Velocidad del zoom (ajusta este valor para hacerlo m\u00e1s r\u00e1pido o lento)\r\n const zoomSpeed = 0.002;\r\n \r\n \/\/ Calculamos cu\u00e1nto movernos basado en la rueda\r\n const delta = event.deltaY * zoomSpeed;\r\n\r\n \/\/ Obtenemos la direcci\u00f3n en la que mira la c\u00e1mara\r\n const direction = new THREE.Vector3();\r\n camera.getWorldDirection(direction);\r\n\r\n \/\/ Movemos la c\u00e1mara a lo largo de su eje de visi\u00f3n\r\n \/\/ La distancia movida es proporcional a la distancia actual (efecto dolly)\r\n camera.position.addScaledVector(direction, -delta * camera.position.length());\r\n\r\n}, { passive: false });\r\n\/\/ --- FIN MODIFICACION ---\r\n\r\n\/\/ Iluminacion\r\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.7);\r\nscene.add(ambientLight);\r\nconst dirLight = new THREE.DirectionalLight(0xffffff, 0.8);\r\ndirLight.position.set(5, 10, 7);\r\nscene.add(dirLight);\r\n\r\n\/\/ --- CREACION DE ASSETS ---\r\n\r\n\/\/ 1. Carga Puntual (Fija en el origen)\r\nconst chargeGeo = new THREE.SphereGeometry(0.3, 32, 32);\r\nconst chargeMat = new THREE.MeshStandardMaterial({ \r\n color: 0xffd54f, \r\n emissive: 0xffa000, \r\n emissiveIntensity: 0.6,\r\n roughness: 0.3\r\n});\r\nconst chargeMesh = new THREE.Mesh(chargeGeo, chargeMat);\r\nscene.add(chargeMesh);\r\n\r\n\/\/ 2. Lineas de Campo Electrico (Fijas en el espacio)\r\nconst fieldLinesGroup = new THREE.Group();\r\nscene.add(fieldLinesGroup);\r\n\r\nfunction createFieldLines() {\r\n const lineCount = 12;\r\n const color = 0xffa726; \/\/ Naranja\r\n \r\n for (let i = 0; i < lineCount; i++) {\r\n \/\/ Distribucion uniforme (Fibonacci Sphere)\r\n const phi = Math.acos(1 - 2 * (i + 0.5) \/ lineCount);\r\n const theta = Math.PI * (1 + Math.sqrt(5)) * i;\r\n \r\n const dir = new THREE.Vector3(\r\n Math.sin(phi) * Math.cos(theta),\r\n Math.sin(phi) * Math.sin(theta),\r\n Math.cos(phi)\r\n );\r\n \r\n \/\/ Crear linea\r\n const points = [];\r\n for (let k = 1; k < 40; k++) {\r\n points.push(dir.clone().multiplyScalar(k * 0.25));\r\n }\r\n \r\n const geo = new THREE.BufferGeometry().setFromPoints(points);\r\n const mat = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.6 });\r\n const line = new THREE.Line(geo, mat);\r\n fieldLinesGroup.add(line);\r\n \r\n \/\/ Puntas de flecha\r\n const arrowPos = dir.clone().multiplyScalar(8);\r\n const arrow = new THREE.ArrowHelper(dir, arrowPos, 0.8, color, 0.4, 0.2);\r\n fieldLinesGroup.add(arrow);\r\n }\r\n}\r\ncreateFieldLines();\r\n\r\n\/\/ 3. Superficie Gaussiana Irregular (Movible)\r\nconst surfaceGroup = new THREE.Group();\r\nscene.add(surfaceGroup);\r\n\r\nlet surfaceGeometry = new THREE.SphereGeometry(3, 64, 64);\r\n\/\/ Deformar para que sea irregular\r\nconst positions = surfaceGeometry.attributes.position;\r\nfor (let i = 0; i < positions.count; i++) {\r\n const x = positions.getX(i);\r\n const y = positions.getY(i);\r\n const z = positions.getZ(i);\r\n const noise = 0.3 * Math.sin(5 * x) * Math.cos(4 * y) + 0.2 * Math.sin(3 * z);\r\n const factor = 1 + noise * 0.2;\r\n positions.setXYZ(i, x * factor, y * factor, z * factor);\r\n}\r\nsurfaceGeometry.computeVertexNormals();\r\n\r\nconst surfaceMaterial = new THREE.MeshPhongMaterial({\r\n color: 0x9575cd, \/\/ Violeta\r\n transparent: true,\r\n opacity: 0.35,\r\n side: THREE.DoubleSide,\r\n depthWrite: false,\r\n shininess: 100\r\n});\r\n\r\nconst surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial);\r\nsurfaceGroup.add(surfaceMesh);\r\n\r\n\/\/ Wireframe para mejor visualizacion\r\nconst wireMat = new THREE.MeshBasicMaterial({ color: 0x9575cd, wireframe: true, transparent: true, opacity: 0.1 });\r\nconst wireMesh = new THREE.Mesh(surfaceGeometry, wireMat);\r\nsurfaceGroup.add(wireMesh);\r\n\r\n\/\/ 4. Elementos dinamicos (dA, Vectores, Proyeccion)\r\nconst dynamicGroup = new THREE.Group();\r\nscene.add(dynamicGroup);\r\n\r\n\/\/ Punto de interes local en la superficie (se actualizara)\r\nconst localPoint = new THREE.Vector3(1, 1, 1).normalize().multiplyScalar(3);\r\n\r\n\/\/ Funcion helper para labels con tama\u00f1o constante\r\nfunction createLabel(text, color) {\r\n const canvas = document.createElement('canvas');\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = 128; canvas.height = 128;\r\n ctx.fillStyle = color;\r\n ctx.font = \"bold 80px 'Space Grotesk', sans-serif\";\r\n ctx.textAlign = \"center\";\r\n ctx.textBaseline = \"middle\";\r\n ctx.fillText(text, 64, 64);\r\n \r\n const tex = new THREE.CanvasTexture(canvas);\r\n const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, sizeAttenuation: false });\r\n const sprite = new THREE.Sprite(mat);\r\n sprite.scale.set(0.07, 0.07, 1); \/\/ Tama\u00f1o en pantalla\r\n return sprite;\r\n}\r\n\r\n\/\/ Estado de la UI\r\nconst uiState = {\r\n showLines: true,\r\n showDA: true,\r\n showProj: true,\r\n showE: true,\r\n showN: true\r\n};\r\n\r\nfunction updateDynamicElements() {\r\n dynamicGroup.clear();\r\n \r\n \/\/ 1. Obtener posicion mundial y normal\r\n \/\/ Asumimos que el vector normal local es aproximadamente la direccion radial desde el centro del objeto\r\n \/\/ Para una superficie deformada, lo ideal es usar vertex normals, pero para simplicidad visual usamos la aproximacion radial.\r\n \r\n const worldPos = localPoint.clone().applyMatrix4(surfaceGroup.matrixWorld);\r\n \/\/ Normal local en el punto (aproximada como la direccion radial normalizada)\r\n const localNormal = localPoint.clone().normalize();\r\n const worldNormal = localNormal.clone().transformDirection(surfaceGroup.matrixWorld).normalize();\r\n \r\n \/\/ 2. Vector E (Direccion desde carga hasta el punto)\r\n const vecE = worldPos.clone().sub(chargeMesh.position).normalize(); \/\/ Carga en (0,0,0)\r\n \r\n \/\/ 3. Calculos fisicos\r\n let cosTheta = vecE.dot(worldNormal);\r\n cosTheta = Math.max(-1, Math.min(1, cosTheta));\r\n const theta = Math.acos(cosTheta);\r\n \r\n \/\/ Actualizar UI\r\n const thetaDeg = (theta * 180 \/ Math.PI).toFixed(1);\r\n document.getElementById('dispTheta').innerText = thetaDeg + '\\u00B0';\r\n document.getElementById('dispThetaSmall').innerText = thetaDeg + '\\u00B0';\r\n \r\n \/\/ 4. Dibujar Elemento dA (Parche)\r\n if (uiState.showDA) {\r\n const dAGeo = new THREE.CircleGeometry(0.6, 32);\r\n const dAMat = new THREE.MeshBasicMaterial({ \r\n color: 0x9575cd, \/\/ Violeta igual que la superficie\r\n side: THREE.DoubleSide,\r\n transparent: true,\r\n opacity: 0.9\r\n });\r\n const dAMesh = new THREE.Mesh(dAGeo, dAMat);\r\n \r\n \/\/ Posicionar y orientar\r\n dAMesh.position.copy(worldPos);\r\n const up = new THREE.Vector3(0, 0, 1);\r\n const quat = new THREE.Quaternion().setFromUnitVectors(up, worldNormal);\r\n dAMesh.setRotationFromQuaternion(quat);\r\n \/\/ Levantar ligeramente para evitar z-fighting\r\n dAMesh.position.add(worldNormal.clone().multiplyScalar(0.01));\r\n \r\n \/\/ Borde blanco para resaltar\r\n const edges = new THREE.LineSegments(new THREE.EdgesGeometry(dAGeo), new THREE.LineBasicMaterial({ color: 0xffffff }));\r\n edges.position.copy(dAMesh.position);\r\n edges.rotation.copy(dAMesh.rotation);\r\n \r\n dynamicGroup.add(dAMesh);\r\n dynamicGroup.add(edges);\r\n \r\n \/\/ Label dA (sobre el parche)\r\n const lblDA = createLabel('dA', '#FFFFFF');\r\n lblDA.position.copy(worldPos).add(worldNormal.clone().multiplyScalar(0.4));\r\n dynamicGroup.add(lblDA);\r\n }\r\n \r\n \/\/ 5. Dibujar Proyeccion dA cos(theta)\r\n if (uiState.showProj && Math.abs(cosTheta) > 0.05) {\r\n \/\/ Tamano proporcional a cos(theta)\r\n const radius = 0.6 * Math.abs(cosTheta);\r\n const projGeo = new THREE.CircleGeometry(radius, 32);\r\n const projMat = new THREE.MeshBasicMaterial({ \r\n color: 0x66bb6a, \/\/ Verde\r\n side: THREE.DoubleSide,\r\n transparent: true,\r\n opacity: 0.8\r\n });\r\n const projMesh = new THREE.Mesh(projGeo, projMat);\r\n \r\n \/\/ Orientar perpendicular a E\r\n const upProj = new THREE.Vector3(0, 0, 1);\r\n const quatProj = new THREE.Quaternion().setFromUnitVectors(upProj, vecE);\r\n projMesh.setRotationFromQuaternion(quatProj);\r\n \r\n \/\/ Posicionar: \"Debajo\" del punto de interseccion a lo largo de E\r\n \/\/ O desplazado para ver mejor. Lo desplazamos un poco \"abajo\" segun E\r\n projMesh.position.copy(worldPos).sub(vecE.clone().multiplyScalar(0.8));\r\n \r\n dynamicGroup.add(projMesh);\r\n \r\n \/\/ Linea punteada de conexion\r\n const linePoints = [worldPos.clone().sub(worldNormal.clone().multiplyScalar(0.01)), projMesh.position];\r\n const lineGeo = new THREE.BufferGeometry().setFromPoints(linePoints);\r\n const lineMat = new THREE.LineDashedMaterial({ color: 0x66bb6a, dashSize: 0.1, gapSize: 0.05 });\r\n const line = new THREE.Line(lineGeo, lineMat);\r\n line.computeLineDistances();\r\n dynamicGroup.add(line);\r\n \r\n \/\/ Label Proyeccion\r\n const lblProj = createLabel('dA cos\\u03b8', '#66bb6a');\r\n lblProj.position.copy(projMesh.position).sub(vecE.clone().multiplyScalar(0.4));\r\n dynamicGroup.add(lblProj);\r\n }\r\n \r\n \/\/ 6. Vectores\r\n \/\/ Vector E (Rojo)\r\n if (uiState.showE) {\r\n const arrowE = new THREE.ArrowHelper(vecE, worldPos, 2.0, 0xef5350, 0.4, 0.2);\r\n dynamicGroup.add(arrowE);\r\n \r\n const lblE = createLabel('E', '#ef5350');\r\n lblE.position.copy(worldPos).add(vecE.clone().multiplyScalar(2.4));\r\n dynamicGroup.add(lblE);\r\n }\r\n \r\n \/\/ Vector Normal \/ Area (Azul)\r\n if (uiState.showN) {\r\n const arrowN = new THREE.ArrowHelper(worldNormal, worldPos, 2.0, 0x42a5f5, 0.4, 0.2);\r\n dynamicGroup.add(arrowN);\r\n \r\n const lblN = createLabel('n', '#42a5f5');\r\n lblN.position.copy(worldPos).add(worldNormal.clone().multiplyScalar(2.4));\r\n dynamicGroup.add(lblN);\r\n }\r\n \r\n \/\/ Arco del angulo\r\n if (theta > 0.1) {\r\n const arcAxis = new THREE.Vector3().crossVectors(worldNormal, vecE).normalize();\r\n if (arcAxis.length() > 0.001) {\r\n const arcPoints = [];\r\n for (let i = 0; i <= 32; i++) {\r\n const a = (i \/ 32) * theta;\r\n const rot = new THREE.Quaternion().setFromAxisAngle(arcAxis, a);\r\n const dir = worldNormal.clone().applyQuaternion(rot).multiplyScalar(1.2);\r\n arcPoints.push(dir.add(worldPos));\r\n }\r\n const arcGeo = new THREE.BufferGeometry().setFromPoints(arcPoints);\r\n const arc = new THREE.Line(arcGeo, new THREE.LineDashedMaterial({ color: 0xffffff, dashSize: 0.05, gapSize: 0.03 }));\r\n arc.computeLineDistances();\r\n dynamicGroup.add(arc);\r\n \r\n \/\/ Label Theta\r\n const midAngle = theta \/ 2;\r\n const qMid = new THREE.Quaternion().setFromAxisAngle(arcAxis, midAngle);\r\n const dirLbl = worldNormal.clone().applyQuaternion(qMid).multiplyScalar(1.6);\r\n const lblT = createLabel('\\u03b8', '#FFFFFF');\r\n lblT.position.copy(worldPos).add(dirLbl);\r\n dynamicGroup.add(lblT);\r\n }\r\n }\r\n}\r\n\r\n\/\/ --- INTERACCION ---\r\n\r\n\/\/ Raycaster para detectar clicks en la superficie\r\nconst raycaster = new THREE.Raycaster();\r\nconst mouse = new THREE.Vector2();\r\nlet isDraggingSurface = false;\r\nlet isRotatingSurface = false;\r\nconst dragPlane = new THREE.Plane();\r\nconst intersection = new THREE.Vector3();\r\nconst offset = new THREE.Vector3();\r\n\r\nfunction onMouseDown(event) {\r\n if (event.target !== renderer.domElement) return;\r\n \r\n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\r\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\r\n \r\n raycaster.setFromCamera(mouse, camera);\r\n const intersects = raycaster.intersectObject(surfaceMesh);\r\n \r\n if (intersects.length > 0) {\r\n if (event.button === 0) { \/\/ Click izq: Mover\r\n isDraggingSurface = true;\r\n orbitControls.enabled = false;\r\n dragPlane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(new THREE.Vector3()).negate(), surfaceGroup.position);\r\n raycaster.ray.intersectPlane(dragPlane, intersection);\r\n offset.subVectors(surfaceGroup.position, intersection);\r\n } else if (event.button === 2) { \/\/ Click der: Rotar\r\n isRotatingSurface = true;\r\n orbitControls.enabled = false;\r\n }\r\n }\r\n}\r\n\r\nfunction onMouseMove(event) {\r\n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\r\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\r\n \r\n if (isDraggingSurface) {\r\n raycaster.setFromCamera(mouse, camera);\r\n raycaster.ray.intersectPlane(dragPlane, intersection);\r\n surfaceGroup.position.copy(intersection.add(offset));\r\n updateDynamicElements();\r\n } else if (isRotatingSurface) {\r\n \/\/ Rotacion simple basada en movimiento del mouse\r\n surfaceGroup.rotation.y += event.movementX * 0.01;\r\n surfaceGroup.rotation.x += event.movementY * 0.01;\r\n updateDynamicElements();\r\n }\r\n}\r\n\r\nfunction onMouseUp() {\r\n isDraggingSurface = false;\r\n isRotatingSurface = false;\r\n orbitControls.enabled = true;\r\n}\r\n\r\nwindow.addEventListener('mousedown', onMouseDown);\r\nwindow.addEventListener('mousemove', onMouseMove);\r\nwindow.addEventListener('mouseup', onMouseUp);\r\nwindow.addEventListener('contextmenu', (e) => e.preventDefault()); \/\/ Prevenir menu contextual\r\n\r\n\/\/ --- UI CONTROLS ---\r\nfunction setupToggle(id, key) {\r\n const el = document.getElementById(id);\r\n el.addEventListener('click', () => {\r\n el.classList.toggle('active');\r\n uiState[key] = el.classList.contains('active');\r\n if (key === 'showLines') fieldLinesGroup.visible = uiState[key];\r\n else updateDynamicElements();\r\n });\r\n}\r\n\r\nsetupToggle('tglLines', 'showLines');\r\nsetupToggle('tglDA', 'showDA');\r\nsetupToggle('tglProj', 'showProj');\r\nsetupToggle('tglE', 'showE');\r\nsetupToggle('tglN', 'showN');\r\n\r\ndocument.getElementById('sldScale').addEventListener('input', (e) => {\r\n const v = parseFloat(e.target.value);\r\n document.getElementById('valScale').innerText = v.toFixed(1) + 'x';\r\n surfaceGroup.scale.setScalar(v);\r\n updateDynamicElements();\r\n});\r\n\r\nwindow.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n});\r\n\r\n\/\/ Inicializar\r\nupdateDynamicElements();\r\n\r\n\/\/ Loop\r\nfunction animate() {\r\n requestAnimationFrame(animate);\r\n orbitControls.update();\r\n renderer.render(scene, camera);\r\n}\r\nanimate();\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5605","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ley_de_gauss - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_gauss - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:45:43+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\",\"name\":\"ley_de_gauss - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-06T01:05:31+00:00\",\"dateModified\":\"2026-03-19T17:45:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_gauss\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png\",\"contentUrl\":\"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ley_de_gauss - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_gauss - F\u00edsica 2","og_description":"Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:45:43+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","name":"ley_de_gauss - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-06T01:05:31+00:00","dateModified":"2026-03-19T17:45:43+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_gauss"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5605"}],"version-history":[{"count":28,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605\/revisions"}],"predecessor-version":[{"id":6688,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605\/revisions\/6688"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}