@anov/3d 0.0.2 → 0.0.4-alpha.1

package/dist/core/events.d.ts

@@ -0,0 +1,16 @@
+import type { Intersection, Mesh, Object3D, Raycaster } from 'three';
+import type { CubeEventType, EventHandleFn } from '../type';
+declare type RaycastFnType = (raycaster: Raycaster, intersects: Intersection[]) => void;
+interface EventPrototype {
+    natureEventMap: Map<CubeEventType, EventHandleFn[]>;
+    entered: boolean;
+    handleBubble: (object3d: Object3D | undefined) => void;
+    cancelAncestorsBubble: (object3d: Object3D | undefined) => void;
+    raycast: RaycastFnType;
+}
+/**
+ * process mesh created by the loader, eg: gltf, fbx ...
+ * this mesh not support raycaster, so we need to process it
+ */
+declare const provideEventPrototype: (raycast: RaycastFnType, mesh: Mesh) => EventPrototype;
+export default provideEventPrototype;

package/dist/core/events.js

@@ -0,0 +1,38 @@
+import { getObject3dAncestorsNodes } from "../utils";
+import Group from "./group";
+/**
+ * process mesh created by the loader, eg: gltf, fbx ...
+ * this mesh not support raycaster, so we need to process it
+ */
+var provideEventPrototype = function provideEventPrototype(raycast, mesh) {
+  var oldRaycast = raycast;
+  var ctx = mesh;
+  var eventPrototype = {
+    natureEventMap: new Map(),
+    entered: false,
+    handleBubble: function handleBubble(object3d) {
+      if (object3d) {
+        var ancestorObject3d = getObject3dAncestorsNodes(object3d, function (object3d) {
+          return object3d instanceof Group;
+        });
+        for (var i = 0; i < ancestorObject3d.length; i++) ancestorObject3d[i].raycastGroup();
+      }
+    },
+    cancelAncestorsBubble: function cancelAncestorsBubble(object3d) {
+      if (object3d) {
+        var ancestorObject3d = getObject3dAncestorsNodes(object3d, function (object3d) {
+          return object3d instanceof Group;
+        });
+        for (var i = 0; i < ancestorObject3d.length; i++) ancestorObject3d[i].cancel();
+      }
+    },
+    raycast: function raycast(raycaster, intersects) {
+      oldRaycast(raycaster, intersects);
+      var intersect = intersects[0];
+      var object = intersect && intersect.object;
+      if (object && object.id === ctx.id) ctx.handleBubble(ctx);else ctx.cancelAncestorsBubble(ctx);
+    }
+  };
+  return eventPrototype;
+};
+export default provideEventPrototype;

package/dist/core/group.d.ts

@@ -1,9 +1,9 @@
-import type { Intersection, Object3D } from 'three';
+import type { Object3D } from 'three';
 import { Group as TGroup } from 'three';
 import type { CubeEventType, EventHandleFn } from '../type';
 declare class Group extends TGroup {
     private natureEventMap;
-    private object3d;
+    private entered;
     constructor();
     /**
      * add model
@@ -15,13 +15,13 @@ declare class Group extends TGroup {
      * @param type
      * @param handlefn
      */
-    addNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn<T>): void;
+    addNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn): void;
     /**
      * removeNatureEventListener
      * @param type
      * @param handlefn
      */
-    removeNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn<T>): void;
+    removeNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn): void;
     /**
      * removeAllNatureEventListener
      */
@@ -45,9 +45,13 @@ declare class Group extends TGroup {
      */
     private handlePointerleave;
     /**
-     * raycastGroup
+     * raycast group
      * handle intersect event
      */
-    raycastGroup(intersets: Intersection<Object3D<Event>>[]): void;
+    raycastGroup(): void;
+    /**
+     * cancel bubbling
+     */
+    cancel(): void;
 }
 export default Group;

package/dist/core/group.js

@@ -24,7 +24,7 @@ var Group = /*#__PURE__*/function (_TGroup) {
     _classCallCheck(this, Group);
     _this = _super.call(this);
     _defineProperty(_assertThisInitialized(_this), "natureEventMap", new Map());
-    _defineProperty(_assertThisInitialized(_this), "object3d", []);
+    _defineProperty(_assertThisInitialized(_this), "entered", false);
     globalObjectManage.addCatch(_assertThisInitialized(_this));
     return _this;
   }
