优化:改进材质球渲染和材质球相机控制

src/Editor/MaterialEditor.ts

@@ -31,13 +31,13 @@ export class MaterialEditor extends Singleton
     {
         this.Geometrys = new Map<string, Geometry | BufferGeometry>(
             [
-                ["球", new SphereBufferGeometry(1, 32, 32)],
-                ["圆环", new TorusBufferGeometry(0.8, 0.4, 32, 64)],
-                ["立方体", new BoxBufferGeometry(1, 1, 1, 1, 1, 1)],
-                ["环面纽结", new TorusKnotBufferGeometry(0.7, 0.3, 128, 64)],
-                ["圆锥体", new ConeBufferGeometry(1, 2, 32)],
-                ["球(多面)", new SphereBufferGeometry(1, 64, 64)],
-                ["立方体(多面)", new BoxBufferGeometry(1, 1, 1, 128, 128, 128)]
+                ["球", new SphereBufferGeometry(1000, 32, 32)],
+                ["圆环", new TorusBufferGeometry(0.8 * 1e3, 0.4 * 1e3, 32, 64)],
+                ["立方体", new BoxBufferGeometry(1e3, 1e3, 1e3, 1, 1, 1)],
+                ["环面纽结", new TorusKnotBufferGeometry(0.7 * 1e3, 0.3 * 1e3, 128, 64)],
+                ["圆锥体", new ConeBufferGeometry(1 * 1e3, 2 * 1e3, 32)],
+                ["球(多面)", new SphereBufferGeometry(1 * 1e3, 64, 64)],
+                ["立方体(多面)", new BoxBufferGeometry(1 * 1e3, 1 * 1e3, 1 * 1e3, 128, 128, 128)]
             ]
         );
     }

src/Editor/MaterialMouseControl.ts

@@ -1,26 +1,29 @@
-import { Viewer } from '../GraphicsSystem/Viewer';
 import { Vector3 } from 'three';
+import { Viewer } from '../GraphicsSystem/Viewer';
 
 /**
  * 材质编辑器的场景鼠标控制.
  */
 export class MaterialEditorCamerControl
 {
-    m_Viewer: Viewer;
+    private Viewer: Viewer;
 
     //State.
-    m_MouseIsDown: boolean = false;
-    m_StartPoint: Vector3 = new Vector3();
-    m_EndPoint = new Vector3();
+    private _MouseIsDown: boolean = false;
+    private _StartPoint: Vector3 = new Vector3();
+    private _EndPoint = new Vector3();
+    private pointId: number;
+
     constructor(view: Viewer)
     {
-        this.m_Viewer = view;
+        this.Viewer = view;
 
         this.initMouseControl();
     }
     initMouseControl()
     {
-        let el = this.m_Viewer.Renderer.domElement;
+        let el = this.Viewer.Renderer.domElement;
+        el.addEventListener("pointerdown", (e) => { this.pointId = e.pointerId; }, false);
         el.addEventListener("mousedown", this.onMouseDown, false);
         el.addEventListener("mousemove", this.onMouseMove, false);
         el.addEventListener("mouseup", this.onMouseUp, false);
@@ -28,35 +31,55 @@ export class MaterialEditorCamerControl
     }
     onMouseDown = (event: MouseEvent) =>
     {
-        this.m_MouseIsDown = true;
-        this.m_StartPoint.set(event.offsetX, event.offsetY, 0);
+        this.requestPointerLock();
+        this._MouseIsDown = true;
+        this._StartPoint.set(event.offsetX, event.offsetY, 0);
     };
     onMouseUp = (event: MouseEvent) =>
     {
-        this.m_MouseIsDown = false;
+        this._MouseIsDown = false;
+        this.exitPointerLock();
     };
     onMouseMove = (event: MouseEvent) =>
     {
         event.preventDefault();
-        if (this.m_MouseIsDown)
+        if (this._MouseIsDown)
         {
-            this.m_EndPoint.set(event.offsetX, event.offsetY, 0);
+            this._EndPoint.set(event.offsetX, event.offsetY, 0);
             let changeVec: Vector3 = new Vector3();
-            changeVec.subVectors(this.m_EndPoint, this.m_StartPoint);
-            this.m_StartPoint.copy(this.m_EndPoint);
+            changeVec.subVectors(this._EndPoint, this._StartPoint);
+            this._StartPoint.copy(this._EndPoint);
 
-            this.m_Viewer.Rotate(changeVec);
+            this.Viewer.Rotate(changeVec);
         }
     };
     onMouseWheel = (event: WheelEvent) =>
     {
         if (event.deltaY < 0)
         {
-            this.m_Viewer.Zoom(0.6);
+            this.Viewer.Zoom(0.6);
         }
         else if (event.deltaY > 0)
         {
-            this.m_Viewer.Zoom(1.4);
+            this.Viewer.Zoom(1.4);
         }
     };
+
+    requestPointerLock()
+    {
+        if (this.Viewer.Renderer.domElement.setPointerCapture)
+            this.Viewer.Renderer.domElement.setPointerCapture(this.pointId);
+    }
+
+    exitPointerLock()
+    {
+        if (this.Viewer.Renderer.domElement.releasePointerCapture && this.pointId !== undefined)
+        {
+            try
+            {
+                this.Viewer.Renderer.domElement.releasePointerCapture(this.pointId);
+            }
+            catch (error) { }
+        }
+    }
 }