diff --git a/.clang-format b/.clang-format
new file mode 100644
index 0000000..67037c8
--- /dev/null
+++ b/.clang-format
@@ -0,0 +1,35 @@
+#
+#    clang format
+#
+#    Copyright (c) 2023 Okawa Yusuke
+#
+#    key reference: https://clang.llvm.org/docs/ClangFormatStyleOptions.html
+#
+
+UseTab: Never
+IndentWidth: 4
+ConstructorInitializerIndentWidth: 4
+ContinuationIndentWidth: 4
+TabWidth: 4
+SpacesBeforeTrailingComments: 4
+BinPackParameters: true
+AlignConsecutiveAssignments: true
+AlignConsecutiveDeclarations: true
+AlignEscapedNewlinesLeft: true
+BreakBeforeBraces: Allman
+AllowShortIfStatementsOnASingleLine: false
+IndentCaseLabels: false
+ColumnLimit: 0
+AccessModifierOffset: -4
+NamespaceIndentation: All
+FixNamespaceComments: true
+AllowShortLambdasOnASingleLine: Inline
+BreakInheritanceList: BeforeComma
+Cpp11BracedListStyle: false
+AllowShortCaseLabelsOnASingleLine: true
+SortIncludes: false
+PPIndentWidth: 4
+BreakConstructorInitializers: BeforeComma
+PointerAlignment: Left
+ReferenceAlignment: Left
+IndentPPDirectives: AfterHash
diff --git a/app/index.html b/app/index.html
index 9fa606b..3bf17d5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -14,7 +14,9 @@
       <div class="settings">
         <label class="dimension_toggle">
           <input type="checkbox" id="dimension_toggle_switch" checked/>
-          <div id="dimension_toggle_slider">3D</div>
+          <div id="dimension_toggle_slider"></div>
+          <div class="dimension_2d">2D</div>
+          <div class="dimension_3d">3D</div>
         </label>
         <!-- <div class="settings_2d">
           <label class="checkbox">
@@ -26,6 +28,10 @@
             電気力線
           </label> -->
         <div class="settings_3d">
+          <label class="checkbox">
+            <input type="checkbox" id="checkbox_show_grid" checked />
+            グリッド表示
+          </label>
           <label class="checkbox">
             <input type="checkbox" id="checkbox_auto_rotate" checked />
             自動回転
diff --git a/app/script/Dragger.js b/app/script/Dragger.js
new file mode 100644
index 0000000..30dc47e
--- /dev/null
+++ b/app/script/Dragger.js
@@ -0,0 +1,82 @@
+import * as THREE from 'three';
+import * as EFSim from "./Init.js";
+
+
+// 点電荷をドラッグして移動させるクラス
+export class Dragger {
+    constructor(positions, objects, camera, dom, controls, scene) {
+
+        this.positions = positions;
+        this.objects = objects;
+        this.camera = camera;
+        this.dom = dom;
+        this.controls = controls;
+        this.scene = scene;
+
+        // ドラッグでオブジェクトを移動するためのコントロール
+        this.trans_controls = EFSim.CreateTransformControls(camera, dom, controls, scene);
+
+        this.ray = new THREE.Raycaster();
+        this.pointer = new THREE.Vector2();
+
+        this.listeners = [];
+
+        this.selected = null;
+
+        this.on_down_position = new THREE.Vector2();
+        this.on_up_position = new THREE.Vector2();
+
+        this.setEvent();
+    }
+
+    setEvent = () => {
+        const onClick = (event) => {
+            this.pointer.x = (event.clientX / this.dom.offsetWidth) * 2 - 1;
+            this.pointer.y = -(event.clientY / this.dom.offsetHeight) * 2 + 1;
+
+            // 現在のカメラの位置からクリックした位置に向かう光線を作成
+            this.ray.setFromCamera(this.pointer, this.camera);
+
+            // 光線との交差判定
+            const intersects = this.ray.intersectObjects(this.objects, false);
+
+            if (intersects.length > 0) {
+                const object = intersects[0].object;
+
+                if (object !== this.trans_controls.object) {
+                    this.trans_controls.attach(object);
+                    this.selected = object;
+                }
+            }
+        };
+        this.dom.addEventListener('click', onClick);
+
+        // コントロール外をクリックすることで選択を解除する
+        // (オブジェクトを移動させなかった場合に、選択を解除する)
+        // https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_spline_editor.html
+        document.addEventListener('pointerdown', (event) => {
+            this.on_down_position.x = event.clientX;
+            this.on_down_position.y = event.clientY;
+        });
+        document.addEventListener('pointerup', (event) => {
+            this.on_up_position.x = event.clientX;
+            this.on_up_position.y = event.clientY;
+            if (this.on_down_position.distanceTo(this.on_up_position) === 0) {
+                this.trans_controls.detach();
+            }
+        });
+
+        // 座標を更新
+        this.trans_controls.addEventListener('change', () => {
+            this.positions.forEach((position, index) => {
+                position.copy(this.objects[index].position);
+            });
+        });
+    }
+
+    // オブジェクトがドラッグされたときのイベント
+    addEventListener = (type, listener) => {
+        this.trans_controls.addEventListener(type, listener);
+    }
+
+}
\ No newline at end of file
diff --git a/app/script/Field3D.js b/app/script/Field3D.js
index 67762e0..7531ae0 100644
--- a/app/script/Field3D.js
+++ b/app/script/Field3D.js
@@ -1,185 +1,233 @@
-import * as THREE from "three";
-import PointCharge from "./PointCharge.js";
+import * as THREE from 'three';
 
