Merge pull request #89 from cometsinthesky/add-magnetic-field

Add magnetic field

src/field.js

@@ -1,43 +1,80 @@
+// ADD GRID
+var gridColor = 0xf0f0f0;
+var gridHelper = new THREE.GridHelper(30, 50, gridColor, gridColor);
+gridHelper.material.opacity = 0.4;
+gridHelper.material.transparent = true;
+gridHelper.visible = true; // Torna a grade visível
+scene.add(gridHelper);
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Função para esconder ou mostrar o gridHelper
+    function toggleGridHelperVisibility() {
+        gridHelper.visible = document.getElementById("malhaCheckbox").checked;
+    }
+
+    // Event listener para o checkbox
+    document.getElementById("malhaCheckbox").addEventListener("change", function () {
+        toggleGridHelperVisibility(); // Chama a função para esconder ou mostrar o gridHelper
+    });
+
+    // Inicialmente, esconder o gridHelper
+    toggleGridHelperVisibility();
+});
+
+// Função para calcular o vetor de campo magnético B em um ponto r
+function calculateMagneticField(r) {
+    const m = new THREE.Vector3(0, 1, 0); // Momento dipolar magnético
+    const rMag = r.length();
+    const rDotM = r.dot(m);
+    const term1 = r.clone().multiplyScalar(3 * rDotM / Math.pow(rMag, 5));
+    const term2 = m.clone().multiplyScalar(1 / Math.pow(rMag, 3));
+    const B = new THREE.Vector3().subVectors(term1, term2);
+    return B;
+}
+
+// Declare uma lista para armazenar as linhas de campo magnético
+const fieldLines = [];
+
 // Função para desenhar linhas de campo magnético
 function drawFieldLines() {
-  const numLines = 20; // Número de linhas de campo
-  const lineMaterial = new THREE.LineBasicMaterial({ color: 0x7cd5ff, transparent: true, opacity: 0.8 });
-  const lines = []; // Array para armazenar as linhas
+    // Limpe quaisquer linhas de campo magnético existentes antes de desenhar novas
+    clearFieldLines();
 
-  for (let i = 0; i < numLines; i++) {
-      // Distribuição uniforme usando a técnica de Fibonacci
-      const offset = 2 / numLines;
-      const increment = Math.PI * (2 - Math.sqrt(8));
+    const numLines = 20; // Número de linhas de campo
+    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x7cd5ff, transparent: true, opacity: 0.8 });
 
-      const y = ((i * offset) - 1) + (offset / 2);
-      const radius = Math.sqrt(1 - y * y);
+    for (let i = 0; i < numLines; i++) {
+        // Distribuição uniforme usando a técnica de Fibonacci
+        const offset = 2 / numLines;
+        const increment = Math.PI * (2 - Math.sqrt(8));
 
-      const phi = i * increment;
+        const y = ((i * offset) - 1) + (offset / 2);
+        const radius = Math.sqrt(1 - y * y);
 
-      const x = Math.cos(phi) * radius;
-      const z = Math.sin(phi) * radius;
+        const phi = i * increment;
 
-      const lineGeometry = new THREE.BufferGeometry();
-      const points = [];
-      let position = new THREE.Vector3(x, y, z).multiplyScalar(1); // Começa logo fora da esfera
+        const x = Math.cos(phi) * radius;
+        const z = Math.sin(phi) * radius;
 
-      for (let j = 0; j < 3000; j++) {
-          points.push(position.clone());
-          const B = calculateMagneticField(position).normalize();
-          position.add(B.multiplyScalar(0.1)); // Tamanho do passo
-          if (position.length() > 100) points.length = 0; // Evita que as linhas se estendam indefinidamente
-      }
+        const lineGeometry = new THREE.BufferGeometry();
+        const points = [];
+        let position = new THREE.Vector3(x, y, z).multiplyScalar(1); // Começa logo fora da esfera
 
-      lineGeometry.setFromPoints(points);
-      const line = new THREE.Line(lineGeometry, lineMaterial);
-      lines.push(line); // Adiciona a linha ao array
-  }
+        for (let j = 0; j < 3000; j++) {
+            points.push(position.clone());
+            const B = calculateMagneticField(position).normalize();
+            position.add(B.multiplyScalar(0.1)); // Tamanho do passo
+            if (position.length() > 100) points.length = 0; // Evita que as linhas se estendam indefinidamente
+        }
 
-  return lines; // Retorna todas as linhas criadas
+        lineGeometry.setFromPoints(points);
+        const line = new THREE.Line(lineGeometry, lineMaterial);
+        line.userData.isFieldLine = true; // Marcador para identificar linhas de campo magnético
+        fieldLines.push(line); // Adiciona a linha ao array
+        scene.add(line); // Adiciona a linha à cena
+    }
 }
 
-clearFieldLines()
-
 // Selecione o checkbox pelo ID
 const checkbox = document.getElementById('fieldCheckbox');
 
@@ -46,8 +83,7 @@ checkbox.addEventListener('change', function() {
     // Verifique se o checkbox está selecionado
     if (this.checked) {
         // Se estiver selecionado, chame a função drawFieldLines
-        const lines = drawFieldLines(); // Desenha as linhas
-        lines.forEach(line => scene.add(line)); // Adiciona as linhas à cena
+        drawFieldLines(); // Desenha as linhas
     } else {
         // Se não estiver selecionado, limpe as linhas da cena
         clearFieldLines();
@@ -56,14 +92,8 @@ checkbox.addEventListener('change', function() {
 
 // Função para limpar as linhas de campo magnético da cena
 function clearFieldLines() {
-  // Remova todas as linhas da cena
-  const linesToRemove = [];
-  scene.children.forEach((child) => {
-      if (child instanceof THREE.Line) {
-          linesToRemove.push(child);
-      }
-  });
-  linesToRemove.forEach((line) => {
-      scene.remove(line);
-  });
+    // Remova todas as linhas de campo magnético da cena
+    fieldLines.forEach(line => scene.remove(line));
+    // Limpe a lista fieldLines
+    fieldLines.length = 0;
 }

src/functions.js

@@ -177,4 +177,8 @@ gridHelper.dispose();
 arrowHelper1.dispose();
 arrowHelper2.dispose();
 particulas.dispose();
-particulas2.dispose();
+particulas2.dispose();
+// Dispose da geometria
+line.geometry.dispose();
+// Dispose do material
+line.material.dispose();

src/scene-config.js

@@ -101,7 +101,7 @@ var gridColor = 0xf0f0f0;
 var gridHelper = new THREE.GridHelper(30, 50, gridColor, gridColor);
 gridHelper.material.opacity = 0.4;
 gridHelper.material.transparent = true;
-gridHelper.visible = true; // Torna a grade visível
+gridHelper.visible = false; // Define a grade como invisível inicialmente
 scene.add(gridHelper);
 
 document.addEventListener("DOMContentLoaded", function () {