2018-05-28 09:49:45 +08:00
|
|
|
|
"use strict";
|
|
|
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
2018-07-02 15:19:22 +08:00
|
|
|
|
var three_1 = require("three");
|
2018-06-06 17:23:22 +08:00
|
|
|
|
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 () {
|
2018-07-02 15:19:22 +08:00
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
|
|
|
|
|
* @memberof Viewer
|
|
|
|
|
*/
|
2018-06-06 17:23:22 +08:00
|
|
|
|
function Viewer(canvasContainer) {
|
|
|
|
|
var _this = this;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Camera = new CameraUpdate_1.CameraUpdate();
|
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-07-02 15:19:22 +08:00
|
|
|
|
this.m_Scene = new three_1.Scene();
|
2018-06-06 17:23:22 +08:00
|
|
|
|
this.OnSize = function (width, height) {
|
|
|
|
|
_this._Width = width ? width : _this.m_DomEl.clientWidth;
|
|
|
|
|
_this._Height = height ? height : _this.m_DomEl.clientHeight;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
//校验.成为2的倍数 避免外轮廓错误.
|
2018-06-06 17:23:22 +08:00
|
|
|
|
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);
|
2018-05-28 09:49:45 +08:00
|
|
|
|
};
|
2018-06-06 17:23:22 +08:00
|
|
|
|
this.StartRender = function () {
|
|
|
|
|
requestAnimationFrame(_this.StartRender);
|
|
|
|
|
if (_this.m_Scene != null && _this.m_bNeedUpdate) {
|
|
|
|
|
_this.Render();
|
|
|
|
|
_this.m_bNeedUpdate = false;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
this.m_DomEl = canvasContainer;
|
|
|
|
|
this.initRender(canvasContainer);
|
|
|
|
|
this.OnSize();
|
|
|
|
|
this.StartRender();
|
2018-06-06 17:44:54 +08:00
|
|
|
|
this.m_CameraCtrl = new _1.CameraControls(this);
|
2018-06-06 17:23:22 +08:00
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
_this.OnSize();
|
2018-05-28 09:49:45 +08:00
|
|
|
|
});
|
2018-06-06 17:23:22 +08:00
|
|
|
|
var oldMesh;
|
|
|
|
|
this.m_Render.domElement.addEventListener("mousemove", function (e) {
|
|
|
|
|
var mesh = _1.PointPick(_this, e.offsetX, e.offsetY);
|
2018-05-28 09:49:45 +08:00
|
|
|
|
if (oldMesh)
|
|
|
|
|
oldMesh.material = _1.boardMaterial;
|
2018-05-31 21:01:30 +08:00
|
|
|
|
if (mesh && mesh.material !== ColorPalette_1.ColorMaterial.GetLineMaterial(1)) {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
oldMesh = mesh;
|
2018-05-31 11:12:29 +08:00
|
|
|
|
mesh.material = _1.selectMaterial;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
}
|
2018-06-06 17:23:22 +08:00
|
|
|
|
_this.m_bNeedUpdate = true;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//初始化render
|
2018-06-06 17:23:22 +08:00
|
|
|
|
Viewer.prototype.initRender = function (canvasContainer) {
|
2018-07-02 15:19:22 +08:00
|
|
|
|
var params = {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
antialias: true,
|
|
|
|
|
precision: "highp",
|
2018-07-02 15:19:22 +08:00
|
|
|
|
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);
|
|
|
|
|
}
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Render.autoClear = true;
|
|
|
|
|
//如果设置,那么它希望所有的纹理和颜色都是预乘的伽玛。默认值为false。
|
|
|
|
|
// this.m_Render.gammaInput = true;
|
|
|
|
|
// this.m_Render.gammaOutput = true;
|
|
|
|
|
// this.m_Render.shadowMap.enabled = true;
|
2018-07-02 15:19:22 +08:00
|
|
|
|
// this.m_Render.toneMapping = ReinhardToneMapping;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
//设置设备像素比。 这通常用于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();
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.Render = function () {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Render.render(this.m_Scene, this.m_Camera.Camera);
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.ScreenToWorld = function (pt, planVec) {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
//变换和求交点
|
2018-07-02 15:19:22 +08:00
|
|
|
|
var plan = new PlaneExt_1.PlaneExt(planVec || new three_1.Vector3(0, 0, 1));
|
|
|
|
|
var raycaster = new three_1.Raycaster();
|
2018-05-28 09:49:45 +08:00
|
|
|
|
// 射线从相机射线向屏幕点位置
|
|
|
|
|
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);
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.WorldToScreen = function (pt) {
|
|
|
|
|
var widthHalf = this._Width * 0.5;
|
|
|
|
|
var heightHalf = this._Height * 0.5;
|
2018-05-28 09:49:45 +08:00
|
|
|
|
pt.project(this.m_Camera.Camera);
|
|
|
|
|
pt.x = (pt.x * widthHalf) + widthHalf;
|
|
|
|
|
pt.y = -(pt.y * heightHalf) + heightHalf;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
2018-05-28 09:49:45 +08:00
|
|
|
|
/**
|
|
|
|
|
* 更新视角观测目标(物体中心)
|
|
|
|
|
*
|
|
|
|
|
* @memberof Viewer
|
|
|
|
|
*/
|
2018-06-06 17:23:22 +08:00
|
|
|
|
Viewer.prototype.UpdateLockTarget = 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; }));
|
2018-05-28 09:49:45 +08:00
|
|
|
|
if (box)
|
2018-07-02 15:19:22 +08:00
|
|
|
|
this.m_LookTarget = box.getCenter(new three_1.Vector3());
|
2018-05-28 09:49:45 +08:00
|
|
|
|
else
|
|
|
|
|
this.m_LookTarget = GeUtils_1.cZeroVec;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.Rotate = function (mouseMove) {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Camera.Rotate(mouseMove, this.m_LookTarget);
|
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.Pan = function (mouseMove) {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Camera.Pan(mouseMove);
|
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.Zoom = function (scale, center) {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Camera.Zoom(scale, center);
|
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.ZoomAll = function () {
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_Camera.ZoomExtensBox3(GeUtils_1.GetBox(this.m_Scene, true));
|
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.ViewToTop = function () {
|
2018-07-02 15:19:22 +08:00
|
|
|
|
this.m_Camera.LookAt(new three_1.Vector3(0, 0, -1));
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.ViewToFront = function () {
|
2018-07-02 15:19:22 +08:00
|
|
|
|
this.m_Camera.LookAt(new three_1.Vector3(0, 1, 0));
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
Viewer.prototype.ViewToSwiso = function () {
|
2018-07-02 15:19:22 +08:00
|
|
|
|
this.m_Camera.LookAt(new three_1.Vector3(1, 1, -1));
|
2018-05-28 09:49:45 +08:00
|
|
|
|
this.m_bNeedUpdate = true;
|
2018-06-06 17:23:22 +08:00
|
|
|
|
};
|
|
|
|
|
return Viewer;
|
|
|
|
|
}());
|
2018-05-28 09:49:45 +08:00
|
|
|
|
exports.Viewer = Viewer;
|
|
|
|
|
//# sourceMappingURL=Viewer.js.map
|