MES/CADViewComponent
6
0
Fork 0
Code Issues Pull Requests Releases 15 Wiki Activity

view构造函数允许直接传入一个画布.

Browse Source
This commit is contained in:
ChenX 2018-07-02 15:19:22 +08:00
parent c1e9aac48b
commit 563ea73750
6 changed files with 211 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dist/Viewer.d.ts vendored
View File

@ -1,4 +1,4 @@
import * as THREE from "three"; import { Scene, Vector3, WebGLRenderer } from "three";
import { CameraControls } from "."; import { CameraControls } from ".";
import { CameraUpdate } from "./CameraUpdate"; import { CameraUpdate } from "./CameraUpdate";
export declare class Viewer { export declare class Viewer {
@ -6,27 +6,32 @@ export declare class Viewer {
m_Camera: CameraUpdate; m_Camera: CameraUpdate;
m_CameraCtrl: CameraControls; m_CameraCtrl: CameraControls;
m_bNeedUpdate: boolean; m_bNeedUpdate: boolean;
m_Render: THREE.WebGLRenderer; m_Render: WebGLRenderer;
m_DomEl: HTMLElement; m_DomEl: HTMLElement;
_Height: number; _Height: number;
_Width: number; _Width: number;
m_Scene: THREE.Scene; m_Scene: Scene;
/**
*
* @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
* @memberof Viewer
*/
constructor(canvasContainer: HTMLElement); constructor(canvasContainer: HTMLElement);
initRender(canvasContainer: HTMLElement): void; initRender(canvasContainer: HTMLElement): void;
OnSize: (width?: any, height?: any) => void; OnSize: (width?: any, height?: any) => void;
StartRender: () => void; StartRender: () => void;
Render(): void; Render(): void;
ScreenToWorld(pt: THREE.Vector3, planVec?: THREE.Vector3): void; ScreenToWorld(pt: Vector3, planVec?: Vector3): void;
WorldToScreen(pt: THREE.Vector3): void; WorldToScreen(pt: Vector3): void;
/** /**
* 更新视角观测目标(物体中心) * 更新视角观测目标(物体中心)
* *
* @memberof Viewer * @memberof Viewer
*/ */
UpdateLockTarget(): void; UpdateLockTarget(): void;
Rotate(mouseMove: THREE.Vector3): void; Rotate(mouseMove: Vector3): void;
Pan(mouseMove: THREE.Vector3): void; Pan(mouseMove: Vector3): void;
Zoom(scale: number, center?: THREE.Vector3): void; Zoom(scale: number, center?: Vector3): void;
ZoomAll(): void; ZoomAll(): void;
ViewToTop(): void; ViewToTop(): void;
ViewToFront(): void; ViewToFront(): void;

41
dist/Viewer.js vendored
View File

@ -1,18 +1,22 @@
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
var THREE = require("three"); var three_1 = require("three");
var _1 = require("."); var _1 = require(".");
var CameraUpdate_1 = require("./CameraUpdate"); var CameraUpdate_1 = require("./CameraUpdate");
var ColorPalette_1 = require("./ColorPalette"); var ColorPalette_1 = require("./ColorPalette");
var GeUtils_1 = require("./GeUtils"); var GeUtils_1 = require("./GeUtils");
var PlaneExt_1 = require("./PlaneExt"); var PlaneExt_1 = require("./PlaneExt");
var Viewer = /** @class */ (function () { var Viewer = /** @class */ (function () {
//构造 /**
*
* @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
* @memberof Viewer
*/
function Viewer(canvasContainer) { function Viewer(canvasContainer) {
var _this = this; var _this = this;
this.m_Camera = new CameraUpdate_1.CameraUpdate(); this.m_Camera = new CameraUpdate_1.CameraUpdate();
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
this.m_Scene = new THREE.Scene(); this.m_Scene = new three_1.Scene();
this.OnSize = function (width, height) { this.OnSize = function (width, height) {
_this._Width = width ? width : _this.m_DomEl.clientWidth; _this._Width = width ? width : _this.m_DomEl.clientWidth;
_this._Height = height ? height : _this.m_DomEl.clientHeight; _this._Height = height ? height : _this.m_DomEl.clientHeight;
@ -53,19 +57,26 @@ var Viewer = /** @class */ (function () {
} }
//初始化render //初始化render
Viewer.prototype.initRender = function (canvasContainer) { Viewer.prototype.initRender = function (canvasContainer) {
this.m_Render = new THREE.WebGLRenderer({ var params = {
antialias: true, antialias: true,
precision: "highp", precision: "highp",
alpha: true, alpha: true //alpha:true/false是否可以设置背景色透明
}); };
//加到画布 if (canvasContainer instanceof HTMLCanvasElement) {
canvasContainer.appendChild(this.m_Render.domElement); params.canvas = canvasContainer;
this.m_Render = new three_1.WebGLRenderer(params);
}
else {
this.m_Render = new three_1.WebGLRenderer(params);
//加到画布
canvasContainer.appendChild(this.m_Render.domElement);
}
this.m_Render.autoClear = true; this.m_Render.autoClear = true;
//如果设置，那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。 //如果设置，那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。
// this.m_Render.gammaInput = true; // this.m_Render.gammaInput = true;
// this.m_Render.gammaOutput = true; // this.m_Render.gammaOutput = true;
// this.m_Render.shadowMap.enabled = true; // this.m_Render.shadowMap.enabled = true;
// this.m_Render.toneMapping = THREE.ReinhardToneMapping; // this.m_Render.toneMapping = ReinhardToneMapping;
//设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。 //设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。
this.m_Render.setPixelRatio(window.devicePixelRatio); this.m_Render.setPixelRatio(window.devicePixelRatio);
this.m_Render.physicallyCorrectLights = true; this.m_Render.physicallyCorrectLights = true;
@ -79,8 +90,8 @@ var Viewer = /** @class */ (function () {
}; };
Viewer.prototype.ScreenToWorld = function (pt, planVec) { Viewer.prototype.ScreenToWorld = function (pt, planVec) {
//变换和求交点 //变换和求交点
var plan = new PlaneExt_1.PlaneExt(planVec || new THREE.Vector3(0, 0, 1)); var plan = new PlaneExt_1.PlaneExt(planVec || new three_1.Vector3(0, 0, 1));
var raycaster = new THREE.Raycaster(); var raycaster = new three_1.Raycaster();
// 射线从相机射线向屏幕点位置 // 射线从相机射线向屏幕点位置
raycaster.setFromCamera({ raycaster.setFromCamera({
x: (pt.x / this._Width) * 2 - 1, x: (pt.x / this._Width) * 2 - 1,
@ -104,7 +115,7 @@ var Viewer = /** @class */ (function () {
var renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera); var renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera);
var box = GeUtils_1.GetBoxArr(renderList.opaque.map(function (o) { return o.object; })); var box = GeUtils_1.GetBoxArr(renderList.opaque.map(function (o) { return o.object; }));
if (box) if (box)
this.m_LookTarget = box.getCenter(new THREE.Vector3()); this.m_LookTarget = box.getCenter(new three_1.Vector3());
else else
this.m_LookTarget = GeUtils_1.cZeroVec; this.m_LookTarget = GeUtils_1.cZeroVec;
}; };
@ -125,15 +136,15 @@ var Viewer = /** @class */ (function () {
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
}; };
Viewer.prototype.ViewToTop = function () { Viewer.prototype.ViewToTop = function () {
this.m_Camera.LookAt(new THREE.Vector3(0, 0, -1)); this.m_Camera.LookAt(new three_1.Vector3(0, 0, -1));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
}; };
Viewer.prototype.ViewToFront = function () { Viewer.prototype.ViewToFront = function () {
this.m_Camera.LookAt(new THREE.Vector3(0, 1, 0)); this.m_Camera.LookAt(new three_1.Vector3(0, 1, 0));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
}; };
Viewer.prototype.ViewToSwiso = function () { Viewer.prototype.ViewToSwiso = function () {
this.m_Camera.LookAt(new THREE.Vector3(1, 1, -1)); this.m_Camera.LookAt(new three_1.Vector3(1, 1, -1));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
}; };
return Viewer; return Viewer;

2
dist/Viewer.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cadview", "name": "cadview",
"version": "1.1.8", "version": "1.1.9",
"description": "", "description": "",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",

332
src/Viewer.ts
View File

@ -1,193 +1,199 @@
import * as THREE from "three"; import { Mesh, Raycaster, Scene, Vector3, WebGLRenderer, WebGLRendererParameters } from "three";
import { Mesh } from "three"; import { boardMaterial, CameraControls, PointPick, selectMaterial } from ".";
import { CameraControls, PointPick, boardMaterial, selectMaterial } from ".";
import { CameraUpdate } from "./CameraUpdate"; import { CameraUpdate } from "./CameraUpdate";
import { ColorMaterial } from "./ColorPalette"; import { ColorMaterial } from "./ColorPalette";
import { GetBox, GetBoxArr, cZeroVec } from "./GeUtils"; import { cZeroVec, GetBox, GetBoxArr } from "./GeUtils";
import { PlaneExt } from "./PlaneExt"; import { PlaneExt } from "./PlaneExt";
export class Viewer export class Viewer
{ {
m_LookTarget: any; m_LookTarget: any;
m_Camera: CameraUpdate = new CameraUpdate(); m_Camera: CameraUpdate = new CameraUpdate();
m_CameraCtrl: CameraControls; m_CameraCtrl: CameraControls;
m_bNeedUpdate: boolean = true; m_bNeedUpdate: boolean = true;
m_Render: THREE.WebGLRenderer;//渲染器 //暂时只用这个类型 m_Render: WebGLRenderer;//渲染器 //暂时只用这个类型
m_DomEl: HTMLElement; //画布容器 m_DomEl: HTMLElement; //画布容器
_Height: number; _Height: number;
_Width: number; _Width: number;
m_Scene: THREE.Scene = new THREE.Scene(); m_Scene: Scene = new Scene();
//构造 /**
constructor(canvasContainer: HTMLElement) *
* @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
* @memberof Viewer
*/
constructor(canvasContainer: HTMLElement)
{
this.m_DomEl = canvasContainer;
this.initRender(canvasContainer);
this.OnSize();
this.StartRender();
this.m_CameraCtrl = new CameraControls(this);
window.addEventListener("resize", () =>
{ {
this.m_DomEl = canvasContainer; this.OnSize();
this.initRender(canvasContainer); });
this.OnSize();
this.StartRender();
this.m_CameraCtrl = new CameraControls(this);
window.addEventListener("resize", () =>
{
this.OnSize();
});
let oldMesh: Mesh; let oldMesh: Mesh;
this.m_Render.domElement.addEventListener("mousemove", (e: MouseEvent) => this.m_Render.domElement.addEventListener("mousemove", (e: MouseEvent) =>
{ {
let mesh = PointPick(this, e.offsetX, e.offsetY); let mesh = PointPick(this, e.offsetX, e.offsetY);
if (oldMesh) if (oldMesh)
oldMesh.material = boardMaterial; oldMesh.material = boardMaterial;
if (mesh && mesh.material !== ColorMaterial.GetLineMaterial(1)) if (mesh && mesh.material !== ColorMaterial.GetLineMaterial(1))
{ {
oldMesh = mesh; oldMesh = mesh;
mesh.material = selectMaterial; mesh.material = selectMaterial;
} }
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
}) })
}
//初始化render
initRender(canvasContainer: HTMLElement)
{
let params: WebGLRendererParameters = {
antialias: true,//antialias:true/false是否开启反锯齿
precision: "highp",//precision:highp/mediump/lowp着色精度选择
alpha: true//alpha:true/false是否可以设置背景色透明
};
if (canvasContainer instanceof HTMLCanvasElement)
{
params.canvas = canvasContainer;
this.m_Render = new WebGLRenderer(params);
}
else
{
this.m_Render = new WebGLRenderer(params);
//加到画布
canvasContainer.appendChild(this.m_Render.domElement);
} }
//初始化render this.m_Render.autoClear = true;
initRender(canvasContainer: HTMLElement)
{
this.m_Render = new THREE.WebGLRenderer(
{
antialias: true,//antialias:true/false是否开启反锯齿
precision: "highp",//precision:highp/mediump/lowp着色精度选择
alpha: true,//alpha:true/false是否可以设置背景色透明
// premultipliedAlpha: false,//?
// stencil: false,//?
// preserveDrawingBuffer: true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
// maxLights: 1//maxLights:最大灯光数
}
);
//加到画布
canvasContainer.appendChild(this.m_Render.domElement);
this.m_Render.autoClear = true; //如果设置，那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。
// this.m_Render.gammaInput = true;
// this.m_Render.gammaOutput = true;
// this.m_Render.shadowMap.enabled = true;
// this.m_Render.toneMapping = ReinhardToneMapping;
//设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。
this.m_Render.setPixelRatio(window.devicePixelRatio);
this.m_Render.physicallyCorrectLights = true;
//this.m_Render.toneMappingExposure = Math.pow(1, 5.0); // to allow for very bright scenes.
//如果设置，那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。 //设置它的背景色为黑色
// this.m_Render.gammaInput = true; this.m_Render.setClearColor(0xffffff, 1);
// this.m_Render.gammaOutput = true;
// this.m_Render.shadowMap.enabled = true;
// this.m_Render.toneMapping = THREE.ReinhardToneMapping;
//设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。
this.m_Render.setPixelRatio(window.devicePixelRatio);
this.m_Render.physicallyCorrectLights = true;
//this.m_Render.toneMappingExposure = Math.pow(1, 5.0); // to allow for very bright scenes.
//设置它的背景色为黑色
this.m_Render.setClearColor(0xffffff, 1);
this.OnSize(); this.OnSize();
} }
OnSize = (width?, height?) => OnSize = (width?, height?) =>
{ {
this._Width = width ? width : this.m_DomEl.clientWidth; this._Width = width ? width : this.m_DomEl.clientWidth;
this._Height = height ? height : this.m_DomEl.clientHeight; this._Height = height ? height : this.m_DomEl.clientHeight;
//校验.成为2的倍数 避免外轮廓错误. //校验.成为2的倍数 避免外轮廓错误.
if (this._Width % 2 == 1) if (this._Width % 2 == 1)
this._Width -= 1; this._Width -= 1;
if (this._Height % 2 == 1) if (this._Height % 2 == 1)
this._Height -= 1; this._Height -= 1;
this.m_Render.setSize(this._Width, this._Height); this.m_Render.setSize(this._Width, this._Height);
this.m_Camera.SetSize(this._Width, this._Height); this.m_Camera.SetSize(this._Width, this._Height);
} }
StartRender = () => StartRender = () =>
{
requestAnimationFrame(this.StartRender);
if (this.m_Scene != null && this.m_bNeedUpdate)
{ {
requestAnimationFrame(this.StartRender); this.Render();
if (this.m_Scene != null && this.m_bNeedUpdate) this.m_bNeedUpdate = false;
{
this.Render();
this.m_bNeedUpdate = false;
}
}
Render()
{
this.m_Render.render(this.m_Scene, this.m_Camera.Camera);
} }
}
Render()
{
this.m_Render.render(this.m_Scene, this.m_Camera.Camera);
}
ScreenToWorld(pt: THREE.Vector3, planVec?: THREE.Vector3) ScreenToWorld(pt: Vector3, planVec?: Vector3)
{ {
//变换和求交点 //变换和求交点
let plan = new PlaneExt(planVec || new THREE.Vector3(0, 0, 1)); let plan = new PlaneExt(planVec || new Vector3(0, 0, 1));
let raycaster = new THREE.Raycaster(); let raycaster = new Raycaster();
// 射线从相机射线向屏幕点位置 // 射线从相机射线向屏幕点位置
raycaster.setFromCamera( raycaster.setFromCamera(
{ {
x: (pt.x / this._Width) * 2 - 1, x: (pt.x / this._Width) * 2 - 1,
y: - (pt.y / this._Height) * 2 + 1 y: - (pt.y / this._Height) * 2 + 1
} }
, this.m_Camera.Camera , this.m_Camera.Camera
) )
plan.intersectRay(raycaster.ray, pt, true); plan.intersectRay(raycaster.ray, pt, true);
} }
WorldToScreen(pt: THREE.Vector3) WorldToScreen(pt: Vector3)
{ {
let widthHalf = this._Width * 0.5; let widthHalf = this._Width * 0.5;
let heightHalf = this._Height * 0.5; let heightHalf = this._Height * 0.5;
pt.project(this.m_Camera.Camera); pt.project(this.m_Camera.Camera);
pt.x = (pt.x * widthHalf) + widthHalf; pt.x = (pt.x * widthHalf) + widthHalf;
pt.y = - (pt.y * heightHalf) + heightHalf; pt.y = - (pt.y * heightHalf) + heightHalf;
} }
/** /**
* 更新视角观测目标(物体中心) * 更新视角观测目标(物体中心)
* *
* @memberof Viewer * @memberof Viewer
*/ */
UpdateLockTarget() UpdateLockTarget()
{ {
let renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera); let renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera);
let box = GetBoxArr(renderList.opaque.map(o => o.object)); let box = GetBoxArr(renderList.opaque.map(o => o.object));
if (box) if (box)
this.m_LookTarget = box.getCenter(new THREE.Vector3()); this.m_LookTarget = box.getCenter(new Vector3());
else else
this.m_LookTarget = cZeroVec; this.m_LookTarget = cZeroVec;
} }
Rotate(mouseMove: THREE.Vector3) Rotate(mouseMove: Vector3)
{ {
this.m_Camera.Rotate(mouseMove, this.m_LookTarget); this.m_Camera.Rotate(mouseMove, this.m_LookTarget);
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
Pan(mouseMove: THREE.Vector3) Pan(mouseMove: Vector3)
{ {
this.m_Camera.Pan(mouseMove); this.m_Camera.Pan(mouseMove);
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
Zoom(scale: number, center?: THREE.Vector3) Zoom(scale: number, center?: Vector3)
{ {
this.m_Camera.Zoom(scale, center); this.m_Camera.Zoom(scale, center);
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
ZoomAll() ZoomAll()
{ {
this.m_Camera.ZoomExtensBox3(GetBox(this.m_Scene, true)); this.m_Camera.ZoomExtensBox3(GetBox(this.m_Scene, true));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
ViewToTop() ViewToTop()
{ {
this.m_Camera.LookAt(new THREE.Vector3(0, 0, -1)); this.m_Camera.LookAt(new Vector3(0, 0, -1));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
ViewToFront() ViewToFront()
{ {
this.m_Camera.LookAt(new THREE.Vector3(0, 1, 0)); this.m_Camera.LookAt(new Vector3(0, 1, 0));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
ViewToSwiso() ViewToSwiso()
{ {
this.m_Camera.LookAt(new THREE.Vector3(1, 1, -1)); this.m_Camera.LookAt(new Vector3(1, 1, -1));
this.m_bNeedUpdate = true; this.m_bNeedUpdate = true;
} }
} }

2
umd/cad.js
View File

File diff suppressed because one or more lines are too long