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

dist/Viewer.d.ts

@@ -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;
+    ScreenToWorld(pt: Vector3, planVec?: Vector3): void;
-    WorldToScreen(pt: THREE.Vector3): void;
+    WorldToScreen(pt: Vector3): void;
     /**
      * 更新视角观测目标(物体中心)
      *
      * @memberof Viewer
      */
     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;
     ViewToTop(): void;
     ViewToFront(): void;

dist/Viewer.js

@@ -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,
+            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 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({
             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;

package.json

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

src/Viewer.ts

@@ -1,10 +1,9 @@
 
-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 { ColorMaterial } from "./ColorPalette";
-import { GetBox, GetBoxArr, cZeroVec } from "./GeUtils";
+import { cZeroVec, GetBox, GetBoxArr } from "./GeUtils";
 import { PlaneExt } from "./PlaneExt";
 
 export class Viewer
@@ -13,15 +12,19 @@ export class Viewer
   m_Camera: CameraUpdate = new CameraUpdate();
   m_CameraCtrl: CameraControls;
   m_bNeedUpdate: boolean = true;
-    m_Render: THREE.WebGLRenderer;//渲染器  //暂时只用这个类型
+  m_Render: WebGLRenderer;//渲染器  //暂时只用这个类型
   m_DomEl: HTMLElement;    //画布容器
 
   _Height: number;
   _Width: number;
 
-    m_Scene: THREE.Scene = new THREE.Scene();
+  m_Scene: Scene = new Scene();
 
-    //构造
+  /**
+   * 
+   * @param {HTMLElement} canvasContainer 可以传入一个div或者一个画布
+   * @memberof Viewer
+   */
   constructor(canvasContainer: HTMLElement)
   {
     this.m_DomEl = canvasContainer;
@@ -52,19 +55,22 @@ export class Viewer
   //初始化render
   initRender(canvasContainer: HTMLElement)
   {
-        this.m_Render = new THREE.WebGLRenderer(
+    let params: WebGLRendererParameters = {
-            {
       antialias: true,//antialias:true/false是否开启反锯齿
       precision: "highp",//precision:highp/mediump/lowp着色精度选择
-                alpha: true,//alpha:true/false是否可以设置背景色透明
+      alpha: true//alpha:true/false是否可以设置背景色透明
-                // premultipliedAlpha: false,//?
+    };
-                // stencil: false,//?
+    if (canvasContainer instanceof HTMLCanvasElement)
-                // preserveDrawingBuffer: true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
+    {
-                // maxLights: 1//maxLights:最大灯光数
+      params.canvas = canvasContainer;
+      this.m_Render = new WebGLRenderer(params);
     }
-        );
+    else
+    {
+      this.m_Render = new WebGLRenderer(params);
       //加到画布
       canvasContainer.appendChild(this.m_Render.domElement);
+    }
 
     this.m_Render.autoClear = true;
 
@@ -72,7 +78,7 @@ export class Viewer
     // 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;
@@ -114,11 +120,11 @@ export class Viewer
     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(
       {
@@ -129,7 +135,7 @@ export class Viewer
     )
     plan.intersectRay(raycaster.ray, pt, true);
   }
-    WorldToScreen(pt: THREE.Vector3)
+  WorldToScreen(pt: Vector3)
   {
     let widthHalf = this._Width * 0.5;
     let heightHalf = this._Height * 0.5;
@@ -150,21 +156,21 @@ export class Viewer
     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());
+      this.m_LookTarget = box.getCenter(new Vector3());
     else
       this.m_LookTarget = cZeroVec;
   }
-    Rotate(mouseMove: THREE.Vector3)
+  Rotate(mouseMove: Vector3)
   {
     this.m_Camera.Rotate(mouseMove, this.m_LookTarget);
     this.m_bNeedUpdate = true;
   }
-    Pan(mouseMove: THREE.Vector3)
+  Pan(mouseMove: Vector3)
   {
     this.m_Camera.Pan(mouseMove);
     this.m_bNeedUpdate = true;
   }
-    Zoom(scale: number, center?: THREE.Vector3)
+  Zoom(scale: number, center?: Vector3)
   {
     this.m_Camera.Zoom(scale, center);
     this.m_bNeedUpdate = true;
@@ -177,17 +183,17 @@ export class Viewer
 
   ViewToTop()
   {
-        this.m_Camera.LookAt(new THREE.Vector3(0, 0, -1));
+    this.m_Camera.LookAt(new Vector3(0, 0, -1));
     this.m_bNeedUpdate = true;
   }
   ViewToFront()
   {
-        this.m_Camera.LookAt(new THREE.Vector3(0, 1, 0));
+    this.m_Camera.LookAt(new Vector3(0, 1, 0));
     this.m_bNeedUpdate = true;
   }
   ViewToSwiso()
   {
-        this.m_Camera.LookAt(new THREE.Vector3(1, 1, -1));
+    this.m_Camera.LookAt(new Vector3(1, 1, -1));
     this.m_bNeedUpdate = true;
   }
 }