@anov/3d 0.0.1-alpha.9 → 0.0.2

package/dist/core/global/global.d.ts

@@ -2,6 +2,7 @@ import type { Scene } from 'three';
 import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import type { TransformControls } from '../control/transformControls';
 import type { PerspectiveCamera } from '../camera';
+import type Group from '../group';
 declare class GlobalObjectManage {
     scene: Scene | null;
     triggerClick: boolean;
@@ -10,6 +11,7 @@ declare class GlobalObjectManage {
     orbitControls: OrbitControls | null;
     transformControls: TransformControls[];
     frameCallbacks: Set<() => void>;
+    groupCatch: Group[];
     constructor();
     addScene(object3d: Scene): void;
     setCamera(camera: PerspectiveCamera): void;
@@ -19,6 +21,7 @@ declare class GlobalObjectManage {
     setTriggerClickState(state: boolean): void;
     addFrameCallback(cb: () => void): void;
     removeFrameCallback(cb: () => void): void;
+    addCatch(group: Group): void;
 }
 declare const _default: GlobalObjectManage;
 export default _default;

package/dist/core/global/global.js

@@ -8,6 +8,8 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var GlobalObjectManage = /*#__PURE__*/function () {
   // hooks callback
 
+  // instance
+
   function GlobalObjectManage() {
     _classCallCheck(this, GlobalObjectManage);
     _defineProperty(this, "scene", null);
@@ -17,6 +19,7 @@ var GlobalObjectManage = /*#__PURE__*/function () {
     _defineProperty(this, "orbitControls", null);
     _defineProperty(this, "transformControls", []);
     _defineProperty(this, "frameCallbacks", new Set());
+    _defineProperty(this, "groupCatch", []);
   }
   _createClass(GlobalObjectManage, [{
     key: "addScene",
@@ -58,6 +61,11 @@ var GlobalObjectManage = /*#__PURE__*/function () {
     value: function removeFrameCallback(cb) {
       this.frameCallbacks.delete(cb);
     }
+  }, {
+    key: "addCatch",
+    value: function addCatch(group) {
+      this.groupCatch.push(group);
+    }
   }]);
   return GlobalObjectManage;
 }();

package/dist/core/group.d.ts

@@ -1,8 +1,15 @@
+import type { Intersection, Object3D } from 'three';
 import { Group as TGroup } from 'three';
 import type { CubeEventType, EventHandleFn } from '../type';
 declare class Group extends TGroup {
     private natureEventMap;
+    private object3d;
     constructor();
+    /**
+     * add model
+     * @param object
+     */
+    addModel(object: Object3D): void;
     /**
      * addNatureEventListener
      * @param type
@@ -20,10 +27,10 @@ declare class Group extends TGroup {
      */
     removeAllNatureEventListener(): void;
     /**
-   * handle intersect event
-   * @param intersects
-   * @param eventType
-   */
+     * handle intersect event
+     * @param intersects
+     * @param eventType
+    */
     private handleClick;
     /**
      * handle pointermove event
@@ -41,6 +48,6 @@ declare class Group extends TGroup {
      * raycastGroup
      * handle intersect event
      */
-    raycastGroup(): void;
+    raycastGroup(intersets: Intersection<Object3D<Event>>[]): void;
 }
 export default Group;

package/dist/core/group.js

@@ -2,6 +2,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -22,15 +24,28 @@ var Group = /*#__PURE__*/function (_TGroup) {
     _classCallCheck(this, Group);
     _this = _super.call(this);
     _defineProperty(_assertThisInitialized(_this), "natureEventMap", new Map());
+    _defineProperty(_assertThisInitialized(_this), "object3d", []);
+    globalObjectManage.addCatch(_assertThisInitialized(_this));
     return _this;
   }
 
   /**
-   * addNatureEventListener
-   * @param type
-   * @param handlefn
+   * add model
+   * @param object
    */
   _createClass(Group, [{
+    key: "addModel",
+    value: function addModel(object) {
+      _get(_getPrototypeOf(Group.prototype), "add", this).call(this, object);
+      this.object3d.push(object);
+    }
+
+    /**
+     * addNatureEventListener
+     * @param type
+     * @param handlefn
+     */
+  }, {
     key: "addNatureEventListener",
     value: function addNatureEventListener(type, handlefn) {
       if (!this.natureEventMap.has(type)) this.natureEventMap.set(type, []);
@@ -63,9 +78,9 @@ var Group = /*#__PURE__*/function (_TGroup) {
     }
 
     /**
-    * handle intersect event
-    * @param intersects
-    * @param eventType
+     * handle intersect event
+     * @param intersects
+     * @param eventType
     */
   }, {
     key: "handleClick",
@@ -111,16 +126,8 @@ var Group = /*#__PURE__*/function (_TGroup) {
      */
   }, {
     key: "raycastGroup",
-    value: function raycastGroup() {
-      // const clickCallback = this.natureEventMap.get('click')
-      // const pointerupCallback = this.natureEventMap.get('pointerup')
-      // const pointerdownCallback = this.natureEventMap.get('pointerdown')
-      // const pointermoveCallback = this.natureEventMap.get('pointermove')
-
-      // clickCallback && clickCallback.length > 0 && this.handleClick(clickCallback)
-      // pointerupCallback && pointerupCallback.length > 0 && this.handleClick(pointerupCallback)
-      // pointerdownCallback && pointerdownCallback.length > 0 && this.handleClick(pointerdownCallback)
-      // pointermoveCallback && pointermoveCallback.length > 0 && this.handlePointerMove(pointermoveCallback)
+    value: function raycastGroup(intersets) {
+      console.log('raycastGroup', intersets);
     }
   }]);
   return Group;

package/dist/core/line.js

@@ -2,6 +2,16 @@ import { BoxGeometry, BufferAttribute, BufferGeometry, CatmullRomCurve3, Line, L
 import Mesh from "./mesh";
 import globalObjectManage from "./global/global";
 var point = new Vector3(0, 0, 0);
+
+/**
+ * create control mesh
+ * @param position
+ * @param transformControl
+ * @param width
+ * @param height
+ * @param depth
+ * @returns
+ */
 var createSplineControlObject3d = function createSplineControlObject3d(position, transformControl) {
   var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var height = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
@@ -18,9 +28,16 @@ var createSplineControlObject3d = function createSplineControlObject3d(position,
   globalObjectManage.scene.add(object);
   return object;
 };
+
+/**
+ * create line
+ * @param positions
+ * @returns
+ */
 var createCatmullRomCurve3 = function createCatmullRomCurve3(positions) {
   var geometry = new BufferGeometry();
-  geometry.setAttribute('position', new BufferAttribute(new Float32Array(200 * 3), 3));
+  var attr = new BufferAttribute(new Float32Array(200 * 3), 3);
+  geometry.setAttribute('position', attr);
   var curve = new CatmullRomCurve3(positions);
   curve.mesh = new Line(geometry.clone(), new LineBasicMaterial({
     color: 'red',
@@ -28,6 +45,11 @@ var createCatmullRomCurve3 = function createCatmullRomCurve3(positions) {
   }));
   return curve;
 };
+
+/**
+ * uodate line
+ * @param curve
+ */
 var updateCatmullRomCurve3 = function updateCatmullRomCurve3(curve) {
   var splineMesh = curve.mesh;
   var position = splineMesh.geometry.attributes.position;

package/dist/core/mesh.d.ts

@@ -39,10 +39,6 @@ declare class Mesh extends TMesh {
      * @param natureEvent
      */
     private handlePointerleave;
-    /**
-     * bubbling
-     */
-    private bubbling;
     /**
      * handle mesh raycaster
      * @param raycaster

package/dist/core/mesh.js

@@ -15,8 +15,6 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { Mesh as TMesh } from 'three';
-import { getObject3dAncestorsNodes } from "../utils";
-import Group from "./group";
 import globalObjectManage from "./global/global";
 var Mesh = /*#__PURE__*/function (_TMesh) {
   _inherits(Mesh, _TMesh);
@@ -113,18 +111,6 @@ var Mesh = /*#__PURE__*/function (_TMesh) {
       });
     }
 
-    /**
-     * bubbling
-     */
-  }, {
-    key: "bubbling",
-    value: function bubbling() {
-      var ancestorsNodes = getObject3dAncestorsNodes(this);
-      ancestorsNodes.forEach(function (node) {
-        if (node instanceof Group) node.raycastGroup();
-      });
-    }
-
     /**
      * handle mesh raycaster
      * @param raycaster
@@ -143,10 +129,6 @@ var Mesh = /*#__PURE__*/function (_TMesh) {
       var object = intersect && intersect.object;
       if (object === this) {
         this.entered = true;
-
-        // bubbling
-        // this.bubbling()
-
         clickCallback && clickCallback.length > 0 && this.handleClick(clickCallback, intersect);
         pointerupCallback && pointerupCallback.length > 0 && this.handleClick(pointerupCallback, intersect);
         pointerdownCallback && pointerdownCallback.length > 0 && this.handleClick(pointerdownCallback, intersect);

package/dist/core/model.d.ts

@@ -1,3 +1,4 @@
+import type { Group } from 'three';
 import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 declare class ModelLoader {
     /**
@@ -16,6 +17,13 @@ declare class ModelLoader {
      * @param onProgress
      * @param onError
      */
-    loadFbx(url: string, onLoad?: (result: GLTF) => GLTF, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): void;
+    loadFbx(url: string, onLoad?: (result: Group) => Group, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Promise<unknown>;
+    /**
+     * parse fbx buffer
+     * @param buffer
+     * @param path
+     * @returns
+     */
+    parseFbxBuffer(buffer: ArrayBuffer | string, path: string): Group;
 }
 export default ModelLoader;

package/dist/core/model.js

@@ -6,6 +6,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 var ModelLoader = /*#__PURE__*/function () {
   function ModelLoader() {
     _classCallCheck(this, ModelLoader);
@@ -53,7 +54,31 @@ var ModelLoader = /*#__PURE__*/function () {
      */
   }, {
     key: "loadFbx",
-    value: function loadFbx(url, onLoad, onProgress, onError) {}
+    value: function loadFbx(url, onLoad, onProgress, onError) {
+      var fbxLoader = new FBXLoader();
+      return new Promise(function (resolve, reject) {
+        fbxLoader.load(url, function (fbx) {
+          onLoad ? resolve(onLoad(fbx)) : resolve(fbx);
+        }, function (xhr) {
+          onProgress && onProgress(xhr);
+        }, function (err) {
+          onError && onError(err);
+          reject(err);
+        });
+      });
+    }
+
+    /**
+     * parse fbx buffer
+     * @param buffer
+     * @param path
+     * @returns
+     */
+  }, {
+    key: "parseFbxBuffer",
+    value: function parseFbxBuffer(buffer, path) {
+      return new FBXLoader().parse(buffer, path);
+    }
   }]);
   return ModelLoader;
 }();

package/dist/core/scene.d.ts

@@ -1,20 +1,24 @@
-import type { Color, Object3D } from 'three';
+import type { Color, ColorRepresentation, Object3D, ToneMapping } from 'three';
 import { AmbientLight, Raycaster, Scene as TScene, Vector3, WebGLRenderer } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import Cssrenderer from './cssRenderer';
 import { PerspectiveCamera } from './camera';
-interface Anov3DSceneOptions {
-    /**
-     * renderer options
-     */
+interface SceneOptions {
+    /** renderer options */
     rendererOps?: {
         antialias?: boolean;
         logarithmicDepthBuffer?: boolean;
         alpha?: boolean;
+        shadowMap?: boolean;
+        toneMapping?: ToneMapping;
+        toneMappingExposure?: number;
+        size?: {
+            width: number;
+            height: number;
+            updateStyle?: boolean;
+        };
     };
-    /**
-     * default camera options
-     */
+    /** default camera options */
     defCameraOps?: {
         position?: Vector3;
         fov?: number;
@@ -22,43 +26,45 @@ interface Anov3DSceneOptions {
         near?: number;
         far?: number;
     };
-    /**
-     * default ambient light options
-     */
+    /** default ambient light options */
     defAmbientLightOps?: {
         position?: Vector3;
         color?: Color;
         intensity?: number;
     };
-    /**
-     * controls
-     */
+    /** 默认射线检测配置 */
+    defRaycasterOps?: {
+        recursive?: boolean;
+    };
+    /** controls */
     orbitControls?: boolean;
-    /**
-     * 是否需要默认环境光
-     */
+    /** 是否需要默认环境光 */
     ambientLight?: boolean;
-    /**
-     * on demand render scene, 按需渲染
-     */
+    /** on demand render scene, 按需渲染 */
     onDemand?: boolean;
-    /**
-     * 是否开启css2d渲染
-     */
+    /** 是否开启css2d渲染 */
     css2DRenderer?: boolean;
-    /**
-     * 是否开启css3d渲染
-     */
+    /** 是否开启css3d渲染 */
     css3DRenderer?: boolean;
+    /** 是否开启裁剪 */
+    cutout?: boolean;
+    /** 场景背景相关 */
     background?: {
         imgs?: Tuple<string>;
         color?: Color;
         panorama?: string;
+        alpha?: number;
     };
 }
 declare type Tuple<TItem> = [TItem, ...TItem[]] & {
     length: 6;
 };
+interface CutoutAreaType {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
 declare class Scene {
     private opts;
     private pointer;
@@ -69,7 +75,13 @@ declare class Scene {
     renderer: WebGLRenderer | null;
     cssRenderer: Cssrenderer | null;
     controls: OrbitControls | null;
-    constructor(opts?: Anov3DSceneOptions);
+    domElement: HTMLElement | null;
+    /** 裁剪相关 */
+    cutoutCamera: PerspectiveCamera | null;
+    cutoutBackground: ColorRepresentation | null;
+    cutoutBackgroundAlpha: number;
+    cutoutArea: CutoutAreaType;
+    constructor(opts?: SceneOptions);
     /**
      * init default scene components
      */
@@ -84,7 +96,21 @@ declare class Scene {
      * init renderer
      */
     private initRenderer;
+    /**
+     * main view cut
+     * @param renderer
+     */
+    private cutMain;
+    /**
+     * mini view cut
+     * @param renderer
+     */
+    private cutSub;
     private initCssRenderer;
+    /**
+     * init skybox
+     * @param imgs
+     */
     private initSkyBox;
     /**
      * init default camera
@@ -138,7 +164,12 @@ declare class Scene {
      * @param target
      */
     private registerEvent;
+    /**
+     * render scene
+     * @param target
+     */
     render(target: HTMLElement): void;
+    private updateRenderForCut;
     destroy(): void;
 }
 export default Scene;

package/dist/core/scene.js

@@ -15,6 +15,8 @@ import globalControl from "./global/globalControl";
 import globalObjectManage from "./global/global";
 import { PerspectiveCamera } from "./camera";
 var Scene = /*#__PURE__*/function () {
+  /** 裁剪相关 */
+
   function Scene(opts) {
     _classCallCheck(this, Scene);
     _defineProperty(this, "opts", {});
@@ -26,6 +28,16 @@ var Scene = /*#__PURE__*/function () {
     _defineProperty(this, "renderer", null);
     _defineProperty(this, "cssRenderer", null);
     _defineProperty(this, "controls", null);
+    _defineProperty(this, "domElement", null);
+    _defineProperty(this, "cutoutCamera", null);
+    _defineProperty(this, "cutoutBackground", null);
+    _defineProperty(this, "cutoutBackgroundAlpha", 1);
+    _defineProperty(this, "cutoutArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
     this.opts = opts !== null && opts !== void 0 ? opts : {};
     this.scene = new TScene();
     this.raycaster = new Raycaster();
@@ -44,8 +56,6 @@ var Scene = /*#__PURE__*/function () {
       this.camera = camera;
       globalObjectManage.setCamera(camera);
       this.scene.add(camera);
-      var renderer = this.initRenderer();
-      this.renderer = renderer;
       if (this.opts.css2DRenderer) {
         var cssRenderer = this.initCssRenderer();
         this.cssRenderer = cssRenderer;
@@ -78,27 +88,72 @@ var Scene = /*#__PURE__*/function () {
   }, {
     key: "initRenderer",
     value: function initRenderer() {
-      var _rendererOps$antialia, _rendererOps$logarith, _rendererOps$alpha;
+      var _rendererOps$antialia, _rendererOps$logarith, _rendererOps$alpha, _rendererOps$shadowMa, _rendererOps$toneMapp, _rendererOps$toneMapp2;
       var rendererOps = this.opts.rendererOps || {};
       var renderer = new WebGLRenderer({
         antialias: (_rendererOps$antialia = rendererOps.antialias) !== null && _rendererOps$antialia !== void 0 ? _rendererOps$antialia : true,
         logarithmicDepthBuffer: (_rendererOps$logarith = rendererOps.logarithmicDepthBuffer) !== null && _rendererOps$logarith !== void 0 ? _rendererOps$logarith : true,
         alpha: (_rendererOps$alpha = rendererOps.alpha) !== null && _rendererOps$alpha !== void 0 ? _rendererOps$alpha : false
       });
-      renderer.setSize(window.innerWidth, window.innerHeight);
-      renderer.shadowMap.enabled = true;
-      renderer.toneMapping = ACESFilmicToneMapping;
-      renderer.toneMappingExposure = 0.3;
+      this.cutMain(renderer);
+      renderer.shadowMap.enabled = (_rendererOps$shadowMa = rendererOps.shadowMap) !== null && _rendererOps$shadowMa !== void 0 ? _rendererOps$shadowMa : true;
+      renderer.toneMapping = (_rendererOps$toneMapp = rendererOps.toneMapping) !== null && _rendererOps$toneMapp !== void 0 ? _rendererOps$toneMapp : ACESFilmicToneMapping;
+      renderer.toneMappingExposure = (_rendererOps$toneMapp2 = rendererOps.toneMappingExposure) !== null && _rendererOps$toneMapp2 !== void 0 ? _rendererOps$toneMapp2 : 0.3;
       renderer.setPixelRatio(window.devicePixelRatio);
       return renderer;
     }
+
+    /**
+     * main view cut
+     * @param renderer
+     */
+  }, {
+    key: "cutMain",
+    value: function cutMain(renderer) {
+      var _rendererOps$size$wid, _rendererOps$size, _rendererOps$size$hei, _rendererOps$size2, _this$opts$background3, _this$opts$background4;
+      var rendererOps = this.opts.rendererOps || {};
+      var w = (_rendererOps$size$wid = (_rendererOps$size = rendererOps.size) === null || _rendererOps$size === void 0 ? void 0 : _rendererOps$size.width) !== null && _rendererOps$size$wid !== void 0 ? _rendererOps$size$wid : window.innerWidth;
+      var h = (_rendererOps$size$hei = (_rendererOps$size2 = rendererOps.size) === null || _rendererOps$size2 === void 0 ? void 0 : _rendererOps$size2.height) !== null && _rendererOps$size$hei !== void 0 ? _rendererOps$size$hei : window.innerHeight;
+      renderer.setClearColor(((_this$opts$background3 = this.opts.background) === null || _this$opts$background3 === void 0 ? void 0 : _this$opts$background3.color) || 0x000000, ((_this$opts$background4 = this.opts.background) === null || _this$opts$background4 === void 0 ? void 0 : _this$opts$background4.alpha) || 1);
+      renderer.setSize(w, h);
+      renderer.setScissor(0, 0, w, h);
+      renderer.render(this.scene, this.camera);
+    }
+
+    /**
+     * mini view cut
+     * @param renderer
+     */
+  }, {
+    key: "cutSub",
+    value: function cutSub(renderer) {
+      var _rendererOps$size$wid2, _rendererOps$size3, _this$cutoutBackgroun;
+      var rendererOps = this.opts.rendererOps || {};
+      var w = (_rendererOps$size$wid2 = (_rendererOps$size3 = rendererOps.size) === null || _rendererOps$size3 === void 0 ? void 0 : _rendererOps$size3.width) !== null && _rendererOps$size$wid2 !== void 0 ? _rendererOps$size$wid2 : window.innerWidth;
+      // const h = rendererOps.size?.height ?? window.innerHeight
+
+      // 位置 目前默认右上角
+      renderer.setClearColor((_this$cutoutBackgroun = this.cutoutBackground) !== null && _this$cutoutBackgroun !== void 0 ? _this$cutoutBackgroun : 0x000000, this.cutoutBackgroundAlpha);
+      renderer.setScissor(w - this.cutoutArea.width, 0, this.cutoutArea.width, this.cutoutArea.height);
+      renderer.setViewport(w - this.cutoutArea.width, 0, this.cutoutArea.width, this.cutoutArea.height);
+      renderer.render(this.scene, this.cutoutCamera);
+    }
   }, {
     key: "initCssRenderer",
     value: function initCssRenderer() {
+      var _rendererOps$size$wid3, _rendererOps$size4, _rendererOps$size$hei2, _rendererOps$size5;
+      var rendererOps = this.opts.rendererOps || {};
+      var w = (_rendererOps$size$wid3 = (_rendererOps$size4 = rendererOps.size) === null || _rendererOps$size4 === void 0 ? void 0 : _rendererOps$size4.width) !== null && _rendererOps$size$wid3 !== void 0 ? _rendererOps$size$wid3 : window.innerWidth;
+      var h = (_rendererOps$size$hei2 = (_rendererOps$size5 = rendererOps.size) === null || _rendererOps$size5 === void 0 ? void 0 : _rendererOps$size5.height) !== null && _rendererOps$size$hei2 !== void 0 ? _rendererOps$size$hei2 : window.innerHeight;
       var cssRenderer = new Cssrenderer('base');
-      cssRenderer.setSize(window.innerWidth, window.innerHeight);
+      cssRenderer.setSize(w, h);
       return cssRenderer;
     }
+
+    /**
+     * init skybox
+     * @param imgs
+     */
   }, {
     key: "initSkyBox",
     value: function initSkyBox(imgs) {
@@ -116,7 +171,8 @@ var Scene = /*#__PURE__*/function () {
     key: "initDefaultPerspectiveCamera",
     value: function initDefaultPerspectiveCamera() {
       var rendererOps = this.opts.defCameraOps || {};
-      var camera = new PerspectiveCamera(rendererOps.fov || 90, window.innerWidth / window.innerHeight, rendererOps.near || 0.1, rendererOps.far || 5000);
+      var aspect = rendererOps.aspect || window.innerWidth / window.innerHeight;
+      var camera = new PerspectiveCamera(rendererOps.fov || 90, aspect, rendererOps.near || 0.1, rendererOps.far || 5000);
       var position = rendererOps.position || new Vector3(0, 10, 10);
       camera.position.set(position.x, position.y, position.z);
       return camera;
@@ -154,7 +210,9 @@ var Scene = /*#__PURE__*/function () {
       });
       globalControl.update();
       TWEEN.update();
-      this.renderer.render(this.scene, this.camera);
+
+      // if need cutout
+      if (this.opts.cutout) this.updateRenderForCut();else this.renderer.render(this.scene, this.camera);
       this.cssRenderer && this.cssRenderer.render(this.scene, this.camera);
       this.controls && this.controls.update();
       requestAnimationFrame(function () {
@@ -178,19 +236,30 @@ var Scene = /*#__PURE__*/function () {
   }, {
     key: "updateRaycaster",
     value: function updateRaycaster() {
+      var _raycasterOps$recursi;
+      var raycasterOps = this.opts.defRaycasterOps || {};
       this.raycaster.setFromCamera(this.pointer, this.camera);
 
       // need expand
       var object3ds = this.scene.children.filter(function (item) {
         return item instanceof Mesh;
       });
-      this.raycaster.intersectObjects(object3ds);
+      this.raycaster.intersectObjects(object3ds, (_raycasterOps$recursi = raycasterOps.recursive) !== null && _raycasterOps$recursi !== void 0 ? _raycasterOps$recursi : false);
+
+      // group的拾取，构建一个mesh？
+
+      // const intersects = this.raycaster!.intersectObjects(this.scene!.children, false)
+      // globalObjectManage.groupCatch.forEach((group) => {
+      //   if (intersects.length > 0)
+      //     group.raycastGroup(intersects as Intersection<Object3D<Event>>[])
+      // })
     }
   }, {
     key: "getPointerPosition",
     value: function getPointerPosition(event) {
-      this.pointer.setX(event.clientX / window.innerWidth * 2 - 1);
-      this.pointer.setY(-(event.clientY / window.innerHeight) * 2 + 1);
+      var container = this.domElement;
+      this.pointer.setX((event.clientX - container.getBoundingClientRect().left) / container.getBoundingClientRect().width * 2 - 1);
+      this.pointer.setY(-((event.clientY - container.getBoundingClientRect().top) / container.getBoundingClientRect().height) * 2 + 1);
     }
 
     /**
@@ -266,13 +335,21 @@ var Scene = /*#__PURE__*/function () {
         return _this3.onPointerLeave(e);
       });
     }
+
+    /**
+     * render scene
+     * @param target
+     */
   }, {
     key: "render",
     value: function render(target) {
       var _this4 = this;
       emitter.emit('before-render');
+      var renderer = this.initRenderer();
+      this.renderer = renderer;
       var currentControlDom = null;
       var domElement = this.renderer.domElement;
+      this.domElement = domElement;
       if (this.cssRenderer) {
         currentControlDom = this.cssRenderer.cssRenderer.domElement;
         target.appendChild(currentControlDom);
@@ -291,6 +368,13 @@ var Scene = /*#__PURE__*/function () {
       });
       emitter.emit('after-render');
     }
+  }, {
+    key: "updateRenderForCut",
+    value: function updateRenderForCut() {
+      this.renderer.setScissorTest(true);
+      this.cutMain(this.renderer);
+      this.cutSub(this.renderer);
+    }
   }, {
     key: "destroy",
     value: function destroy() {