@@ -37,7 +37,6 @@ var Group = /*#__PURE__*/function (_TGroup) {
     key: "addModel",
     value: function addModel(object) {
       _get(_getPrototypeOf(Group.prototype), "add", this).call(this, object);
-      this.object3d.push(object);
     }
 
     /**
@@ -85,11 +84,12 @@ var Group = /*#__PURE__*/function (_TGroup) {
   }, {
     key: "handleClick",
     value: function handleClick(natureEvent) {
+      var _this2 = this;
       if (!globalObjectManage.triggerClick) return;
 
       // get nature event
       natureEvent.forEach(function (handlefn) {
-        // handlefn(this)
+        handlefn(_this2);
       });
     }
 
@@ -101,8 +101,9 @@ var Group = /*#__PURE__*/function (_TGroup) {
   }, {
     key: "handlePointerMove",
     value: function handlePointerMove(natureEvent) {
+      var _this3 = this;
       natureEvent.forEach(function (handlefn) {
-        // handlefn(this)
+        handlefn(_this3);
       });
     }
 
@@ -114,20 +115,41 @@ var Group = /*#__PURE__*/function (_TGroup) {
   }, {
     key: "handlePointerleave",
     value: function handlePointerleave() {
+      var _this4 = this;
       var pointerleaveCallback = this.natureEventMap.get('pointerleave');
       pointerleaveCallback && pointerleaveCallback.length > 0 && pointerleaveCallback.forEach(function (handlefn) {
-        // handlefn(this)
+        handlefn(_this4);
       });
     }
 
     /**
-     * raycastGroup
+     * raycast group
      * handle intersect event
      */
   }, {
     key: "raycastGroup",
-    value: function raycastGroup(intersets) {
-      console.log('raycastGroup', intersets);
+    value: function raycastGroup() {
+      var clickCallback = this.natureEventMap.get('click');
+      var pointerupCallback = this.natureEventMap.get('pointerup');
+      var pointerdownCallback = this.natureEventMap.get('pointerdown');
+      var pointermoveCallback = this.natureEventMap.get('pointermove');
+      this.entered = true;
+      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);
+    }
+
+    /**
+     * cancel bubbling
+     */
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      if (this.entered) {
+        this.handlePointerleave();
+        this.entered = false;
+      }
     }
   }]);
   return Group;

package/dist/core/mesh.d.ts

@@ -10,13 +10,13 @@ declare class Mesh extends TMesh {
      * @param type
      * @param handlefn
      */
-    addNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn<T>): void;
+    addNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn): void;
     /**
      * removeNatureEventListener
      * @param type
      * @param handlefn
      */
-    removeNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn<T>): void;
+    removeNatureEventListener<T extends CubeEventType>(type: T, handlefn: EventHandleFn): void;
     /**
      * removeAllNatureEventListener
      */
@@ -39,6 +39,16 @@ declare class Mesh extends TMesh {
      * @param natureEvent
      */
     private handlePointerleave;
+    /**
+     * handle bubbling 伪冒泡，仅触发上层group事件
+     * @param object3d
+     */
+    private handleBubble;
+    /**
+     * emit parent group mouseleave event
+     * @param object3d
+     */
+    private cancelAncestorsBubble;
     /**
      * handle mesh raycaster
      * @param raycaster

package/dist/core/mesh.js

@@ -15,6 +15,8 @@ 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);
@@ -111,6 +113,36 @@ var Mesh = /*#__PURE__*/function (_TMesh) {
       });
     }
 
