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

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

41
dist/Viewer.js vendored
View File

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