diff --git a/@types/three/index.d.ts b/@types/three/index.d.ts index bfd4e78ef..da9bc5f45 100644 --- a/@types/three/index.d.ts +++ b/@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; diff --git a/@types/three/three-SMAAPass.d.ts b/@types/three/three-SMAAPass.d.ts new file mode 100644 index 000000000..76d5f14a7 --- /dev/null +++ b/@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; +} + diff --git a/src/Add-on/DrawLine.ts b/src/Add-on/DrawLine.ts index 414fb44ee..3ea1f3320 100644 --- a/src/Add-on/DrawLine.ts +++ b/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) => @@ -117,4 +117,106 @@ void main() { console.log('obj: ', obj); 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); + } + } } \ No newline at end of file diff --git a/src/DatabaseServices/Entity.ts b/src/DatabaseServices/Entity.ts index 1543f3bfb..750b3cc9f 100644 --- a/src/DatabaseServices/Entity.ts +++ b/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); + (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); + (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) @@ -244,5 +314,4 @@ export class Point extends Entity { super() } -} - +} \ No newline at end of file diff --git a/src/Editor/Editor.ts b/src/Editor/Editor.ts index 7d87a91ef..84407ae4d 100644 --- a/src/Editor/Editor.ts +++ b/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); diff --git a/src/index.tsx b/src/index.tsx index 0e5237eeb..5524a55a0 100644 --- a/src/index.tsx +++ b/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) @@ -71,4 +75,4 @@ window.onload = function () initApp(); renderCommand(); renderDownPanel() -}; +}; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 2da3ffa82..ba5fca08c 100644 --- a/webpack.config.js +++ b/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.