mirror of https://gitee.com/cf-fz/WebCAD.git
FishOrBear
7 years ago
parent
9c2ac4cab8
commit
06f7c6f867
@ -0,0 +1,3 @@
|
||||
// 将设置放入此文件中以覆盖默认值和用户设置。
|
||||
{
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
|
||||
import * as THREE from 'three'
|
||||
import { Viewer } from "../GraphicsSystem/Viewer";
|
||||
import { Entity } from "./Entity";
|
||||
|
||||
export enum SceneType
|
||||
{
|
||||
Wireframe = 0
|
||||
}
|
||||
export class Database
|
||||
{
|
||||
//场景
|
||||
m_Scene: THREE.Scene;
|
||||
|
||||
m_EntityCollection: Array<Entity> = [];//图形集合
|
||||
constructor()
|
||||
{
|
||||
this.m_Scene = new THREE.Scene();
|
||||
}
|
||||
|
||||
|
||||
//添加图元到数据对象
|
||||
appendEntity(ent: Entity)
|
||||
{
|
||||
this.m_EntityCollection.push(ent);
|
||||
this.m_Scene.add(ent.m_ThreeObj);
|
||||
}
|
||||
getScene(type: SceneType): THREE.Scene
|
||||
{
|
||||
//TODO: 返回指定类型的场景
|
||||
return this.m_Scene;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import * as THREE from "three"
|
||||
|
||||
export class Entity
|
||||
{
|
||||
m_ThreeObj: THREE.Object3D;
|
||||
}
|
||||
|
||||
export class Curve extends Entity
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
}
|
||||
|
||||
export class Line extends Curve
|
||||
{
|
||||
private m_StartPoint: THREE.Vector3 = new THREE.Vector3();
|
||||
private m_EndPoint: THREE.Vector3 = new THREE.Vector3();
|
||||
|
||||
constructor(startPt: THREE.Vector3, endPt: THREE.Vector3)
|
||||
{
|
||||
super();
|
||||
this.m_StartPoint.copy(startPt);
|
||||
this.m_EndPoint.copy(endPt);
|
||||
|
||||
var geometry = new THREE.Geometry();
|
||||
geometry.vertices.push(startPt);
|
||||
geometry.vertices.push(endPt);
|
||||
//create a blue LineBasicMaterial
|
||||
var material = new THREE.LineBasicMaterial();
|
||||
this.m_ThreeObj = new THREE.Line(geometry, material);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class Solid3d extends Entity
|
||||
{
|
||||
constructor(len: number, wid: number, hei: number)
|
||||
{
|
||||
super();
|
||||
var geometry = new THREE.BoxGeometry(len, wid, hei);
|
||||
this.m_ThreeObj = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
|
||||
import * as dat from "dat.gui"
|
||||
import { Application2 } from "../Application";
|
||||
export class DebugDatUi
|
||||
{
|
||||
//UI.
|
||||
m_Ctrl_UI: dat.GUI;
|
||||
|
||||
//Testz
|
||||
z: number = 0;
|
||||
arr: string = "a";
|
||||
color: string = "#ffae23";
|
||||
constructor()
|
||||
{
|
||||
this.m_Ctrl_UI = new dat.GUI(
|
||||
{
|
||||
autoPlace: true,
|
||||
width: 555,
|
||||
|
||||
}
|
||||
);
|
||||
this.m_Ctrl_UI.add(this, "z");
|
||||
this.m_Ctrl_UI.add(this, "arr", ["a", "b"]);
|
||||
|
||||
var change = this.m_Ctrl_UI.addColor(this, "color");
|
||||
change.onChange((value: any) =>
|
||||
{
|
||||
Application2.Application.m_Viewer.m_Render.setClearColor(this.color);
|
||||
Application2.Application.m_Viewer.m_bIsChange = true;
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,214 @@
|
||||
//组合相机.
|
||||
//这个相机可以随意切换相机.
|
||||
|
||||
import * as THREE from "three"
|
||||
import { Viewer } from "./Viewer";
|
||||
//相机类.
|
||||
//https://www.youtube.com/watch?v=k3adBAnDpos
|
||||
export class Camera
|
||||
{
|
||||
m_CurCamera: THREE.Camera;
|
||||
m_ParentViewer: Viewer;
|
||||
constructor(view: Viewer)
|
||||
{
|
||||
this.m_ParentViewer = view;
|
||||
let viewHeight = view.m_ViewHeight;
|
||||
var aspectRatio = window.innerWidth / window.innerHeight;
|
||||
this.m_CurCamera = new THREE.OrthographicCamera(
|
||||
aspectRatio * viewHeight / -2,
|
||||
aspectRatio * viewHeight / 2,
|
||||
viewHeight / 2,
|
||||
viewHeight / -2,
|
||||
-300, 300);
|
||||
this.m_CurCamera.position.set(0, 0, 30);
|
||||
var mat = new THREE.Matrix4();
|
||||
}
|
||||
|
||||
Pan(v: THREE.Vector3)
|
||||
{
|
||||
let viewHeight = this.m_ParentViewer.m_ViewHeight;
|
||||
var aspectRatio = this.m_ParentViewer.m_HtmlElement.offsetWidth / this.m_ParentViewer.m_HtmlElement.offsetHeight;
|
||||
// var aspectRatio = window.innerWidth / window.innerHeight;
|
||||
v.x *= -1;
|
||||
v.multiplyScalar(viewHeight / this.m_ParentViewer.m_HtmlElement.offsetHeight);
|
||||
if (this.m_CurCamera instanceof THREE.PerspectiveCamera)
|
||||
{
|
||||
// perspective
|
||||
const position = this.m_CurCamera.position;
|
||||
this.m_CurCamera.position.add(v);
|
||||
}
|
||||
else if (this.m_CurCamera instanceof THREE.OrthographicCamera)
|
||||
{
|
||||
let p = this.m_CurCamera.position;
|
||||
this.m_CurCamera.position.add(v);
|
||||
// this.m_CurCamera.up.set(0, 0, -1);
|
||||
this.m_CurCamera.lookAt(new THREE.Vector3(p.x, p.y, 0));
|
||||
}
|
||||
else
|
||||
{
|
||||
}
|
||||
}
|
||||
UpdateHeight()
|
||||
{
|
||||
let viewHeight = this.m_ParentViewer.m_ViewHeight;
|
||||
var aspectRatio = window.innerWidth / window.innerHeight;
|
||||
if (this.m_CurCamera instanceof THREE.OrthographicCamera)
|
||||
{
|
||||
this.m_CurCamera.left = aspectRatio * viewHeight / -2;
|
||||
this.m_CurCamera.right = aspectRatio * viewHeight / 2;
|
||||
this.m_CurCamera.bottom = viewHeight / -2;
|
||||
this.m_CurCamera.top = viewHeight / 2;
|
||||
|
||||
this.m_CurCamera.updateProjectionMatrix();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//控制状态
|
||||
enum State
|
||||
{
|
||||
Null = 0, Pan = 1, Rotate = 2, Scale = 3
|
||||
}
|
||||
|
||||
//控制类型
|
||||
enum CameraControlsEnabled
|
||||
{
|
||||
Rotate = 1,
|
||||
Zoom = 2,
|
||||
Pan = 4,
|
||||
}
|
||||
//
|
||||
enum ButtonKey
|
||||
{
|
||||
Left = 0,
|
||||
Middle = 1,
|
||||
Right = 2,
|
||||
}
|
||||
//相机控制
|
||||
export class CameraControls
|
||||
{
|
||||
|
||||
m_domElement: HTMLElement | HTMLDocument;
|
||||
m_window: Window;
|
||||
|
||||
//起始点击.
|
||||
m_StartChickPoint: THREE.Vector3 = new THREE.Vector3();
|
||||
m_EndChickPoint: THREE.Vector3 = new THREE.Vector3();
|
||||
m_bKeyCtrlIsDown: boolean;
|
||||
//状态
|
||||
m_State: State = State.Null;
|
||||
m_Viewer: Viewer;
|
||||
|
||||
constructor(viewer: Viewer, domElement?: HTMLElement, docWindow?: Window)
|
||||
{
|
||||
this.m_Viewer = viewer;
|
||||
this.m_domElement = domElement ? domElement : document;
|
||||
if (docWindow)
|
||||
{
|
||||
this.m_window = docWindow;
|
||||
}
|
||||
this.RegisterEvent();
|
||||
}
|
||||
|
||||
RegisterEvent()
|
||||
{
|
||||
if (this.m_domElement)
|
||||
{
|
||||
this.m_domElement.addEventListener("mousedown", this.onMouseDown, false)
|
||||
this.m_domElement.addEventListener("mousemove", this.onMouseMove, false)
|
||||
this.m_domElement.addEventListener("mouseup", this.onMouseUp, false)
|
||||
window.addEventListener("keydown", this.onKeyDown, false);
|
||||
|
||||
this.m_domElement.addEventListener('wheel', this.onMouseWheel, false);
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标
|
||||
onMouseDown = (event: MouseEvent) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
let key: ButtonKey = event.button;
|
||||
this.m_StartChickPoint.set(event.clientX, event.clientY, 0);
|
||||
switch (key)
|
||||
{
|
||||
case ButtonKey.Left:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case ButtonKey.Middle:
|
||||
{
|
||||
if (this.m_bKeyCtrlIsDown)
|
||||
{
|
||||
this.m_State = State.Rotate;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.m_State = State.Pan;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case ButtonKey.Right:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
onMouseUp = (event: MouseEvent) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
this.m_State = State.Null;
|
||||
}
|
||||
onMouseMove = (event: MouseEvent) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
this.m_EndChickPoint.set(event.clientX, event.clientY, 0);
|
||||
|
||||
let changeVec: THREE.Vector3 = new THREE.Vector3();
|
||||
changeVec.subVectors(this.m_EndChickPoint, this.m_StartChickPoint);
|
||||
this.m_StartChickPoint.copy(this.m_EndChickPoint);
|
||||
switch (this.m_State)
|
||||
{
|
||||
case State.Pan:
|
||||
{
|
||||
this.m_Viewer.Pan(changeVec);
|
||||
break;
|
||||
}
|
||||
case State.Rotate:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Scale:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
onMouseWheel = (event: WheelEvent) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
console.log(event.deltaY);
|
||||
if (event.deltaY < 0)
|
||||
{
|
||||
this.m_Viewer.Zoom(0.6);
|
||||
} else if (event.deltaY > 0)
|
||||
{
|
||||
this.m_Viewer.Zoom(1.4);
|
||||
}
|
||||
}
|
||||
//按键
|
||||
onKeyDown = (event: KeyboardEvent) =>
|
||||
{
|
||||
switch (event.key)
|
||||
{
|
||||
case "Ctrl":
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
onKeyUp = (event: KeyboardEvent) =>
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { Application, Application2 } from "./Application";
|
||||
|
||||
window.onload = function ()
|
||||
{
|
||||
new Application2();
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue