Merge branch 'master' of https://git.oschina.net/BearCAD/WebThreeJs

@types/three/index.d.ts

@@ -29,6 +29,7 @@ export * from "./three-trackballcontrols";
 export * from "./three-transformcontrols";
 export * from "./three-vrcontrols";
 export * from "./three-vreffect";
-export * from "./three-OutlinePass"
+export * from "./three-OutlinePass";
+export * from "./three-SMAAPass.d";
 
 export as namespace THREE;

@types/three/three-SMAAPass.d.ts

@@ -0,0 +1,19 @@
+import
+{
+    Camera,
+    Color,
+    Face3,
+    Light,
+    Material,
+    Object3D,
+    Scene,
+    Vector2,
+    Vector3,
+    Vector4
+} from "./three-core";
+export class SMAAPass
+{
+    constructor(width: number, height: number);
+    renderToScreen: boolean;
+}
+

src/Add-on/DrawLine.ts

@@ -1,10 +1,10 @@
 import { Command } from '../Editor/CommandMachine';
 import { app } from '../ApplicationServices/Application';
 import * as THREE from 'three';
-import { Line, Solid3d } from '../DatabaseServices/Entity';
+import { Circle, Line, Solid3d } from '../DatabaseServices/Entity';
 import * as _ from 'lodash';
 import { UndoData } from '../DatabaseServices/UndoData';
-import { PromptStatus } from '../Editor/PromptResult';
+import { PromptResult, PromptStatus } from '../Editor/PromptResult';
 import * as ReactDOM from 'react-dom';
 import { GeUtils } from "../Geometry/GeUtils";
 import { RenderType } from '../GraphicsSystem/Enum';
@@ -73,7 +73,7 @@ export class DrawBox implements Command
         let box = new Solid3d(100, 100, 100);
         let obj = app.m_Viewer.drawTempEntity(box);
         obj.position.copy(app.m_Editor.m_MouseCtrl.m_CurMousePointWCS);
-        app.m_Viewer.m_bNeedUpdate=true;
+        app.m_Viewer.m_bNeedUpdate = true;
         let pt = await app.m_Editor.GetPoint(
             {
                 Callback: (pt: THREE.Vector3) =>
@@ -118,3 +118,105 @@ void main() {
         app.m_Database.appendEntity(box);
     }
 }
+
+
+export class DrawRect implements Command
+{
+    async exec()
+    {
+        let p1: THREE.Vector3;
+        let p2: THREE.Vector3;
+        let ptRes = await app.m_Editor.GetPoint();
+        if (ptRes.Status != PromptStatus.OK)
+        {
+            return;
+        }
+        p1 = ptRes.Value;
+
+        let box: THREE.Box3 = new THREE.Box3();
+        let l1 = new Line(p1.clone(), p1.clone());
+        let l2 = new Line(p1.clone(), p1.clone());
+        let l3 = new Line(p1.clone(), p1.clone());
+        let l4 = new Line(p1.clone(), p1.clone());
+
+        app.m_Viewer.drawTempEntity(l1);
+        app.m_Viewer.drawTempEntity(l2);
+        app.m_Viewer.drawTempEntity(l3);
+        app.m_Viewer.drawTempEntity(l4);
+
+
+        let updateRect = (p1, p2) =>
+        {
+            box.setFromPoints([p2, p1]);
+
+            let px1 = box.min;
+            let px3 = box.max;
+            let px2 = new THREE.Vector3(px3.x, px1.y);
+            let px4 = new THREE.Vector3(px1.x, px3.y);
+            l1.setStartPoint(px1);
+            l1.setEndPoint(px2);
+
+            l2.setStartPoint(px2);
+            l2.setEndPoint(px3);
+
+            l3.setStartPoint(px3);
+            l3.setEndPoint(px4);
+
+            l4.setStartPoint(px1);
+            l4.setEndPoint(px4);
+        }
+
+        ptRes = await app.m_Editor.GetPoint({
+            Callback: (p) =>
+            {
+                updateRect(p, p1);
+            }
+        });
+        if (ptRes.Status != PromptStatus.OK)
+        {
+            return;
+        }
+        else
+        {
+            app.m_Database.appendEntity(l1);
+            app.m_Database.appendEntity(l2);
+            app.m_Database.appendEntity(l3);
+            app.m_Database.appendEntity(l4);
+
+        }
+    }
+}
+
+export class DrawCircle implements Command
+{
+    async exec()
+    {
+        let cir = new Circle(app.m_Editor.m_MouseCtrl.m_CurMousePointWCS, 10);
+        app.m_Editor.UpdateScreen();
+        let ptRes = await app.m_Editor.GetPoint({
+            Callback: (p) =>
+            {
+                cir.Center = p;
+            }
+        });
+        if (ptRes.Status != PromptStatus.OK)
+        {
+            return;
+        }
+        app.m_Viewer.drawTempEntity(cir);
+        ptRes = await app.m_Editor.GetPoint(
+            {
+                Callback: (p) =>
+                {
+                    cir.Radius = p.distanceTo(cir.m_Center);
+                    console.log('cir.Radius: ', cir.m_Radius);
+                }
+            }
+        );
+
+        if (ptRes.Status == PromptStatus.OK)
+        {
+            app.m_Database.appendEntity(cir);
+        }
+    }
+}

src/DatabaseServices/Entity.ts

@@ -1,4 +1,4 @@
-import * as THREE from "three"
+import * as THREE from 'three';
 import { OBB } from '../Geometry/OBB/obb';
 import { Database } from './Database';
 import { Vector3 } from 'three';
@@ -181,6 +181,7 @@ export class Line extends Curve
             sp.copy(this.getData().StartPoint);
             ep.copy(this.getData().EndPoint);
             geometry.verticesNeedUpdate = true;
+            geometry.computeBoundingSphere();
         })
         return threeObject;
     }
@@ -212,6 +213,75 @@ export class Line extends Curve
     }
 }
 
+export class Circle extends Curve
+{
+    m_Radius: number;
+    m_Center: THREE.Vector3;
+    constructor(center: THREE.Vector3, radius: number)
+    {
+        super();
+        this.m_Center = center;
+        this.m_Radius = radius;
+    }
+    set Center(v: THREE.Vector3)
+    {
+        this.m_Center.copy(v);
+        this.m_DrawEntity.forEach(obj =>
+        {
+            let curve = new THREE.EllipseCurve(
+                this.m_Center.x, this.m_Center.y,            // ax, aY
+                this.m_Radius, this.m_Radius,           // xRadius, yRadius
+                0, 2 * Math.PI,  // aStartAngle, aEndAngle
+                false,            // aClockwise
+                0                 // aRotation
+            );
+
+            let path = new THREE.Path(curve.getPoints(50));
+            let geometry = path.createPointsGeometry(50);
+            (<THREE.Line>obj).geometry = geometry;
+        })
+    }
+    set Radius(r: number)
+    {
+        this.m_Radius = r;
+        this.m_DrawEntity.forEach(obj =>
+        {
+            let curve = new THREE.EllipseCurve(
+                this.m_Center.x, this.m_Center.y,            // ax, aY
+                this.m_Radius, this.m_Radius,           // xRadius, yRadius
+                0, 2 * Math.PI,  // aStartAngle, aEndAngle
+                false,            // aClockwise
+                0                 // aRotation
+            );
+
+            let path = new THREE.Path(curve.getPoints(50));
+            let geometry = path.createPointsGeometry(50);
+            (<THREE.Line>obj).geometry = geometry;
+        })
+    }
+
+    Draw(renderType: RenderType = RenderType.Wireframe): THREE.Object3D
+    {
+        let curve = new THREE.EllipseCurve(
+            this.m_Center.x, this.m_Center.y,            // ax, aY
+            this.m_Radius, this.m_Radius,           // xRadius, yRadius
+            0, 2 * Math.PI,  // aStartAngle, aEndAngle
+            false,            // aClockwise
+            0                 // aRotation
+        );
+
+        let path = new THREE.Path(curve.getPoints(50));
+        let geometry = path.createPointsGeometry(50);
+        var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+
+        // Create the final object to add to the scene
+        var ellipse = new THREE.Line(geometry, material);
+
+        this.m_DrawEntity.set(renderType, ellipse);
+        return ellipse;
+    }
+}
+
 export class Solid3d extends Entity
 {
     constructor(len: number, wid: number, hei: number)
@@ -245,4 +315,3 @@ export class Point extends Entity
         super()
     }
 }
