pull/7/head
ChenX 7 years ago
parent 60b2718349
commit fe1bfbaa25

@ -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 = (<THREE.Geometry>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 = (<THREE.Geometry>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);
(<THREE.Mesh>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));
(<THREE.Mesh>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))
};

@ -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);

@ -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);
// (<THREE.Mesh>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));
// (<THREE.Mesh>boxx.m_ThreeObj).material = simpleMaterial;
// boxx.applyMatrix4(mat)
// db.appendEntity(boxx)
// }
// }

@ -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"
}

@ -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(`<div id=${state.id}></div>`)
if (state.id == "Webgl")
{
container.on("resize", () =>
{
if (app)
{
app.m_Viewer.onSize();
}
})
}
container.getElement().html(`<div id=${state.id} style="width: 100%;height: 100%;"></div>`)
});
myLayout.init()
//监听resize
@ -48,7 +69,6 @@ export function LoadLayoutNotHead()
})
}
// function test2()
// {
// var config = {

@ -52,7 +52,6 @@ export class CommandStore
keyDownHandle = (keyCode: number) =>
{
console.log(keyCode);
let inpValue: string = this.elInput.value;
switch (keyCode)
{

@ -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(
<Provider commandStore={commandStore}>
<CommandComponent />
</Provider>,
createRootElement()
)
new ApplicationService();
}
window["t"] = commandStore;
window.onload = function ()
{
createRootElement();
LoadLayoutNotHead();
renderCommand();
initApp();
};
Loading…
Cancel
Save