各電荷をJSON化できるよう変更

app/script/charge.ts

@@ -50,11 +50,12 @@ export abstract class Charge extends THREE.Mesh {
 
 
     /**
-     * 距離ベクトルを基に接触判定を行う
-     * @param distanceFrom 電荷との距離ベクトル
+     * 任意の座標が電荷に接触しているかどうかを判定する
+     * @param position 任意の座標
+     * @param threshold 閾値
      * @returns 接触しているかどうか
      */
-    abstract isContact: (distanceFrom: THREE.Vector3) => boolean;
+    abstract isContact: (position: THREE.Vector3, threshold: number) => boolean;
 
 
     /**
@@ -82,7 +83,7 @@ export abstract class Charge extends THREE.Mesh {
     /**
      * JSONから電荷を生成する
      */
-    static fromJSON: (json: any) => void;
+    static fromJSON: (json: any) => Charge;
 
 
     /**
@@ -91,7 +92,6 @@ export abstract class Charge extends THREE.Mesh {
     abstract override toJSON(): any;
 
 
-
     /**
      * パラメーター設定用エディタを生成する
      */

app/script/dragger.ts

@@ -1,24 +1,22 @@
 import * as THREE from 'three';
-import * as EFSim from './init';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
 import { Charge } from './charge.js';
 
 
 // 点電荷をドラッグして移動させるクラス
 export class Dragger {
-    transControls: TransformControls;
-    pointCharges: Charge[];
-    camera: THREE.PerspectiveCamera;
-    dom: HTMLElement;
-    controls: OrbitControls;
-    scene: THREE.Scene;
-    ray: THREE.Raycaster;
-    pointer: THREE.Vector2;
-    listeners: { type: string, listener: Function }[];
-    selected: Charge | null;
-    onDownPosition: THREE.Vector2;
-    onUpPosition: THREE.Vector2;
+    private transControls: TransformControls;
+    private pointCharges: Charge[];
+    private camera: THREE.PerspectiveCamera;
+    private dom: HTMLElement;
+    private scene: THREE.Scene;
+    private ray: THREE.Raycaster;
+    private pointer: THREE.Vector2;
+    private listeners: { type: string, listener: Function }[];
+    private selected: Charge | null;
+    private onDownPosition: THREE.Vector2;
+    private onUpPosition: THREE.Vector2;
 
     constructor(
         pointCharges: Charge[],
@@ -28,13 +26,19 @@ export class Dragger {
         scene: THREE.Scene
     ) {
 
-        // ドラッグでオブジェクトを移動するためのコントロール
-        this.transControls = EFSim.CreateTransformControls(camera, dom, controls, scene);
+        this.transControls = new TransformControls(camera, dom);
+
+        this.transControls.addEventListener('dragging-changed', (event) => {
+            controls.enablePan = !event.value;
+            controls.enableRotate = !event.value;
+        });
+
+        scene.add(this.transControls);
+
         // this.transControls.mode = 'rotate';
         this.pointCharges = pointCharges;
         this.camera = camera;
         this.dom = dom;
-        this.controls = controls;
         this.scene = scene;
 
         this.ray = new THREE.Raycaster();
@@ -47,10 +51,7 @@ export class Dragger {
         this.onDownPosition = new THREE.Vector2();
         this.onUpPosition = new THREE.Vector2();
 
-        this.setEvent();
-    }
 
-    setEvent = () => {
         const onClick = (event: MouseEvent) => {
             this.pointer.x = (event.offsetX / this.dom.offsetWidth) * 2 - 1;
             this.pointer.y = -(event.offsetY / this.dom.offsetHeight) * 2 + 1;
@@ -67,7 +68,7 @@ export class Dragger {
                 const object = intersects[0]!.object as Charge;
 
                 if (object !== this.transControls.object) {
-                    
+
                     // 既に選択されているオブジェクトがあれば選択を解除
                     if (this.selected !== null) {
                         this.transControls.detach();
@@ -107,11 +108,10 @@ export class Dragger {
             this.onUpPosition.y = event.offsetY;
             if (this.onDownPosition.distanceTo(this.onUpPosition) < Number.EPSILON) {
 
-                if (this.selected !== null)
-                {
+                if (this.selected !== null) {
                     this.transControls.detach();
                     this.selected = null;
-    
+
                     // オブジェクトが選択解除されたことを通知
                     for (let listener of this.listeners) {
                         if (listener.type === 'object-unselected') {
@@ -143,7 +143,7 @@ export class Dragger {
             this.selected.dispose();
             this.pointCharges.splice(this.pointCharges.indexOf(this.selected), 1);
             this.selected = null;
-    
+
             // オブジェクトが選択解除されたことを通知
             for (let listener of this.listeners) {
                 if (listener.type === 'object-unselected') {

app/script/field3d.ts

@@ -12,11 +12,15 @@ import { MeshLineGeometry, MeshLineMaterial } from '@lume/three-meshline'
 const ElectricFieldVector = (
     charges: Charge[],
     position: THREE.Vector3
-) =>
-    charges.reduce((electricFieldVector, charge) => {
-        return electricFieldVector.add(charge.electricFieldVector(position));
-    }, new THREE.Vector3());
+) => {
+    const electricFieldVector = new THREE.Vector3();
+
+    for (const charge of charges) {
+        electricFieldVector.add(charge.electricFieldVector(position));
+    }
 
+    return electricFieldVector;
+}
 
 
 /**
@@ -37,7 +41,7 @@ const ElectricForceLinePoints = (
 ) => {
 
     const points = [beginPoint.clone()];
-    const origin = points[0]!.clone().add(dirVector);
+    const origin = beginPoint.clone().add(dirVector);
 
     for (let i = 0; i < 2000; ++i) {
 
@@ -72,7 +76,7 @@ const ElectricForceLinePoints = (
             }
 
             // 他電荷との衝突判定
-            if (charge.isContact(charge.distanceFrom(origin))) {
+            if (charge.isContact(origin, 1.5)) {
                 return points;
             }
 

app/script/infinityCylinderSurfaceCharge.ts

@@ -31,8 +31,8 @@ export class InfinityCylinderSurfaceCharge extends Charge {
         this.radius = radius;
         this.surfaceDensity = surfaceDensity;
     }
-    
-    
+
+
     /**
      * 電荷の正負を取得する
      * @returns 電荷の正負
@@ -62,18 +62,19 @@ export class InfinityCylinderSurfaceCharge extends Charge {
 
 
     /**
-     * 距離ベクトルを基に接触判定を行う
-     * @param distanceFrom 電荷との距離ベクトル
+     * 任意の座標が電荷に接触しているかどうかを判定する
+     * @param position 任意の座標
+     * @param threshold 閾値
      * @returns 接触しているかどうか
      */
-    override isContact = (distanceFrom: THREE.Vector3) => {
-        
-        const lengthSq = distanceFrom.lengthSq();
+    override isContact = (position: THREE.Vector3, threshold: number) => {
+
+        const lengthSq = this.distanceFrom(position).lengthSq();
 
         if (lengthSq > this.radius ** 2) {
             return false;  // 外周より外側
         }
-        else if (lengthSq < (this.radius - 1) ** 2) {
+        else if (lengthSq < (this.radius - threshold) ** 2) {
             return false;  // 内周より内側
         }
         else {
@@ -82,7 +83,6 @@ export class InfinityCylinderSurfaceCharge extends Charge {
 
     }
 
-
     /**
      * 任意の座標における、この電荷からの電界ベクトルを返す
      * @param position 任意の座標
@@ -157,6 +157,44 @@ export class InfinityCylinderSurfaceCharge extends Charge {
     }
 
 
+    /**
+     * JSONから電荷を生成する
+     */
+    static override fromJSON = (json: any) => {
+
+        return new InfinityCylinderSurfaceCharge(
+            new THREE.Vector3(json.position.x, json.position.y, json.position.z),
+            new THREE.Euler(json.rotation.x, json.rotation.y, json.rotation.z),
+            json.radius,
+            json.surfaceDensity
+        );
+
+    }
+
+
+    /**
+     * 電荷をJSONに変換する
+     */
+    override toJSON = () => {
+
+        return {
+            position: {
+                x: this.position.x,
+                y: this.position.y,
+                z: this.position.z
+            },
+            rotation: {
+                x: this.rotation.x,
+                y: this.rotation.y,
+                z: this.rotation.z
+            },
+            radius: this.radius,
+            surfaceDensity: this.surfaceDensity
+        };
+
+    }
+
+
     /**
      * パラメーター設定用エディタを生成する
      */

app/script/infinityCylinderVolumeCharge.ts

@@ -31,8 +31,8 @@ export class InfinityCylinderVolumeCharge extends Charge {
         this.radius = radius;
         this.volumeDensity = volumeDensity;
     }
-    
-    
+
+
     /**
      * 電荷の正負を取得する
      * @returns 電荷の正負
@@ -62,13 +62,14 @@ export class InfinityCylinderVolumeCharge extends Charge {
 
 
     /**
-     * 距離ベクトルを基に接触判定を行う
-     * @param distanceFrom 電荷との距離ベクトル
+     * 任意の座標が電荷に接触しているかどうかを判定する
+     * @param position 任意の座標
+     * @param threshold 閾値
      * @returns 接触しているかどうか
      */
-    override isContact = (distanceFrom: THREE.Vector3) => {
+    override isContact = (position: THREE.Vector3, threshold: number) => {
 
-        return distanceFrom.lengthSq() < this.radius ** 2;
+        return this.distanceFrom(position).lengthSq() < threshold ** 2;
 
     }
 
@@ -147,6 +148,43 @@ export class InfinityCylinderVolumeCharge extends Charge {
     }
 
 
+    /**
+     * JSONから電荷を生成する
+     */
+    static override fromJSON = (json: any) => {
+
+        return new InfinityCylinderVolumeCharge(
+            new THREE.Vector3(json.position.x, json.position.y, json.position.z),
+            new THREE.Euler(json.rotation.x, json.rotation.y, json.rotation.z),
+            json.radius,
+            json.volumeDensity
+        );
+
+    }
+
+
+    /**
+     * 電荷をJSONに変換する
+     */
+    override toJSON = () => {
+
+        return {
+            position: {
+                x: this.position.x,
+                y: this.position.y,
+                z: this.position.z
+            },
+            rotation: {
+                x: this.rotation.x,
+                y: this.rotation.y,
+                z: this.rotation.z
+            },
+            radius: this.radius,
+            volumeDensity: this.volumeDensity
+        };
+
+    }
+
     /**
      * パラメーター設定用エディタを生成する
      */