Merge pull request #2 from CaseyNelson314/feature/2d

Feature/2d

.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

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 />
             自動回転

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);
+    }
+
+}