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

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,
-        });
-        //加到画布
-        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;