-// 指定座標における電場ベクトルを計算
-export const PosToElectricFieldVector = (pos, point_charges) => {
-  var electric_field_vector = new THREE.Vector3(0, 0, 0); // 合成ベクトル
-  for (const point_charge of point_charges) {
-    const diff = new THREE.Vector3(0, 0, 0);
-    diff.subVectors(pos, point_charge.pos); // 点電荷と観測点との差分ベクトル
+// THREE.Vector3 が等しいかどうかを判定
+const EqualsVector = (v1, v2, eps = Number.EPSILON) => {
+    return (
+        Math.abs(v1.x - v2.x) < eps && Math.abs(v1.y - v2.y) < eps &&
+        Math.abs(v1.z - v2.z) < eps);
+};
+
+// 1つの点電荷から受ける電界ベクトルを算出
+// @param pos 観測点の座標
+// @param point_charge 点電荷
+const EFVectorFromSingleCharge = (pos, point_charge) => {
+
+    if (EqualsVector(pos, point_charge.pos)) {
+        return new THREE.Vector3();  // 観測点が点電荷と重なっている場合
+    }
 
-    const r_sq = diff.lengthSq(); // 点電荷と観測点との距離^2 (平方根処理をなくすため)
-    const k = 8.987552 * 10 ** 9; // クーロン定数
+    const diff = new THREE.Vector3();
+    diff.subVectors(pos, point_charge.pos);    // 点電荷と観測点との差分
 
-    const factor = r_sq ? (k * point_charge.charge) / r_sq ** 2 : 0; // ベクトルにかける係数
+    const k = 8.987552 * 10 ** 9;    // クーロン定数
+    const r_sq4 = diff.lengthSq() ** 2;    // 点電荷と観測点との距離^4
+
+    diff.multiplyScalar((k * point_charge.charge) / r_sq4);    // クーロン力算出
+
+    return diff;    // ベクトルにかける係数
+};
+
+// 指定座標における電場ベクトルを計算
+// @param pos 観測点の座標
+// @param point_charges 点電荷の配列
+const EFVector = (pos, point_charges) => {
+    let electric_field_vector = new THREE.Vector3();
 
-    diff.multiplyScalar(factor);
+    for (const point_charge of point_charges) {
+        electric_field_vector.add(EFVectorFromSingleCharge(pos, point_charge));
+    }
 
-    electric_field_vector.add(diff);
-  }
-  return electric_field_vector;
+    return electric_field_vector;
 };
 
 /// 電気力線
-class ElectricLines3D extends THREE.Group {
-  constructor(point_charges) {
-    super();
-    this.point_charges = point_charges;
-    this.createField(point_charges);
-  }
-
-  /// @param origin 始点 (PointCharge)
-  createElectricLineGeometry = (
-    origin_charge,
-    vector,
-    point_charges,
-    length
-  ) => {
-    const points = [origin_charge.pos.clone()];
-    const _origin = origin_charge.pos.clone();
-    _origin.add(vector);
-    for (var i = 0; i < length; i++) {
-      const d_vector = PosToElectricFieldVector(_origin, point_charges);
-      d_vector.normalize();
-      if (origin_charge.charge < 0) d_vector.multiplyScalar(-1);
-      // 点電荷との衝突判定
-      for (const point_charge of point_charges) {
-        const diff = new THREE.Vector3(0, 0, 0);
-        diff.subVectors(_origin, point_charge.pos);
-        if (diff.length() < 1) {
-          return new THREE.BufferGeometry().setFromPoints(points);
-        }
-      }
-      _origin.add(d_vector);
-      points.push(_origin.clone());
+class ElectricLines3D extends THREE.Object3D {
+    constructor(point_charges) {
+        super();
+        this.point_charges = point_charges;
+        this.line_material = new THREE.LineBasicMaterial({ color: 0xaaaaff });
+
+        this.createField(point_charges);
     }
-    return new THREE.BufferGeometry().setFromPoints(points);
-  };
 
-  createField(point_charges) {
-    const line_material = new THREE.LineBasicMaterial({ color: 0xaaaaff });
-    for (const point_charge of point_charges) {
-      for (var n_theta = 0; n_theta < 5; n_theta++) {
-        for (var n_phi = 0; n_phi < 5; n_phi++) {
-          const theta = ((Math.PI * 2) / 5) * n_theta;
-          const phi = ((Math.PI * 2) / 5) * n_phi;
-          const x = 5 * Math.sin(theta) * Math.cos(phi);
-          const y = 5 * Math.sin(theta) * Math.sin(phi);
-          const z = 5 * Math.cos(theta);
-
-          const line = new THREE.Line(
-            this.createElectricLineGeometry(
-              point_charge,
-              new THREE.Vector3(x, y, z),
-              point_charges,
-              1000
-            ),
-            line_material
-          );
-          this.add(line);
+    /// @param origin 始点 (PointCharge)
+    createElectricLineGeometry = (origin_charge, vector, point_charges, length) => {
+        const points = [origin_charge.pos.clone()];
+        const _origin = origin_charge.pos.clone();
+        const _vector = vector.clone();
+        _vector.normalize();
+        _origin.add(_vector);
+        for (let i = 0; i < length; i++) {
+            const d_vector = EFVector(_origin, point_charges);
+            d_vector.normalize();
+            if (origin_charge.charge < 0)
+                d_vector.multiplyScalar(-1);
+            // 点電荷との衝突判定
+            for (const point_charge of point_charges) {
+                const diff = new THREE.Vector3();
+                diff.subVectors(_origin, point_charge.pos);
+                if (diff.length() < 1) {
+                    return new THREE.BufferGeometry().setFromPoints(points);
+                }
+            }
+            _origin.add(d_vector);
+            points.push(_origin.clone());
         }
-      }
+        return new THREE.BufferGeometry().setFromPoints(points);
+    };
+
+    createField(point_charges) {
+        for (const point_charge of point_charges) {
+            for (let n_theta = 0; n_theta < 10; n_theta++) {
+                for (let n_phi = 0; n_phi < 10; n_phi++) {
+                    const theta = ((Math.PI * 2) / 10) * n_theta;
+                    const phi = ((Math.PI * 2) / 10) * n_phi;
+                    const x = 10 * Math.sin(theta) * Math.cos(phi);
+                    const y = 10 * Math.sin(theta) * Math.sin(phi);
+                    const z = 10 * Math.cos(theta);
+
+                    const line = new THREE.Line(
+                        this.createElectricLineGeometry(point_charge, new THREE.Vector3(x, y, z), point_charges, 1000),
+                        this.line_material);
+                    this.add(line);
+                }
+            }
+        }
+    }
+
+    update() {
+        this.children = [];
+        this.createField(this.point_charges);
     }
-  }
 }
 
 // 点電荷
-class PointCharges3D extends THREE.Group {
-  constructor(point_charges) {
-    super();
-    const geometry = new THREE.SphereGeometry(1, 32, 32);
-    const material_minus = new THREE.MeshBasicMaterial({ color: 0x0000ff });
-    const material_plus = new THREE.MeshBasicMaterial({ color: 0xff0000 });
-    for (const point_charge of point_charges) {
-      const material = point_charge.charge > 0 ? material_plus : material_minus;
-      const sphere = new THREE.Mesh(geometry, material);
-      sphere.position.copy(point_charge.pos);
-      this.add(sphere);
+class PointCharges3D extends THREE.Object3D {
+    constructor(point_charges) {
+        super();
+        this.point_charges = point_charges;
+        this.geometry = new THREE.SphereGeometry(1, 32, 32);
+        this.material_minus = new THREE.MeshBasicMaterial({ color: 0x0000ff });
+        this.material_plus = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+        this.createPointChargesGeometry();
+    }
+
+    createPointChargesGeometry = () => {
+        for (const point_charge of this.point_charges) {
+            const material = point_charge.charge > 0 ? this.material_plus : this.material_minus;
+            const sphere = new THREE.Mesh(this.geometry, material);
+            sphere.position.copy(point_charge.pos);
+            this.add(sphere);
+        }
+    }
+
+    update() {
+        this.children = [];
+        this.createPointChargesGeometry();
     }
-  }
 }
 
 // 電界ベクトル
-class ElectricFieldVectors3D extends THREE.Group {
-  constructor(point_charges) {
-    super();
-    this.point_charges = point_charges;
-
-    for (var point_charge of point_charges) {
-      for (var x = -4; x <= 4; x++) {
-        for (var y = -4; y <= 4; y++) {
-          for (var z = -4; z <= 4; z++) {
-            if (x ** 2 + y ** 2 + z ** 2 > 5 ** 2) continue;
-            if (x === 0 && y === 0 && z === 0) continue;
-            const origin = new THREE.Vector3(x * 10, y * 10, z * 10);
-            origin.add(point_charge.pos);
-            const electric_field_vector = PosToElectricFieldVector(
-              origin,
-              point_charges
-            );
-
-            const len = electric_field_vector.length();
-            this.add(
-              new THREE.ArrowHelper(
-                electric_field_vector.normalize(),
-                origin,
-                1,
-                0xffffff,
-                2,
-                0.5
-              )
-            );
-          }
+class ElectricFieldVectors3D extends THREE.Object3D {
+    constructor(point_charges) {
+        super();
+        this.point_charges = point_charges;
+        this.createEFVectorGeometry();
+    }
+
+    createEFVectorGeometry = () => {
+        for (let point_charge of this.point_charges) {
+            for (let x = -4; x <= 4; x++) {
+                for (let y = -4; y <= 4; y++) {
+                    for (let z = -4; z <= 4; z++) {
+                        if (x ** 2 + y ** 2 + z ** 2 > 5 ** 2)
+                            continue;
+                        // if (x === 0 && y === 0 && z === 0) continue;
+                        const origin = new THREE.Vector3(x * 10, y * 10, z * 10);
+                        origin.add(point_charge.pos);
+                        const electric_field_vector = EFVector(origin, this.point_charges);
+
+                        const len = electric_field_vector.length();
+                        this.add(new THREE.ArrowHelper(electric_field_vector.normalize(), origin, 1, 0xffffff, 2, 0.5));
+                    }
+                }
+            }
         }
-      }
     }
-  }
+
+    update() {
+        this.children = [];
+        this.createEFVectorGeometry();
+    }
 }
 
 /// 電界
-export class Field3D extends THREE.Group {
-  constructor(point_charges) {
-    super();
-    this.point_charges = point_charges;
-    this.enablePointCharges(true);
-  }
-
-  point_charges_3d = null;
-  electric_lines_3d = null;
-  electric_field_vectors_3d = null;
-
-  /// 点電荷の表示切替
-  enablePointCharges = (enable) => {
-    if (enable) {
-      if (this.point_charges_3d == null)
-        this.point_charges_3d = new PointCharges3D(this.point_charges);
-      this.add(this.point_charges_3d);
-    } else {
-      this.remove(this.point_charges_3d);
+export class Field3D extends THREE.Object3D {
+    constructor(dom, camera, trans_controls, point_charges) {
+        super();
+        this.dom = dom;
+        this.camera = camera;
+        this.trans_controls = trans_controls;
+        this.point_charges = point_charges;
+
+        this.point_charges_3d = null;
+        this.electric_lines_3d = null;
+        this.electric_field_vectors_3d = null;
+
+        this.enablePointCharges(true);
     }
-  };
-
-  /// 電気力線の表示切替
-  enableElectricLines = (enable) => {
-    if (enable) {
-      if (this.electric_lines_3d == null)
-        this.electric_lines_3d = new ElectricLines3D(this.point_charges);
-      this.add(this.electric_lines_3d);
-    } else {
-      this.remove(this.electric_lines_3d);
-    }
-  };
-
-  /// 電界ベクトルの表示切替
-  enableElectricFieldVectors = (enable) => {
-    if (enable) {
-      if (this.electric_field_vectors_3d == null)
-        this.electric_field_vectors_3d = new ElectricFieldVectors3D(
-          this.point_charges
-        );
-      this.add(this.electric_field_vectors_3d);
-    } else {
-      this.remove(this.electric_field_vectors_3d);
+
+    /// フィールドの更新
+    update = () => {
+        if (this.children.find((child) => child === this.point_charges_3d) != null)
+            this.point_charges_3d.update();
+
+        if (this.children.find((child) => child === this.electric_lines_3d) != null)
+            this.electric_lines_3d.update();
+
+        if (this.children.find((child) => child === this.electric_field_vectors_3d) != null)
+            this.electric_field_vectors_3d.update();
     }
-  };
+
+    /// 点電荷の表示切替
+    enablePointCharges = (enable) => {
+        if (enable) {
+            if (this.point_charges_3d == null)
+                this.point_charges_3d = new PointCharges3D(this.point_charges);
+            else
+                this.point_charges_3d.update();
+            this.add(this.point_charges_3d);
+        }
+        else {
+            this.remove(this.point_charges_3d);
+        }
+    };
+
+    /// 電気力線の表示切替
+    enableElectricLines = (enable) => {
+        if (enable) {
+            if (this.electric_lines_3d == null)
+                this.electric_lines_3d = new ElectricLines3D(this.point_charges);
+            else
+                this.electric_lines_3d.update();
+            this.add(this.electric_lines_3d);
+        }
+        else {
+            this.remove(this.electric_lines_3d);
+        }
+    };
+
+    /// 電界ベクトルの表示切替
+    enableElectricFieldVectors = (enable) => {
+        if (enable) {
+            if (this.electric_field_vectors_3d == null)
+                this.electric_field_vectors_3d = new ElectricFieldVectors3D(this.point_charges);
+            else
+                this.electric_field_vectors_3d.update();
+            this.add(this.electric_field_vectors_3d);
+        }
+        else {
+            this.remove(this.electric_field_vectors_3d);
+        }
+    };
 }
diff --git a/app/script/Init.js b/app/script/Init.js
index e2a3bb4..761939f 100644
--- a/app/script/Init.js
+++ b/app/script/Init.js
@@ -14,33 +14,36 @@ export const CreateScene = () => {
 // レンダラーを作成
 export const CreateRenderer = (dom) => {
   const renderer = new THREE.WebGLRenderer(dom, {
-    antialias: true,
+    antialias: false,
   });
 
-  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setSize(dom.offsetWidth, dom.offsetHeight);
   renderer.setPixelRatio(window.devicePixelRatio);
 
   dom.appendChild(renderer.domElement);
 
-  window.addEventListener("resize", () => {
-    renderer.setSize(window.innerWidth, window.innerHeight);
-  });
+  // const resizeObserver = new ResizeObserver((entries) => {
+  //   const { width, height } = entries[0].contentRect;
+  //   renderer.setSize(width, height);
+  //   console.log("resize");
+  // });
+  // resizeObserver.observe(dom);
 
   return renderer;
 };
 
 // カメラを作成
-export const CreateCamera = () => {
-  const camera = new THREE.PerspectiveCamera(
-    50,
-    window.innerWidth / window.innerHeight
-  );
+export const CreateCamera = (dom) => {
+  const aspect = dom.offsetWidth / dom.offsetHeight;
+  const camera = new THREE.PerspectiveCamera(50, aspect);
   camera.position.set(150, 150, 150);
 
-  window.addEventListener("resize", () => {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-  });
+  // const resizeObserver = new ResizeObserver((entries) => {
+  //   const { width, height } = entries[0].contentRect;
+  //   camera.aspect = width / height;
+  //   camera.updateProjectionMatrix();
+  // });
+  // resizeObserver.observe(dom);
 
   return camera;
 };
@@ -57,6 +60,7 @@ export const CreateControls = (camera, dom) => {
   return controls;
 };
 
+// ドラッグでオブジェクトを移動するためのコントロールを作成
 export const CreateTransformControls = (camera, dom, controls, scene) => {
   const transControls = new TransformControls(camera, dom);
 
@@ -64,8 +68,19 @@ export const CreateTransformControls = (camera, dom, controls, scene) => {
     controls.enablePan = !event.value;
     controls.enableRotate = !event.value;
   });
-  
+
   scene.add(transControls);
 
   return transControls;
-};
\ No newline at end of file
+};
+
+// リサイズ時のイベントを登録
+export const ResisterResizeObserver = (dom, renderer, camera) => {
+  const resizeObserver = new ResizeObserver((entries) => {
+    const { width, height } = entries[0].contentRect;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  });
+  resizeObserver.observe(dom);
+}
\ No newline at end of file
diff --git a/app/script/PointCharge.js b/app/script/PointCharge.js
index 71fac3b..ba28184 100644
--- a/app/script/PointCharge.js
+++ b/app/script/PointCharge.js
@@ -7,22 +7,3 @@ export default class PointCharge {
     this.pos = pos;
   }
 }
-
-// 座標から電場ベクトルを計算
-export const CreateEFVector = (pos, point_charges) => {
-  var electric_field_vector = new THREE.Vector3(0, 0, 0); // 合成ベクトル
-  for (const point_charge of point_charges) {
-    const diff = new THREE.Vector3(0, 0, 0);
-    diff.subVectors(pos, point_charge.pos); // 点電荷と観測点との差分ベクトル
-
-    const r_sq = diff.lengthSq(); // 点電荷と観測点との距離^2 (平方根処理をなくすため)
-    const k = 8.987552 * 10 ** 9; // クーロン定数
-
-    const factor = r_sq ? (k * point_charge.charge) / r_sq ** 2 : 0; // ベクトルにかける係数
-
-    diff.multiplyScalar(factor);
-
-    electric_field_vector.add(diff);
-  }
-  return electric_field_vector;
-};
diff --git a/app/script/main.js b/app/script/main.js
index 3e2ff76..7a7b625 100644
--- a/app/script/main.js
+++ b/app/script/main.js
@@ -1,86 +1,163 @@
 import * as THREE from "three";
 import * as EFSim from "./Init.js";
+import { Dragger } from "./Dragger.js";
 import PointCharge from "./PointCharge.js";
 import { Field3D } from "./Field3D.js";
+import debounce from 'debounce';
+import { throttle } from 'throttle-debounce';
 
-const scene = EFSim.CreateScene();
-const renderer = EFSim.CreateRenderer(document.getElementById("canvas"));
-const camera = EFSim.CreateCamera();
-
-// マウスコントロール
-const controls = EFSim.CreateControls(camera, renderer.domElement);
-
-// ドラッグでオブジェクトを移動するためのコントロール
-const transControls = EFSim.CreateTransformControls(
-  camera,
-  renderer.domElement,
-  controls,
-  scene
-);
-
-// 点電荷たち
-const point_charges = [
-  new PointCharge(0.00001, new THREE.Vector3(60, 0, 60)),
-  new PointCharge(-0.0001, new THREE.Vector3(20, 60, 0)),
-  new PointCharge(+0.00001, new THREE.Vector3(-50, 0, 20)),
-  new PointCharge(0.00005, new THREE.Vector3(20, 0, 0)),
-];
-
-const field_3d = new Field3D(point_charges);
-
-// 自動回転切り替え
-{
-  const dom_switch = document.getElementById("checkbox_auto_rotate");
-  controls.autoRotate = dom_switch.checked; // 初期値
-  dom_switch.addEventListener("change", (e) => {
-    controls.autoRotate = e.target.checked;
-  });
-}
 
-// 2D/3D切り替え
-{
-  const dom_switch = document.getElementById("dimension_toggle_switch");
-  const dom_slider = document.getElementById("dimension_toggle_slider");
-  const ChangeDimension = (is_3d) => {
-    if (is_3d) {
-      dom_slider.textContent = "3D";
-      scene.add(field_3d);
-      // transControls.attach(field_3d);
-    } else {
-      dom_slider.textContent = "2D";
-      scene.remove(field_3d);
-      // transControls.detach(field_3d);
+const init = () => {
+    const dom = document.getElementById("canvas");
+    const scene = EFSim.CreateScene();
+    const renderer = EFSim.CreateRenderer(dom);
+    const camera = EFSim.CreateCamera(dom);
+    const controls = EFSim.CreateControls(camera, dom);
+    EFSim.ResisterResizeObserver(dom, renderer, camera);
+
+    // ドラッグでオブジェクトを移動するためのコントロール
+    const transControls = EFSim.CreateTransformControls(
+        camera,
+        dom,
+        controls,
+        scene
+    );
+
+    // 点電荷たち
+    const point_charges = [
+        new PointCharge(0.00001, new THREE.Vector3(60, 0, 60)),
+        new PointCharge(-0.00001, new THREE.Vector3(20, 200, 0)),
+        new PointCharge(+0.00001, new THREE.Vector3(-50, 0, 20)),
+        new PointCharge(0.00005, new THREE.Vector3(20, 0, 0)),
+    ];
+
+    const field_3d = new Field3D(dom, camera, transControls, point_charges);
+
+    {
+        const positions = point_charges.map((charge) => charge.pos);
+        const geometry = new THREE.SphereGeometry(10, 32, 32);
+        const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, visible: false });
+        const hit_ball = positions.map((position) => {
+            const sphere = new THREE.Mesh(geometry, material);
+            sphere.position.copy(position);
+            scene.add(sphere);
+            return sphere;
+        });
+        const dragger = new Dragger(positions, hit_ball, camera, dom, controls, scene);
+
+        dragger.addEventListener('objectChange', debounce(() => {
+            field_3d.update();
+        }, 10));
+
+        // function throttle(func, limit) {
+        //     let lastFunc;
+        //     let lastRan;
+        //     return function () {
+        //         const context = this;
+        //         const args = arguments;
+        //         if (!lastRan) {
+        //             func.apply(context, args);
+        //             lastRan = Date.now();
+        //         } else {
+        //             clearTimeout(lastFunc);
+        //             lastFunc = setTimeout(function () {
+        //                 if ((Date.now() - lastRan) >= limit) {
+        //                     func.apply(context, args);
+        //                     lastRan = Date.now();
+        //                 }
+        //             }, limit - (Date.now() - lastRan));
+        //         }
+        //     }
+        // }
+
+        // dragger.addEventListener('objectChange', throttle(
+        //     100, () => {
+        //         field_3d.update();
+        //     }));
     }
-  };
-  ChangeDimension(dom_switch.checked); // 初期値
-  dom_switch.addEventListener("change", (e) => {
-    ChangeDimension(e.target.checked);
-  });
-}
 
-// 電気力線 表示/非表示
-{
-  const checkbox = document.getElementById("checkbox_electric_lines");
-  field_3d.enableElectricLines(checkbox.checked); // 初期値
-  checkbox.addEventListener("change", (e) => {
-    field_3d.enableElectricLines(e.target.checked);
-  });
-}
 
-// 電界ベクトル 表示/非表示
-{
-  const checkbox = document.getElementById("checkbox_electric_field_vectors");
-  field_3d.enableElectricFieldVectors(checkbox.checked); // 初期値
-  checkbox.addEventListener("change", (e) => {
-    field_3d.enableElectricFieldVectors(e.target.checked);
-  });
+    // 自動回転切り替え
+    {
+        const checkbox = document.getElementById("checkbox_auto_rotate");
+        controls.autoRotate = checkbox.checked; // 初期値
+        checkbox.addEventListener("change", (e) => {
+            controls.autoRotate = e.target.checked;
+        });
+    }
+
+    // 床の表示/非表示
+    {
+        const helper = new THREE.GridHelper(2000, 100);
+        helper.material.opacity = 0;
+        scene.add(helper);
+
+        const ChangeHelper = (is_visible) => {
+            helper.visible = is_visible;
+        }
+    
+        const checkbox = document.getElementById("checkbox_show_grid");
+        ChangeHelper(checkbox.checked); // 初期値
+        checkbox.addEventListener("change", (e) => {
+            ChangeHelper(e.target.checked);
+        });
+    }
+
+    // 2D/3D切り替え
+    {
+        const sw = document.getElementById("dimension_toggle_switch");
+        const ChangeDimension = (is_3d) => {
+            if (is_3d) {
+                scene.add(field_3d);
+            } else {
+                scene.remove(field_3d);
+            }
+        };
+        ChangeDimension(sw.checked); // 初期値
+        sw.addEventListener("change", (e) => {
+            ChangeDimension(e.target.checked);
+        });
+    }
+
+    // 電気力線 表示/非表示
+    {
+        const checkbox = document.getElementById("checkbox_electric_lines");
+        field_3d.enableElectricLines(checkbox.checked); // 初期値
+        checkbox.addEventListener("change", (e) => {
+            field_3d.enableElectricLines(e.target.checked);
+        });
+    }
+
+    // 電界ベクトル 表示/非表示
+    {
+        const checkbox = document.getElementById("checkbox_electric_field_vectors");
+        field_3d.enableElectricFieldVectors(checkbox.checked); // 初期値
+        checkbox.addEventListener("change", (e) => {
+            field_3d.enableElectricFieldVectors(e.target.checked);
+        });
+    }
+
+    main(scene, renderer, camera, controls);
+};
+// 関数の実行時間を計測する関数
+// 実行にかかった時間をミリ秒で出力
+function measure(name, func) {
+    const start = performance.now();
+    func();
+    const end = performance.now();
+
+    console.log(`${name}: ${Math.floor(end - start)}ms`);
 }
+window.addEventListener("load", () => {
+    measure("init", init);
+});
 
 // エントリーポイント
-const main = () => {
-  requestAnimationFrame(main);
-  renderer.render(scene, camera);
-  controls.update();
-};
+const main = (scene, renderer, camera, controls) => {
+    requestAnimationFrame(() => {
+        main(scene, renderer, camera, controls);
+    });
 
-window.addEventListener("load", main);
+    renderer.render(scene, camera);
+    controls.update();
+};
diff --git a/app/style/style.css b/app/style/style.css
index a052238..aa2e0ba 100644
--- a/app/style/style.css
+++ b/app/style/style.css
@@ -3,6 +3,15 @@
   padding: 0;
 }
 
+#canvas {
+  background-color: #38393b;
+  position: fixed;
+  top: 0;
+  left : 0;
+  width: calc(100% - 250px);
+  height: 100%;
+}
+
 /*設定要素を画面右に表示 */
 .settings {
   background-color: #38393b;
@@ -24,4 +33,4 @@
 
 input[type="checkbox"] {
   margin: 0 10px 0 0;
-}
\ No newline at end of file
+}
diff --git a/app/style/toggle.css b/app/style/toggle.css
index 3384c7f..5d856dd 100644
--- a/app/style/toggle.css
+++ b/app/style/toggle.css
@@ -29,6 +29,27 @@
   align-items: center;
   justify-content: center;
   color: #fff;
+  z-index: 1;
+}
+
+.dimension_2d {
+  color: #fff;
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.dimension_3d {
+  color: #fff;
+  width: 50%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
 }
 
 .dimension_toggle:has(:checked) #dimension_toggle_slider {
diff --git a/package-lock.json b/package-lock.json
index 9b5b769..bf51878 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,11 @@
       "name": "efsim",
       "version": "1.0.0",
       "license": "MIT",
+      "dependencies": {
+        "throttle-debounce": "^5.0.0"
+      },
       "devDependencies": {
+        "debounce": "^2.0.0",
         "three": "^0.159.0",
         "vite": "^5.0.10"
       }
@@ -550,6 +554,18 @@
         "win32"
       ]
     },
+    "node_modules/debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.0.0.tgz",
+      "integrity": "sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.19.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.10.tgz",
@@ -698,6 +714,14 @@
       "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/vite": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
@@ -1007,6 +1031,12 @@
       "dev": true,
       "optional": true
     },
+    "debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.0.0.tgz",
+      "integrity": "sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==",
+      "dev": true
+    },
     "esbuild": {
       "version": "0.19.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.10.tgz",
@@ -1102,6 +1132,11 @@
       "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "vite": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
diff --git a/package.json b/package.json
index d1d17d7..2482181 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,12 @@
   },
   "homepage": "https://github.com/CaseyNelson314/EFSim#readme",
   "devDependencies": {
+    "debounce": "^2.0.0",
     "three": "^0.159.0",
     "vite": "^5.0.10"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "throttle-debounce": "^5.0.0"
+  }
 }