From fe1bfbaa259edd15517987f770ca9e98c813790c Mon Sep 17 00:00:00 2001 From: ChenX Date: Thu, 29 Jun 2017 17:50:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B8=85=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ApplicationServices/Application.ts | 283 ++----------------------- src/GraphicsSystem/Viewer.ts | 4 +- src/Test/test.ts | 102 +++++++++ src/UI/Components/Command.tsx | 4 +- src/UI/Layout/Layout.ts | 60 ++++-- src/UI/Store/CommandStore.ts | 1 - src/index.tsx | 25 +-- 7 files changed, 177 insertions(+), 302 deletions(-) create mode 100644 src/Test/test.ts diff --git a/src/ApplicationServices/Application.ts b/src/ApplicationServices/Application.ts index c9e437f1c..12499f77a 100644 --- a/src/ApplicationServices/Application.ts +++ b/src/ApplicationServices/Application.ts @@ -28,7 +28,7 @@ export class ApplicationService //数据 this.m_Database = new Database(); //渲染器 - this.m_Viewer = new Viewer(document.getElementById("webgl2"), this.m_Database.m_Scene); + this.m_Viewer = new Viewer(document.getElementById("Webgl"), this.m_Database.m_Scene); //相机控制 new CameraControls(this.m_Viewer, this.m_Viewer.m_Render.domElement); @@ -39,141 +39,37 @@ export class ApplicationService app = this; ed = this.m_Editor; db = this.m_Database - load() - loadTestSelectBox() } - static Application: ApplicationService; } -let pts: THREE.Points -let selectPts: THREE.Points -function load() -{ - //绘制直线 - var line = new Line(new THREE.Vector3(0, 0, 0), - new THREE.Vector3(100, 100, 0) - ); - db.appendEntity(line); - //绘制直线 - var line2 = new Line(new THREE.Vector3(100, 0, 0), - new THREE.Vector3(0, 100, 0) - ); - db.appendEntity(line2); - - // app.m_Viewer.m_bIsChange = true; - // //绘制方块 - // var box = new Solid3d(3, 3, 3); - // db.appendEntity(box); - - - let geometry = new THREE.Geometry(); - for (let i = 0; i < 10; i++) - { - var vertex = new THREE.Vector3(); - vertex.x = i * 50; - vertex.y = 0; - vertex.z = 0 - geometry.vertices.push(vertex); - } - let material = new THREE.PointsMaterial({ - size: 15, - color: 0x001dfa, - sizeAttenuation: false - - }); - - pts = new THREE.Points(geometry, material); - - pts.userData = app; - - let geo2 = new THREE.Geometry(); - geo2.vertices.push(new THREE.Vector3()) - let mat2 = new THREE.PointsMaterial({ - size: 15, - color: 0xde9722, - sizeAttenuation: false - }) - selectPts = new THREE.Points(geo2, mat2); - - app.m_Viewer.m_Scene.add(selectPts) - - app.m_Viewer.m_Scene.add(pts); - - //绘制方块 - var box = new Solid3d(300, 300, 300); - db.appendEntity(box); - - - ed.UpdateScreen() - -} - - -let raycaster = new THREE.Raycaster(); -let lastIndex: number; export function MouseMove(pt: THREE.Vector3) { - let points = (pts.geometry).vertices; - - let haveShow = false; - for (let index = 0; index < points.length; index++) - { - let temp = points[index].clone(); - app.m_Viewer.WorldToScreen(temp); - if (Math.abs(temp.x - pt.x) < 7.5 - && Math.abs(temp.y - pt.y) < 7.5 - ) - { - if (lastIndex != index) - { - selectPts.position.copy(points[index]) - } - haveShow = true; - break; - } - } - selectPts.visible = haveShow; + // let points = (pts.geometry).vertices; + + // let haveShow = false; + // for (let index = 0; index < points.length; index++) + // { + // let temp = points[index].clone(); + // app.m_Viewer.WorldToScreen(temp); + // if (Math.abs(temp.x - pt.x) < 7.5 + // && Math.abs(temp.y - pt.y) < 7.5 + // ) + // { + // if (lastIndex != index) + // { + // selectPts.position.copy(points[index]) + // } + // haveShow = true; + // break; + // } + // } + // selectPts.visible = haveShow; ed.UpdateScreen() } -function loadTestPoints() -{ - -} - -function loadTestSelectBox() -{ - var baseColor = 0x333333; - var simpleMaterial = new THREE.MeshBasicMaterial(); - simpleMaterial.color.setHex(baseColor); - - let box2 = new Solid3d(1, 1, 1); - (box2.m_ThreeObj).material = simpleMaterial; - let mat = new THREE.Matrix4() - mat.setPosition(new THREE.Vector3(50, 0, 0)) - box2.applyMatrix4(mat) - db.appendEntity(box2) - - - for (var index = 0; index < 10000; index++) - { - var baseColor = 0x333333; - let simpleMaterial = new THREE.MeshBasicMaterial(); - simpleMaterial.color.setHex(baseColor); - - let boxx = new Solid3d(1, 1, 1, ) - let mat = new THREE.Matrix4() - mat.setPosition(new THREE.Vector3(Math.random() * 1000, Math.random() * 1000, 0)); - (boxx.m_ThreeObj).material = simpleMaterial; - boxx.applyMatrix4(mat) - db.appendEntity(boxx) - } -} - - window["viewtop"] = function () { ed.ViewToTop() @@ -184,142 +80,5 @@ window["viewfont"] = function () ed.ViewToFont() } -window["tt"] = function () -{ - app.m_Database.m_EntityCollection.forEach(element => - { - let box = element.GetBox() - let size = new THREE.Vector3() - box.getSize(size) - - let ent = new Solid3d(size.x, size.y, size.z) - db.appendEntity(ent) - }); -} - - - - - -window["tx"] = function () -{ - let c = new CoordinateSystem(new THREE.Vector3(0, 0, 0), - new THREE.Vector3(1, 0, 0), - new THREE.Vector3(0, 1, 0), - new THREE.Vector3(0, 0, 1) - ); - let d = c.clone() - - d.m_xAxis.set(0, 3, 3); - - console.log(c) -} - - - - -export class Command -{ - m_Type;//命令类型. - exec() - { - - } - end() - { - - } -} - - -var s = false; - - -class EvenManage -{ - - calFunc: (pt: THREE.Vector3) => any; - funcList: Array<(pt: THREE.Vector3) => void> = []; - async Getpoint(callback: (pt: THREE.Vector3) => any) - { - // this.calFunc = callback; - this.funcList.push(callback); - } - funcIndex = 0; - reset() - { - this.funcList = []; - this.funcIndex = 0; - } - exec(pt: THREE.Vector3) - { - if (this.funcIndex < this.funcList.length) - { - this.funcList[this.funcIndex](pt); - this.funcIndex++; - if (this.funcIndex == this.funcList.length) - { - this.reset(); - } - } - - - // if (this.calFunc) { - // let f = this.calFunc; - // this.calFunc = undefined; - // f(pt); - // } - - } -} - -class CommandDrawLine extends Command -{ - constructor() - { - super() - } - - exec() - { - console.log("请输入一个点:") - bus.reset(); - bus.Getpoint((p) => - { - console.log("请输入第二个点:") - this.ptStart = p; - - }); - bus.Getpoint((p) => - { - this.ptEnd = p; - - console.log("现在你获取到了2个点.你的点是:") - console.log(this.ptStart) - console.log(this.ptEnd); - }) - } - // async GetStartPoint(pt: THREE.Vector3) { - // await this.exec(); - // } - ptStart: THREE.Vector3; - ptEnd: THREE.Vector3; -} - -let bus = new EvenManage(); - - -window["line"] = () => -{ - //执行命令. - - let cmd = new CommandDrawLine(); - cmd.exec(); -} -window["test"] = () => -{ - bus.exec(new THREE.Vector3(0, 0, 0)) -}; - diff --git a/src/GraphicsSystem/Viewer.ts b/src/GraphicsSystem/Viewer.ts index 72ca5422e..cb7e07b0a 100644 --- a/src/GraphicsSystem/Viewer.ts +++ b/src/GraphicsSystem/Viewer.ts @@ -80,6 +80,8 @@ export class Viewer onSize = () => { + console.log(this.m_HtmlElement.clientWidth); + console.log(this.m_HtmlElement.clientHeight); this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight); this.m_Camera.Update(); this.m_bIsChange = true; @@ -113,10 +115,8 @@ export class Viewer //设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。 this.m_Render.setPixelRatio(window.devicePixelRatio); - //这里暂时初始化成这个. 未来将分离出 Viewer this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight); - this.m_HtmlElement.parentElement.addEventListener("resize", this.onSize) //设置它的背景色为黑色 this.m_Render.setClearColor(0x000000, 1); diff --git a/src/Test/test.ts b/src/Test/test.ts new file mode 100644 index 000000000..192154982 --- /dev/null +++ b/src/Test/test.ts @@ -0,0 +1,102 @@ +// let pts: THREE.Points +// let selectPts: THREE.Points +// function load() +// { +// //绘制直线 +// var line = new Line(new THREE.Vector3(0, 0, 0), +// new THREE.Vector3(100, 100, 0) +// ); +// db.appendEntity(line); +// //绘制直线 +// var line2 = new Line(new THREE.Vector3(100, 0, 0), +// new THREE.Vector3(0, 100, 0) +// ); +// db.appendEntity(line2); + +// // app.m_Viewer.m_bIsChange = true; +// // //绘制方块 +// // var box = new Solid3d(3, 3, 3); +// // db.appendEntity(box); + + +// let geometry = new THREE.Geometry(); +// for (let i = 0; i < 10; i++) +// { +// var vertex = new THREE.Vector3(); +// vertex.x = i * 50; +// vertex.y = 0; +// vertex.z = 0 +// geometry.vertices.push(vertex); +// } +// let material = new THREE.PointsMaterial({ +// size: 15, +// color: 0x001dfa, +// sizeAttenuation: false + +// }); + +// pts = new THREE.Points(geometry, material); + +// pts.userData = app; + +// let geo2 = new THREE.Geometry(); +// geo2.vertices.push(new THREE.Vector3()) +// let mat2 = new THREE.PointsMaterial({ +// size: 15, +// color: 0xde9722, +// sizeAttenuation: false +// }) +// selectPts = new THREE.Points(geo2, mat2); + +// app.m_Viewer.m_Scene.add(selectPts) + +// app.m_Viewer.m_Scene.add(pts); + + +// //绘制方块 +// var box = new Solid3d(300, 300, 300); +// db.appendEntity(box); + + +// ed.UpdateScreen() + +// } + + +// let raycaster = new THREE.Raycaster(); +// let lastIndex: number; + + +// function loadTestPoints() +// { + +// } + +// function loadTestSelectBox() +// { +// var baseColor = 0x333333; +// var simpleMaterial = new THREE.MeshBasicMaterial(); +// simpleMaterial.color.setHex(baseColor); + +// let box2 = new Solid3d(1, 1, 1); +// (box2.m_ThreeObj).material = simpleMaterial; +// let mat = new THREE.Matrix4() +// mat.setPosition(new THREE.Vector3(50, 0, 0)) +// box2.applyMatrix4(mat) +// db.appendEntity(box2) + + +// for (var index = 0; index < 10000; index++) +// { +// var baseColor = 0x333333; +// let simpleMaterial = new THREE.MeshBasicMaterial(); +// simpleMaterial.color.setHex(baseColor); + +// let boxx = new Solid3d(1, 1, 1, ) +// let mat = new THREE.Matrix4() +// mat.setPosition(new THREE.Vector3(Math.random() * 1000, Math.random() * 1000, 0)); +// (boxx.m_ThreeObj).material = simpleMaterial; +// boxx.applyMatrix4(mat) +// db.appendEntity(boxx) +// } +// } diff --git a/src/UI/Components/Command.tsx b/src/UI/Components/Command.tsx index b8cd223ce..5882cddef 100644 --- a/src/UI/Components/Command.tsx +++ b/src/UI/Components/Command.tsx @@ -15,8 +15,8 @@ export class CommandComponent extends React.Component<{ commandStore?: CommandSt display: "block", /* iframes are inline by default */ background: "#000", border: "none", /* Reset default border */ - height: "100vh", /* Viewport-relative units */ - width: "100vw", + height: "100%", /* Viewport-relative units */ + width: "100%", borderTopWidth: "5px", borderLeftWidth: "5px" } diff --git a/src/UI/Layout/Layout.ts b/src/UI/Layout/Layout.ts index a2b110c20..7d13ca8ad 100644 --- a/src/UI/Layout/Layout.ts +++ b/src/UI/Layout/Layout.ts @@ -1,3 +1,4 @@ +import { app } from '../../ApplicationServices/Application'; import GoldenLayout = require('golden-layout') const containerComponenName = "container" //界面的布局定义 @@ -10,24 +11,34 @@ const layoutConfig: GoldenLayout.Config = { dimensions: { borderWidth: 1 }, content: [{ type: 'column', - content: [{ - type: 'row', - height: 8, - content: [{ - type: 'component', - componentName: containerComponenName, - componentState: { id: "test1" } - }], - }, - { - type: 'row', - height: 2, - content: [{ - type: 'component', - componentName: containerComponenName, - componentState: { id: "commandContainer" } - }] - } + content: [ + { + type: 'row', + height: 0.5, + content: [{ + type: 'component', + componentName: containerComponenName, + componentState: { id: "TopPanel" } + }], + }, + { + type: 'row', + height: 8, + content: [{ + type: 'component', + componentName: containerComponenName, + componentState: { id: "Webgl" } + }], + }, + { + type: 'row', + height: 2, + content: [{ + type: 'component', + componentName: containerComponenName, + componentState: { id: "commandContainer" } + }] + } ] }] }; @@ -38,7 +49,17 @@ export function LoadLayoutNotHead() var myLayout = new GoldenLayout(layoutConfig, el); myLayout.registerComponent(containerComponenName, function (container: GoldenLayout.Container, state) { - container.getElement().html(`
`) + if (state.id == "Webgl") + { + container.on("resize", () => + { + if (app) + { + app.m_Viewer.onSize(); + } + }) + } + container.getElement().html(`
`) }); myLayout.init() //监听resize @@ -48,7 +69,6 @@ export function LoadLayoutNotHead() }) } - // function test2() // { // var config = { diff --git a/src/UI/Store/CommandStore.ts b/src/UI/Store/CommandStore.ts index 9a08bfa8e..07c8738b6 100644 --- a/src/UI/Store/CommandStore.ts +++ b/src/UI/Store/CommandStore.ts @@ -52,7 +52,6 @@ export class CommandStore keyDownHandle = (keyCode: number) => { - console.log(keyCode); let inpValue: string = this.elInput.value; switch (keyCode) { diff --git a/src/index.tsx b/src/index.tsx index aa03e606f..7307f5ca9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,6 +9,7 @@ import { App } from './UI/App'; import { commandStore, CommandMsg } from './UI/Store/CommandStore'; import { autorun, observable } from 'mobx'; import { Provider } from "mobx-react"; +import { ApplicationService } from './ApplicationServices/Application'; function createRootElement() { var root = document.createElement('div'); @@ -29,22 +30,16 @@ function renderCommand() ) } -// window.onload = function () -// { -// createRootElement(); -// LoadLayoutNotHead(); -// renderCommand(); -// }; - -window.onload = () => +function initApp() { - ReactDOM.render( - - - , - createRootElement() - ) + new ApplicationService(); } -window["t"] = commandStore; \ No newline at end of file +window.onload = function () +{ + createRootElement(); + LoadLayoutNotHead(); + renderCommand(); + initApp(); +}; \ No newline at end of file