-

src/Editor/Editor.ts

@@ -47,6 +47,10 @@ export class Editor
             let line: Line, removeDrag;
             if (prompt)
             {
+                if (prompt.Callback)
+                {
+                    prompt.Callback(this.m_MouseCtrl.m_CurMousePointWCS);
+                }
                 if (prompt.BasePoint)
                 {
                     line = new Line(prompt.BasePoint, prompt.BasePoint);

src/index.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import '../node_modules/golden-layout/src/css/goldenlayout-base.css';
 import '../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
-import "./UI/Css/style.less"
+import './UI/Css/style.less';
 import { LoadLayoutNotHead } from './UI/Layout/Layout';
 import { CommandComponent } from "./UI/Components/Command";
 import { App } from './UI/App';
@@ -12,7 +12,7 @@ import { Provider } from "mobx-react";
 import { ApplicationService, app } from './ApplicationServices/Application';
 import { DownPanel } from './UI/Components/Panel';
 import { DownPanelStore } from './UI/Store/DownPanelStore';
-import { DrawLine, Undo, Redo, ZoomE, DrawBox } from './Add-on/DrawLine';
+import { DrawBox, DrawCircle, DrawLine, DrawRect, Redo, Undo, ZoomE } from './Add-on/DrawLine';
 import { UndoData } from './DatabaseServices/UndoData';
 import { Solid3d, Line } from './DatabaseServices/Entity';
 import { Vector3 } from 'three';
@@ -59,6 +59,10 @@ function initApp()
     app.m_Editor.m_CommandMachine.m_CommandList.set("redo", new Redo())
     app.m_Editor.m_CommandMachine.m_CommandList.set("ze", new ZoomE())
     app.m_Editor.m_CommandMachine.m_CommandList.set("box", new DrawBox())
+    app.m_Editor.m_CommandMachine.m_CommandList.set("rec", new DrawRect())
+    app.m_Editor.m_CommandMachine.m_CommandList.set("c", new DrawCircle())
+
+
 
     // let box = new Solid3d(10, 10, 10);
     // app.m_Database.appendEntity(box)

webpack.config.js

@@ -17,12 +17,15 @@ module.exports = {
             "three-FBXLoader": path.resolve(__dirname, "./src/Loader/FBXLoader.js"),
             "zlib": path.resolve(__dirname, "./node_modules/three/examples/js/libs/inflate.min.js"),
             "three-CopyShader": path.resolve(__dirname, "./node_modules/three/examples/js/shaders/CopyShader.js"),
+            "three-SMAAShader": path.resolve(__dirname, "./node_modules/three/examples/js/shaders/SMAAShader.js"),
             "three-FXAAShader": path.resolve(__dirname, "./node_modules/three/examples/js/shaders/FXAAShader.js"),
 
             "three-OutlinePass": path.resolve(__dirname, "./src/GraphicsSystem/OutlinePass.js"),
             "three-EffectComposer": path.resolve(__dirname, "./node_modules/three/examples/js/postprocessing/EffectComposer.js"),
             "three-RenderPass": path.resolve(__dirname, "./node_modules/three/examples/js/postprocessing/RenderPass.js"),
             "three-ShaderPass": path.resolve(__dirname, "./node_modules/three/examples/js/postprocessing/ShaderPass.js"),
+            "three-ShaderPass": path.resolve(__dirname, "./node_modules/three/examples/js/postprocessing/ShaderPass.js"),
+            "three-SMAAPass": path.resolve(__dirname, "./node_modules/three/examples/js/postprocessing/SMAAPass.js"),
             // "stats-js": path.resolve(__dirname, './node_modules/stats.js/src/stats.js'),
         },
         // Add '.ts' and '.tsx' as resolvable extensions.