webview.ts 增加按钮. 增加线框模式和实体模式.

修复一个因为相机的逆矩阵更新导致的缩放问题

src/Common/ColorPalette.ts

@@ -286,3 +286,10 @@ export function GetColorIndex(index: number)
     colorMatBuff.set(index, mat);
     return mat;
 }
+
+export function GetColorFormIndex(index: number)
+{
+    let colorRgb = ColorPalette[index];
+    let colorx = new THREE.Color(colorRgb[0], colorRgb[1], colorRgb[2]);
+    return colorx;
+}

src/Editor/CameraControls.ts

@@ -78,6 +78,7 @@ export class CameraControls
     //触屏开始事件
     onTouchStart = (event: TouchEvent) =>
     {
+        this.m_Viewer.UpdateLockTarget();
         this.m_StartChickPoint.set(event.touches[0].pageX, event.touches[0].pageY, 0);
         if (event.touches.length < 4)
         {
@@ -131,7 +132,7 @@ export class CameraControls
                 }
             case CameraControlState.Rotate:
                 {
-                    this.m_Viewer.Rotate(vec.multiplyScalar(2), GeUtils.cZeroVec);
+                    this.m_Viewer.Rotate(vec.multiplyScalar(2));
                     break;
                 }
         }

src/GraphicsSystem/Viewer.ts

@@ -353,7 +353,7 @@ export class Viewer
     ZoomExtensBox3(box3: THREE.Box3)
     {
         if (!box3) return;
-        this.m_Camera.m_CurCamera.updateMatrix();
+        this.m_Camera.m_CurCamera.updateMatrixWorld(false);
         //变换到相机坐标系
         box3.applyMatrix4(this.m_Camera.m_CurCamera.matrixWorldInverse);
         //
@@ -380,5 +380,6 @@ export class Viewer
     ZoomAll()
     {
         this.ZoomExtensBox3(GeUtils.GetBox(this.m_Scene, true));
+        this.m_bNeedUpdate = true;
     }
 }

src/WebCADView/WebCADView.ts

@@ -1,10 +1,12 @@
+import { number } from 'mobx-state-tree/dist/types/primitives';
 import { Viewer } from '../GraphicsSystem/Viewer';
 import { Editor } from '../Editor/Editor';
 import { CameraControls } from '../Editor/CameraControls';
 import * as THREE from 'three';
 import { loadFBX } from '../Loader/FBXLoader';
-import { GetColorIndex } from '../Common/ColorPalette';
+import { GetColorIndex, GetColorFormIndex } from '../Common/ColorPalette';
 import { SetMaterial } from '../Common/SetMaterial';
+import { OutlinesGeometry } from '../Geometry/OutlinesGeometry';
 
 
 //
