view构造函数允许直接传入一个画布.
This commit is contained in:
parent
c1e9aac48b
commit
563ea73750
21
dist/Viewer.d.ts
vendored
21
dist/Viewer.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
import * as THREE from "three";
|
||||
import { Scene, Vector3, WebGLRenderer } from "three";
|
||||
import { CameraControls } from ".";
|
||||
import { CameraUpdate } from "./CameraUpdate";
|
||||
export declare class Viewer {
|
||||
@ -6,27 +6,32 @@ export declare class Viewer {
|
||||
m_Camera: CameraUpdate;
|
||||
m_CameraCtrl: CameraControls;
|
||||
m_bNeedUpdate: boolean;
|
||||
m_Render: THREE.WebGLRenderer;
|
||||
m_Render: WebGLRenderer;
|
||||
m_DomEl: HTMLElement;
|
||||
_Height: number;
|
||||
_Width: number;
|
||||
m_Scene: THREE.Scene;
|
||||
m_Scene: Scene;
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
|
||||
* @memberof Viewer
|
||||
*/
|
||||
constructor(canvasContainer: HTMLElement);
|
||||
initRender(canvasContainer: HTMLElement): void;
|
||||
OnSize: (width?: any, height?: any) => void;
|
||||
StartRender: () => void;
|
||||
Render(): void;
|
||||
ScreenToWorld(pt: THREE.Vector3, planVec?: THREE.Vector3): void;
|
||||
WorldToScreen(pt: THREE.Vector3): void;
|
||||
ScreenToWorld(pt: Vector3, planVec?: Vector3): void;
|
||||
WorldToScreen(pt: Vector3): void;
|
||||
/**
|
||||
* 更新视角观测目标(物体中心)
|
||||
*
|
||||
* @memberof Viewer
|
||||
*/
|
||||
UpdateLockTarget(): void;
|
||||
Rotate(mouseMove: THREE.Vector3): void;
|
||||
Pan(mouseMove: THREE.Vector3): void;
|
||||
Zoom(scale: number, center?: THREE.Vector3): void;
|
||||
Rotate(mouseMove: Vector3): void;
|
||||
Pan(mouseMove: Vector3): void;
|
||||
Zoom(scale: number, center?: Vector3): void;
|
||||
ZoomAll(): void;
|
||||
ViewToTop(): void;
|
||||
ViewToFront(): void;
|
||||
|
41
dist/Viewer.js
vendored
41
dist/Viewer.js
vendored
@ -1,18 +1,22 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var THREE = require("three");
|
||||
var three_1 = require("three");
|
||||
var _1 = require(".");
|
||||
var CameraUpdate_1 = require("./CameraUpdate");
|
||||
var ColorPalette_1 = require("./ColorPalette");
|
||||
var GeUtils_1 = require("./GeUtils");
|
||||
var PlaneExt_1 = require("./PlaneExt");
|
||||
var Viewer = /** @class */ (function () {
|
||||
//构造
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
|
||||
* @memberof Viewer
|
||||
*/
|
||||
function Viewer(canvasContainer) {
|
||||
var _this = this;
|
||||
this.m_Camera = new CameraUpdate_1.CameraUpdate();
|
||||
this.m_bNeedUpdate = true;
|
||||
this.m_Scene = new THREE.Scene();
|
||||
this.m_Scene = new three_1.Scene();
|
||||
this.OnSize = function (width, height) {
|
||||
_this._Width = width ? width : _this.m_DomEl.clientWidth;
|
||||
_this._Height = height ? height : _this.m_DomEl.clientHeight;
|
||||
@ -53,19 +57,26 @@ var Viewer = /** @class */ (function () {
|
||||
}
|
||||
//初始化render
|
||||
Viewer.prototype.initRender = function (canvasContainer) {
|
||||
this.m_Render = new THREE.WebGLRenderer({
|
||||
var params = {
|
||||
antialias: true,
|
||||
precision: "highp",
|
||||
alpha: true,
|
||||
});
|
||||
//加到画布
|
||||
canvasContainer.appendChild(this.m_Render.domElement);
|
||||
alpha: true //alpha:true/false是否可以设置背景色透明
|
||||
};
|
||||
if (canvasContainer instanceof HTMLCanvasElement) {
|
||||
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;
|
||||
//如果设置,那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。
|
||||
// this.m_Render.gammaInput = true;
|
||||
// this.m_Render.gammaOutput = true;
|
||||
// this.m_Render.shadowMap.enabled = true;
|
||||
// this.m_Render.toneMapping = THREE.ReinhardToneMapping;
|
||||
// this.m_Render.toneMapping = ReinhardToneMapping;
|
||||
//设置设备像素比。 这通常用于HiDPI设备,以防止模糊输出画布。
|
||||
this.m_Render.setPixelRatio(window.devicePixelRatio);
|
||||
this.m_Render.physicallyCorrectLights = true;
|
||||
@ -79,8 +90,8 @@ var Viewer = /** @class */ (function () {
|
||||
};
|
||||
Viewer.prototype.ScreenToWorld = function (pt, planVec) {
|
||||
//变换和求交点
|
||||
var plan = new PlaneExt_1.PlaneExt(planVec || new THREE.Vector3(0, 0, 1));
|
||||
var raycaster = new THREE.Raycaster();
|
||||
var plan = new PlaneExt_1.PlaneExt(planVec || new three_1.Vector3(0, 0, 1));
|
||||
var raycaster = new three_1.Raycaster();
|
||||
// 射线从相机射线向屏幕点位置
|
||||
raycaster.setFromCamera({
|
||||
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 box = GeUtils_1.GetBoxArr(renderList.opaque.map(function (o) { return o.object; }));
|
||||
if (box)
|
||||
this.m_LookTarget = box.getCenter(new THREE.Vector3());
|
||||
this.m_LookTarget = box.getCenter(new three_1.Vector3());
|
||||
else
|
||||
this.m_LookTarget = GeUtils_1.cZeroVec;
|
||||
};
|
||||
@ -125,15 +136,15 @@ var Viewer = /** @class */ (function () {
|
||||
this.m_bNeedUpdate = true;
|
||||
};
|
||||
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;
|
||||
};
|
||||
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;
|
||||
};
|
||||
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;
|
||||
};
|
||||
return Viewer;
|
||||
|
2
dist/Viewer.js.map
vendored
2
dist/Viewer.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cadview",
|
||||
"version": "1.1.8",
|
||||
"version": "1.1.9",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
|
332
src/Viewer.ts
332
src/Viewer.ts
@ -1,193 +1,199 @@
|
||||
|
||||
import * as THREE from "three";
|
||||
import { Mesh } from "three";
|
||||
import { CameraControls, PointPick, boardMaterial, selectMaterial } from ".";
|
||||
import { Mesh, Raycaster, Scene, Vector3, WebGLRenderer, WebGLRendererParameters } from "three";
|
||||
import { boardMaterial, CameraControls, PointPick, selectMaterial } from ".";
|
||||
import { CameraUpdate } from "./CameraUpdate";
|
||||
import { ColorMaterial } from "./ColorPalette";
|
||||
import { GetBox, GetBoxArr, cZeroVec } from "./GeUtils";
|
||||
import { cZeroVec, GetBox, GetBoxArr } from "./GeUtils";
|
||||
import { PlaneExt } from "./PlaneExt";
|
||||
|
||||
export class Viewer
|
||||
{
|
||||
m_LookTarget: any;
|
||||
m_Camera: CameraUpdate = new CameraUpdate();
|
||||
m_CameraCtrl: CameraControls;
|
||||
m_bNeedUpdate: boolean = true;
|
||||
m_Render: THREE.WebGLRenderer;//渲染器 //暂时只用这个类型
|
||||
m_DomEl: HTMLElement; //画布容器
|
||||
m_LookTarget: any;
|
||||
m_Camera: CameraUpdate = new CameraUpdate();
|
||||
m_CameraCtrl: CameraControls;
|
||||
m_bNeedUpdate: boolean = true;
|
||||
m_Render: WebGLRenderer;//渲染器 //暂时只用这个类型
|
||||
m_DomEl: HTMLElement; //画布容器
|
||||
|
||||
_Height: number;
|
||||
_Width: number;
|
||||
_Height: 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.initRender(canvasContainer);
|
||||
this.OnSize();
|
||||
this.StartRender();
|
||||
this.m_CameraCtrl = new CameraControls(this);
|
||||
window.addEventListener("resize", () =>
|
||||
{
|
||||
this.OnSize();
|
||||
});
|
||||
this.OnSize();
|
||||
});
|
||||
|
||||
let oldMesh: Mesh;
|
||||
this.m_Render.domElement.addEventListener("mousemove", (e: MouseEvent) =>
|
||||
{
|
||||
let mesh = PointPick(this, e.offsetX, e.offsetY);
|
||||
if (oldMesh)
|
||||
oldMesh.material = boardMaterial;
|
||||
if (mesh && mesh.material !== ColorMaterial.GetLineMaterial(1))
|
||||
{
|
||||
oldMesh = mesh;
|
||||
mesh.material = selectMaterial;
|
||||
}
|
||||
this.m_bNeedUpdate = true;
|
||||
})
|
||||
let oldMesh: Mesh;
|
||||
this.m_Render.domElement.addEventListener("mousemove", (e: MouseEvent) =>
|
||||
{
|
||||
let mesh = PointPick(this, e.offsetX, e.offsetY);
|
||||
if (oldMesh)
|
||||
oldMesh.material = boardMaterial;
|
||||
if (mesh && mesh.material !== ColorMaterial.GetLineMaterial(1))
|
||||
{
|
||||
oldMesh = mesh;
|
||||
mesh.material = selectMaterial;
|
||||
}
|
||||
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
|
||||
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;
|
||||
|
||||
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.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.m_Render.setClearColor(0xffffff, 1);
|
||||
|
||||
|
||||
this.OnSize();
|
||||
}
|
||||
this.OnSize();
|
||||
}
|
||||
|
||||
OnSize = (width?, height?) =>
|
||||
{
|
||||
this._Width = width ? width : this.m_DomEl.clientWidth;
|
||||
this._Height = height ? height : this.m_DomEl.clientHeight;
|
||||
OnSize = (width?, height?) =>
|
||||
{
|
||||
this._Width = width ? width : this.m_DomEl.clientWidth;
|
||||
this._Height = height ? height : this.m_DomEl.clientHeight;
|
||||
|
||||
//校验.成为2的倍数 避免外轮廓错误.
|
||||
if (this._Width % 2 == 1)
|
||||
this._Width -= 1;
|
||||
if (this._Height % 2 == 1)
|
||||
this._Height -= 1;
|
||||
//校验.成为2的倍数 避免外轮廓错误.
|
||||
if (this._Width % 2 == 1)
|
||||
this._Width -= 1;
|
||||
if (this._Height % 2 == 1)
|
||||
this._Height -= 1;
|
||||
|
||||
this.m_Render.setSize(this._Width, this._Height);
|
||||
this.m_Camera.SetSize(this._Width, this._Height);
|
||||
}
|
||||
this.m_Render.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);
|
||||
if (this.m_Scene != null && this.m_bNeedUpdate)
|
||||
{
|
||||
this.Render();
|
||||
this.m_bNeedUpdate = false;
|
||||
}
|
||||
}
|
||||
Render()
|
||||
{
|
||||
this.m_Render.render(this.m_Scene, this.m_Camera.Camera);
|
||||
this.Render();
|
||||
this.m_bNeedUpdate = false;
|
||||
}
|
||||
}
|
||||
Render()
|
||||
{
|
||||
this.m_Render.render(this.m_Scene, this.m_Camera.Camera);
|
||||
}
|
||||
|
||||
ScreenToWorld(pt: THREE.Vector3, planVec?: THREE.Vector3)
|
||||
{
|
||||
//变换和求交点
|
||||
let plan = new PlaneExt(planVec || new THREE.Vector3(0, 0, 1));
|
||||
let raycaster = new THREE.Raycaster();
|
||||
// 射线从相机射线向屏幕点位置
|
||||
raycaster.setFromCamera(
|
||||
{
|
||||
x: (pt.x / this._Width) * 2 - 1,
|
||||
y: - (pt.y / this._Height) * 2 + 1
|
||||
}
|
||||
, this.m_Camera.Camera
|
||||
)
|
||||
plan.intersectRay(raycaster.ray, pt, true);
|
||||
}
|
||||
WorldToScreen(pt: THREE.Vector3)
|
||||
{
|
||||
let widthHalf = this._Width * 0.5;
|
||||
let heightHalf = this._Height * 0.5;
|
||||
ScreenToWorld(pt: Vector3, planVec?: Vector3)
|
||||
{
|
||||
//变换和求交点
|
||||
let plan = new PlaneExt(planVec || new Vector3(0, 0, 1));
|
||||
let raycaster = new Raycaster();
|
||||
// 射线从相机射线向屏幕点位置
|
||||
raycaster.setFromCamera(
|
||||
{
|
||||
x: (pt.x / this._Width) * 2 - 1,
|
||||
y: - (pt.y / this._Height) * 2 + 1
|
||||
}
|
||||
, this.m_Camera.Camera
|
||||
)
|
||||
plan.intersectRay(raycaster.ray, pt, true);
|
||||
}
|
||||
WorldToScreen(pt: Vector3)
|
||||
{
|
||||
let widthHalf = this._Width * 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.y = - (pt.y * heightHalf) + heightHalf;
|
||||
}
|
||||
pt.x = (pt.x * widthHalf) + widthHalf;
|
||||
pt.y = - (pt.y * heightHalf) + heightHalf;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新视角观测目标(物体中心)
|
||||
*
|
||||
* @memberof Viewer
|
||||
*/
|
||||
UpdateLockTarget()
|
||||
{
|
||||
let renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera);
|
||||
let box = GetBoxArr(renderList.opaque.map(o => o.object));
|
||||
if (box)
|
||||
this.m_LookTarget = box.getCenter(new THREE.Vector3());
|
||||
else
|
||||
this.m_LookTarget = cZeroVec;
|
||||
}
|
||||
Rotate(mouseMove: THREE.Vector3)
|
||||
{
|
||||
this.m_Camera.Rotate(mouseMove, this.m_LookTarget);
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
Pan(mouseMove: THREE.Vector3)
|
||||
{
|
||||
this.m_Camera.Pan(mouseMove);
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
Zoom(scale: number, center?: THREE.Vector3)
|
||||
{
|
||||
this.m_Camera.Zoom(scale, center);
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ZoomAll()
|
||||
{
|
||||
this.m_Camera.ZoomExtensBox3(GetBox(this.m_Scene, true));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
/**
|
||||
* 更新视角观测目标(物体中心)
|
||||
*
|
||||
* @memberof Viewer
|
||||
*/
|
||||
UpdateLockTarget()
|
||||
{
|
||||
let renderList = this.m_Render.renderLists.get(this.m_Scene, this.m_Camera.Camera);
|
||||
let box = GetBoxArr(renderList.opaque.map(o => o.object));
|
||||
if (box)
|
||||
this.m_LookTarget = box.getCenter(new Vector3());
|
||||
else
|
||||
this.m_LookTarget = cZeroVec;
|
||||
}
|
||||
Rotate(mouseMove: Vector3)
|
||||
{
|
||||
this.m_Camera.Rotate(mouseMove, this.m_LookTarget);
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
Pan(mouseMove: Vector3)
|
||||
{
|
||||
this.m_Camera.Pan(mouseMove);
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
Zoom(scale: number, center?: Vector3)
|
||||
{
|
||||
this.m_Camera.Zoom(scale, center);
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ZoomAll()
|
||||
{
|
||||
this.m_Camera.ZoomExtensBox3(GetBox(this.m_Scene, true));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
|
||||
ViewToTop()
|
||||
{
|
||||
this.m_Camera.LookAt(new THREE.Vector3(0, 0, -1));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ViewToFront()
|
||||
{
|
||||
this.m_Camera.LookAt(new THREE.Vector3(0, 1, 0));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ViewToSwiso()
|
||||
{
|
||||
this.m_Camera.LookAt(new THREE.Vector3(1, 1, -1));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ViewToTop()
|
||||
{
|
||||
this.m_Camera.LookAt(new Vector3(0, 0, -1));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ViewToFront()
|
||||
{
|
||||
this.m_Camera.LookAt(new Vector3(0, 1, 0));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
ViewToSwiso()
|
||||
{
|
||||
this.m_Camera.LookAt(new Vector3(1, 1, -1));
|
||||
this.m_bNeedUpdate = true;
|
||||
}
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user