+    /**
+     * handle bubbling 伪冒泡，仅触发上层group事件
+     * @param object3d
+     */
+  }, {
+    key: "handleBubble",
+    value: function handleBubble(object3d) {
+      if (object3d) {
+        var ancestorObject3d = getObject3dAncestorsNodes(object3d, function (object3d) {
+          return object3d instanceof Group;
+        });
+        for (var i = 0; i < ancestorObject3d.length; i++) ancestorObject3d[i].raycastGroup();
+      }
+    }
+
+    /**
+     * emit parent group mouseleave event
+     * @param object3d
+     */
+  }, {
+    key: "cancelAncestorsBubble",
+    value: function cancelAncestorsBubble(object3d) {
+      if (object3d) {
+        var ancestorObject3d = getObject3dAncestorsNodes(object3d, function (object3d) {
+          return object3d instanceof Group;
+        });
+        for (var i = 0; i < ancestorObject3d.length; i++) ancestorObject3d[i].cancel();
+      }
+    }
+
     /**
      * handle mesh raycaster
      * @param raycaster
@@ -119,14 +151,16 @@ var Mesh = /*#__PURE__*/function (_TMesh) {
   }, {
     key: "raycast",
     value: function raycast(raycaster, intersects) {
-      if (this.natureEventMap.size === 0) return;
       _get(_getPrototypeOf(Mesh.prototype), "raycast", this).call(this, raycaster, intersects);
+      var intersect = intersects[0];
+      var object = intersect && intersect.object;
+      object === this && this.handleBubble(this);
+      if (object !== this) this.cancelAncestorsBubble(this);
+      if (this.natureEventMap.size === 0) return;
       var clickCallback = this.natureEventMap.get('click');
       var pointerupCallback = this.natureEventMap.get('pointerup');
       var pointerdownCallback = this.natureEventMap.get('pointerdown');
       var pointermoveCallback = this.natureEventMap.get('pointermove');
-      var intersect = intersects[0];
-      var object = intersect && intersect.object;
       if (object === this) {
         this.entered = true;
         clickCallback && clickCallback.length > 0 && this.handleClick(clickCallback, intersect);

package/dist/core/model.d.ts

@@ -9,15 +9,16 @@ declare class ModelLoader {
      * @param onError
      * @returns
      */
-    loadGLTF(url: string, onLoad?: (result: GLTF) => GLTF, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Promise<unknown>;
+    loadGLTF(url: string, openEvents?: boolean, onLoad?: (result: GLTF) => GLTF, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Promise<GLTF>;
     /**
      * fbx model loader
      * @param url
+     * @param openEvents 是否打开事件传播
      * @param onLoad
      * @param onProgress
      * @param onError
      */
-    loadFbx(url: string, onLoad?: (result: Group) => Group, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Promise<unknown>;
+    loadFbx(url: string, openEvents?: boolean, onLoad?: (result: Group) => Group, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Promise<Group>;
     /**
      * parse fbx buffer
      * @param buffer

package/dist/core/model.js

@@ -7,6 +7,19 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || 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';
+import { getAllMeshChildren } from "../utils";
+import provideEventPrototype from "./events";
+
+/**
+ * inject event prototype fn
+ * @param object3d
+ */
+var injectEventPrototype = function injectEventPrototype(object3d) {
+  var allMesh = getAllMeshChildren(object3d);
+  allMesh.forEach(function (mesh) {
+    Object.assign(mesh, provideEventPrototype(mesh.raycast.bind(mesh), mesh));
+  });
+};
 var ModelLoader = /*#__PURE__*/function () {
   function ModelLoader() {
     _classCallCheck(this, ModelLoader);
@@ -22,7 +35,11 @@ var ModelLoader = /*#__PURE__*/function () {
      * @param onError
      * @returns
      */
-    function loadGLTF(url, onLoad, onProgress, onError) {
+    function loadGLTF(url) {
+      var openEvents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var onLoad = arguments.length > 2 ? arguments[2] : undefined;
+      var onProgress = arguments.length > 3 ? arguments[3] : undefined;
+      var onError = arguments.length > 4 ? arguments[4] : undefined;
       var loader = new GLTFLoader();
       var dracoLoader = new DRACOLoader();
 
@@ -35,6 +52,7 @@ var ModelLoader = /*#__PURE__*/function () {
       loader.setDRACOLoader(dracoLoader);
       return new Promise(function (resolve, reject) {
         loader.load(url, function (gltf) {
+          if (openEvents) injectEventPrototype(gltf.scene);
           onLoad ? resolve(onLoad(gltf)) : resolve(gltf);
         }, function (xhr) {
           onProgress && onProgress(xhr);
@@ -48,16 +66,22 @@ var ModelLoader = /*#__PURE__*/function () {
     /**
      * fbx model loader
      * @param url
+     * @param openEvents 是否打开事件传播
      * @param onLoad
      * @param onProgress
      * @param onError
      */
   }, {
     key: "loadFbx",
-    value: function loadFbx(url, onLoad, onProgress, onError) {
+    value: function loadFbx(url) {
+      var openEvents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var onLoad = arguments.length > 2 ? arguments[2] : undefined;
+      var onProgress = arguments.length > 3 ? arguments[3] : undefined;
+      var onError = arguments.length > 4 ? arguments[4] : undefined;
       var fbxLoader = new FBXLoader();
       return new Promise(function (resolve, reject) {
         fbxLoader.load(url, function (fbx) {
+          if (openEvents) injectEventPrototype(fbx);
           onLoad ? resolve(onLoad(fbx)) : resolve(fbx);
         }, function (xhr) {
           onProgress && onProgress(xhr);

package/dist/core/scene.d.ts

@@ -1,4 +1,4 @@
-import type { Color, ColorRepresentation, Object3D, ToneMapping } from 'three';
+import type { Color, ColorRepresentation, 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';
@@ -65,7 +65,7 @@ interface CutoutAreaType {
     width: number;
     height: number;
 }
-declare class Scene {
+declare class SceneControl {
     private opts;
     private pointer;
     scene: TScene | null;
@@ -133,7 +133,7 @@ declare class Scene {
      * scene add object3d
      * @param object3d
      */
-    add(object3d: Object3D): void;
+    add(object3d: any): void;
     /**
      * update raycaster
      */
@@ -172,4 +172,4 @@ declare class Scene {
     private updateRenderForCut;
     destroy(): void;
 }
-export default Scene;
+export default SceneControl;

package/dist/core/scene.js

@@ -5,7 +5,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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 { ACESFilmicToneMapping, AmbientLight, CubeTextureLoader, Raycaster, Scene as TScene, Vector2, Vector3, WebGLRenderer } from 'three';
+import { ACESFilmicToneMapping, AmbientLight, CubeTextureLoader, Group, Line, Raycaster, Scene as TScene, Vector2, Vector3, WebGLRenderer } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import * as TWEEN from '@tweenjs/tween.js';
 import { emitter } from "../utils";
@@ -14,11 +14,11 @@ import Cssrenderer from "./cssRenderer";
 import globalControl from "./global/globalControl";
 import globalObjectManage from "./global/global";
 import { PerspectiveCamera } from "./camera";
-var Scene = /*#__PURE__*/function () {
+var SceneControl = /*#__PURE__*/function () {
   /** 裁剪相关 */
 
-  function Scene(opts) {
-    _classCallCheck(this, Scene);
+  function SceneControl(opts) {
+    _classCallCheck(this, SceneControl);
     _defineProperty(this, "opts", {});
     _defineProperty(this, "pointer", new Vector2());
     _defineProperty(this, "scene", null);
@@ -48,7 +48,7 @@ var Scene = /*#__PURE__*/function () {
   /**
    * init default scene components
    */
-  _createClass(Scene, [{
+  _createClass(SceneControl, [{
     key: "defaultInit",
     value: function defaultInit() {
       var _this$opts$background, _this$opts$background2;
@@ -242,17 +242,9 @@ var Scene = /*#__PURE__*/function () {
 
       // need expand
       var object3ds = this.scene.children.filter(function (item) {
-        return item instanceof Mesh;
+        return item instanceof Mesh || item instanceof Group || item instanceof Line;
       });
-      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>>[])
-      // })
+      this.raycaster.intersectObjects(object3ds, (_raycasterOps$recursi = raycasterOps.recursive) !== null && _raycasterOps$recursi !== void 0 ? _raycasterOps$recursi : true);
     }
   }, {
     key: "getPointerPosition",
@@ -384,6 +376,6 @@ var Scene = /*#__PURE__*/function () {
       });
     }
   }]);
-  return Scene;
+  return SceneControl;
 }();
-export default Scene;
+export default SceneControl;

package/dist/export.d.ts

@@ -1,4 +1,4 @@
-import Scene from './core/scene';
+import SceneControl from './core/scene';
 import Mesh from './core/mesh';
 import Group from './core/group';
 import { PerspectiveCamera } from './core/camera';
@@ -36,6 +36,5 @@ declare const use: {
     };
 };
 export * from 'three';
-export { Scene as TScene } from 'three';
 export * from './threeCell';
-export { Scene, Mesh, Group, PerspectiveCamera, ModelLoader, TransformControls, createControlLine, createLabel, ModelType, Direction, createTransformControls, utils, dom, use, globalObjectManage, };
+export { SceneControl, Mesh, Group, PerspectiveCamera, ModelLoader, TransformControls, createControlLine, createLabel, ModelType, Direction, createTransformControls, utils, dom, use, globalObjectManage, };

package/dist/export.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/export */
-import Scene from "./core/scene";
+import SceneControl from "./core/scene";
 import Mesh from "./core/mesh";
 import Group from "./core/group";
 import { PerspectiveCamera } from "./core/camera";
@@ -32,6 +32,5 @@ var use = {
   useScene: useScene
 };
 export * from 'three';
-export { Scene as TScene } from 'three';
 export * from "./threeCell";
-export { Scene, Mesh, Group, PerspectiveCamera, ModelLoader, TransformControls, createControlLine, createLabel, ModelType, Direction, createTransformControls, utils, dom, use, globalObjectManage };
+export { SceneControl, Mesh, Group, PerspectiveCamera, ModelLoader, TransformControls, createControlLine, createLabel, ModelType, Direction, createTransformControls, utils, dom, use, globalObjectManage };

package/dist/type.d.ts

@@ -1,4 +1,3 @@
-import type { Intersection } from 'three';
-import type Mesh from './core/mesh';
+import type { Intersection, Object3D } from 'three';
 export declare type CubeEventType = 'click' | 'pointerup' | 'pointerdown' | 'pointermove' | 'pointerleave';
-export declare type EventHandleFn<T> = (event: Mesh, intersect?: Intersection) => void;
+export declare type EventHandleFn = (event: Object3D, intersect?: Intersection) => void;

package/dist/utils/index.d.ts

@@ -32,7 +32,13 @@ export declare const getAncestorsNodes: <T extends Node>(array: T[], targetId: s
  * @param object3d
  * @returns
  */
-export declare const getObject3dAncestorsNodes: (object3d: Object3D) => Object3D<import("three").Event>[];
+export declare const getObject3dAncestorsNodes: (object3d: Object3D, filter?: ((object3d: Object3D) => boolean) | undefined) => Object3D<import("three").Event>[];
+/**
+ * get all mesh children, maybe also need line, but not now
+ * @param object3d
+ * @returns
+ */
+export declare const getAllMeshChildren: (object3d: Object3D) => Object3D<import("three").Event>[];
 /**
  * handle small hump
  * @param camelCaseString

package/dist/utils/index.js

@@ -40,16 +40,35 @@ export var getAncestorsNodes = function getAncestorsNodes(array, targetId) {
  * @param object3d
  * @returns
  */
-export var getObject3dAncestorsNodes = function getObject3dAncestorsNodes(object3d) {
+export var getObject3dAncestorsNodes = function getObject3dAncestorsNodes(object3d, filter) {
   var ancestorsNodes = [];
   var currentObject3d = object3d;
   while (currentObject3d.parent) {
-    ancestorsNodes.push(currentObject3d.parent);
+    if (filter) filter(currentObject3d.parent) && ancestorsNodes.push(currentObject3d.parent);else ancestorsNodes.push(currentObject3d.parent);
     currentObject3d = currentObject3d.parent;
   }
   return ancestorsNodes;
 };
 
+/**
+ * get all mesh children, maybe also need line, but not now
+ * @param object3d
+ * @returns
+ */
+export var getAllMeshChildren = function getAllMeshChildren(object3d) {
+  var children = [];
+  var run = function run(object3d) {
+    if (object3d.children.length === 0) return;
+    for (var i = 0; i < object3d.children.length; i++) {
+      var child = object3d.children[i];
+      if (child.type === 'Mesh') children.push(child);
+      run(child);
+    }
+  };
+  run(object3d);
+  return children;
+};
+
 /**
  * handle small hump
  * @param camelCaseString