@@ -29,6 +31,8 @@ interface LoadFileRes
  */
 export class WebCADView
 {
+    m_EdgeEntitytList: Array<THREE.LineSegments> = [];
+    m_SolidEntityList: Array<THREE.Object3D> = [];
 
     m_Viewer: Viewer;
     /**
@@ -48,7 +52,7 @@ export class WebCADView
         new CameraControls(this.m_Viewer, this.m_Viewer.m_Render.domElement);
     }
 
-    WriteEdge(obj: THREE.Object3D)
+    WriteEdge(obj: THREE.Object3D, color?: number)
     {
         if (obj.hasOwnProperty("geometry"))
         {
@@ -58,13 +62,16 @@ export class WebCADView
             move.makeTranslation(1500, 0, 0);
 
             // edge.applyMatrix(move)
-
+            if (!color) color = 7;
-            var line = new THREE.LineSegments(edge, new THREE.LineBasicMaterial({ color: 0xffffff }));
+            var line = new THREE.LineSegments(edge, new THREE.LineBasicMaterial({ color: GetColorFormIndex(color) }));
+            line.userData = color;
             this.m_Viewer.m_Scene.add(line);
+
+            this.m_EdgeEntitytList.push(line);
         }
         else
         {
-            obj.children.forEach(o => { this.WriteEdge(o) })
+            obj.children.forEach(o => { this.WriteEdge(o, color) })
         }
     }
     /**
@@ -87,9 +94,11 @@ export class WebCADView
                 let Material = GetColorIndex(element.Color);
                 SetMaterial(fbxObj.object, Material);
                 this.m_Viewer.m_Scene.add(fbxObj.object);
+
+                this.m_SolidEntityList.push(fbxObj.object);
                 fbxObj.object.visible = true;
 
-                this.WriteEdge(fbxObj.object);
+                this.WriteEdge(fbxObj.object, element.Color);
             }
         }
         this.m_Viewer.m_bNeedUpdate = true;
@@ -144,7 +153,6 @@ export class WebCADView
     ZoomAll()
     {
         this.m_Viewer.ZoomAll();
-        this.m_Viewer.m_bNeedUpdate = true;
     }
     //前视图
     ViewToFont()
@@ -157,4 +165,28 @@ export class WebCADView
         this.m_Viewer.ViewToTop()
     }
     //西南等轴视图
+
+
+    SolidShow()
+    {
+        for (let e of this.m_SolidEntityList)
+        {
+            e.visible = true;
+        }
+        for (let e of this.m_EdgeEntitytList)
+        {
+            (<THREE.LineBasicMaterial>e.material).color = GetColorFormIndex(7);
+        }
+    }
+    EdgeShow()
+    {
+        for (let e of this.m_SolidEntityList)
+        {
+            e.visible = false;
+        }
+        for (let e of this.m_EdgeEntitytList)
+        {
+            (<THREE.LineBasicMaterial>e.material).color = GetColorFormIndex(e.userData);
+        }
+    }
 }

src/webview.ts

@@ -6,6 +6,8 @@ import { RenderType } from './GraphicsSystem/Enum';
 import { app } from './ApplicationServices/Application';
 import { GetColorIndex } from './Common/ColorPalette';
 import { Viewer } from './GraphicsSystem/Viewer';
+import { GeUtils } from './Geometry/GeUtils';
+import { OutlinesGeometry } from './Geometry/OutlinesGeometry';
 function createRootElement()
 {
     let root = document.createElement('div');
@@ -15,12 +17,30 @@ function createRootElement()
     return root;
 }
 
+function createContent()
+{
+    let el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.top = "0";
+    el.style.width = "100%";
+    return el;
+}
+
+function createBtn(textCtx: string, parEl: HTMLElement, callback: any)
+{
+    let btn = document.createElement("button");
+    btn.textContent = textCtx;
+    btn.onclick = callback;
+    parEl.appendChild(btn);
+}
+
 let bulbLight: THREE.PointLight
 
 window.onload = async () =>
 {
     let el = createRootElement();
 
+
     let app = new WebCADView(el);
 
     window.addEventListener("resize", () =>
@@ -33,20 +53,56 @@ window.onload = async () =>
     {
         await app.Load(`/upload/${param["id"]}.json`, "/upload/");
     }
-    // app.m_Viewer.ViewToFont();
-    app.ZoomAll();
-
     let hemiLight = new THREE.AmbientLight(0xddeeff, 3);
     app.m_Viewer.m_Scene.add(hemiLight)
 
+    app.EdgeShow();
+    // app.m_Viewer.m_Scene.add(load())
+    app.ZoomAll();
+
+    //内容
+    let content = createContent();
+    el.appendChild(content);
+
+    createBtn("缩放", content, () =>
+    {
+        app.m_Viewer.ZoomAll();
+    });
 
-    app.m_Viewer.m_Scene.add(load())
+    createBtn("俯视", content, () =>
+    {
+        app.ViewToTop();
+        app.m_Viewer.ZoomAll();
+    });
 
+    createBtn("前视", content, () =>
+    {
+        app.ViewToFont();
+        app.ZoomAll();
+    });
+    createBtn("西南", content, () =>
+    {
+        app.m_Viewer.ViewLookAtVec(new THREE.Vector3(1, 1, -1));
+        app.ZoomAll();
+    });
+    createBtn("右视", content, () =>
+    {
+        app.m_Viewer.ViewLookAtVec(new THREE.Vector3(-1, 0, 0));
+        app.ZoomAll();
+    });
 
+    createBtn("实体", content, () =>
+    {
+        app.SolidShow();
+        app.m_Viewer.m_bNeedUpdate = true;
+    });
+    createBtn("线框", content, () =>
+    {
+        app.EdgeShow();
         app.m_Viewer.m_bNeedUpdate = true;
+    });
 }
 
-
 function load()
 {
     let loader: THREE.TextureLoader = new THREE.TextureLoader();
@@ -61,9 +117,13 @@ function load()
         map: texture
     });
 
-    let box = new Solid3d(1000, 18, 1000);
+    let box = new Solid3d(10, 10, 10);
     let obj = <THREE.Mesh>(box.Draw(RenderType.Wireframe));
-    obj.material = material;
+    // obj.material = material;
+
+    // let move = new THREE.Matrix4();
+    // move.makeTranslation(5000, 0, 0);
+    // obj.applyMatrix(move);
     return obj
 }