@anov/3d-ability 0.0.4-alpha1

package/dist/helper/view/index.js

@@ -0,0 +1,385 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _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); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BackSide, Clock, Euler, Mesh, MeshBasicMaterial, Object3D, OrthographicCamera, Quaternion, Raycaster, SphereGeometry, Vector2, Vector3, Vector4 } from '@anov/3d-core';
+import { getAxesLines, getAxesSpritePoints, getDomContainer } from "./utils";
+var _Array$fill$map = Array(6).fill(0).map(function (_, i) {
+    return i;
+  }),
+  _Array$fill$map2 = _slicedToArray(_Array$fill$map, 6),
+  POS_X = _Array$fill$map2[0],
+  POS_Y = _Array$fill$map2[1],
+  POS_Z = _Array$fill$map2[2],
+  NEG_X = _Array$fill$map2[3],
+  NEG_Y = _Array$fill$map2[4],
+  NEG_Z = _Array$fill$map2[5];
+var clock = new Clock();
+var targetPosition = new Vector3();
+var targetQuaternion = new Quaternion();
+var euler = new Euler();
+var q1 = new Quaternion();
+var q2 = new Quaternion();
+var point = new Vector3();
+var dim = 128;
+var turnRate = 2 * Math.PI;
+var raycaster = new Raycaster();
+var mouse = new Vector2();
+var mouseStart = new Vector2();
+var mouseAngle = new Vector2();
+var dummy = new Object3D();
+var radius = 0;
+var ViewHelper = /*#__PURE__*/function (_Object3D) {
+  _inherits(ViewHelper, _Object3D);
+  var _super = _createSuper(ViewHelper);
+  function ViewHelper(camera, renderer) {
+    var _this2;
+    var _this;
+    var placement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom-right';
+    var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 128;
+    _classCallCheck(this, ViewHelper);
+    _this = _super.call(this);
+    _defineProperty(_assertThisInitialized(_this), "camera", void 0);
+    _defineProperty(_assertThisInitialized(_this), "orthoCamera", new OrthographicCamera(-1.8, 1.8, 1.8, -1.8, 0, 4));
+    _defineProperty(_assertThisInitialized(_this), "isViewHelper", true);
+    _defineProperty(_assertThisInitialized(_this), "animating", false);
+    _defineProperty(_assertThisInitialized(_this), "target", new Vector3());
+    _defineProperty(_assertThisInitialized(_this), "backgroundSphere", void 0);
+    _defineProperty(_assertThisInitialized(_this), "axesLines", void 0);
+    _defineProperty(_assertThisInitialized(_this), "spritePoints", void 0);
+    _defineProperty(_assertThisInitialized(_this), "domElement", void 0);
+    _defineProperty(_assertThisInitialized(_this), "domContainer", void 0);
+    _defineProperty(_assertThisInitialized(_this), "domRect", void 0);
+    _defineProperty(_assertThisInitialized(_this), "dragging", false);
+    _defineProperty(_assertThisInitialized(_this), "renderer", void 0);
+    _defineProperty(_assertThisInitialized(_this), "controls", void 0);
+    _defineProperty(_assertThisInitialized(_this), "controlsChangeEvent", void 0);
+    _defineProperty(_assertThisInitialized(_this), "viewport", new Vector4());
+    _defineProperty(_assertThisInitialized(_this), "offsetHeight", 0);
+    _this.renderer = renderer;
+    _this.camera = camera;
+    _this.domElement = renderer.domElement;
+    _this.orthoCamera.position.set(0, 0, 2);
+    _this.backgroundSphere = getBackgroundSphere();
+    _this.axesLines = getAxesLines();
+    _this.spritePoints = getAxesSpritePoints();
+    _this.domContainer = getDomContainer(placement, size);
+
+    // This may cause confusion if the parent isn't the body and doesn't have a `position:relative`
+    _this.domElement.parentElement.appendChild(_this.domContainer);
+    _this.domRect = _this.domContainer.getBoundingClientRect();
+    _this.startListening();
+    _this.controlsChangeEvent = {
+      listener: function listener() {
+        return _this.updateOrientation();
+      }
+    };
+    _this.update();
+    _this.updateOrientation();
+    (_this2 = _this).add.apply(_this2, [_this.backgroundSphere, _this.axesLines].concat(_toConsumableArray(_this.spritePoints)));
+    return _this;
+  }
+  _createClass(ViewHelper, [{
+    key: "startListening",
+    value: function startListening() {
+      var _this3 = this;
+      this.domContainer.onpointerdown = function (e) {
+        return _this3.onPointerDown(e);
+      };
+      this.domContainer.onpointermove = function (e) {
+        return _this3.onPointerMove(e);
+      };
+      this.domContainer.onpointerleave = function () {
+        return _this3.onPointerLeave();
+      };
+    }
+  }, {
+    key: "onPointerDown",
+    value: function onPointerDown(e) {
+      var _this4 = this;
+      var drag = function drag(e) {
+        if (!_this4.dragging && isClick(e, mouseStart)) return;
+        if (!_this4.dragging) {
+          resetSprites(_this4.spritePoints);
+          _this4.dragging = true;
+        }
+        mouseAngle.set(e.clientX, e.clientY).sub(mouseStart).multiplyScalar(1 / _this4.domRect.width * Math.PI);
+        _this4.rotation.x = clamp(
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        rotationStart.x + mouseAngle.y, Math.PI / -2 + 0.001, Math.PI / 2 - 0.001);
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        _this4.rotation.y = rotationStart.y + mouseAngle.x;
+        _this4.updateMatrixWorld();
+        q1.copy(_this4.quaternion).invert();
+        _this4.camera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius).add(_this4.target);
+        _this4.camera.rotation.setFromQuaternion(q1);
+        _this4.updateOrientation(false);
+      };
+      var endDrag = function endDrag() {
+        document.removeEventListener('pointermove', drag, false);
+        document.removeEventListener('pointerup', endDrag, false);
+        if (!_this4.dragging) {
+          _this4.handleClick(e);
+          return;
+        }
+        _this4.dragging = false;
+      };
+      if (this.animating === true) return;
+      e.preventDefault();
+      mouseStart.set(e.clientX, e.clientY);
+      var rotationStart = euler.copy(this.rotation);
+      setRadius(this.camera, this.target);
+      document.addEventListener('pointermove', drag, false);
+      document.addEventListener('pointerup', endDrag, false);
+    }
+  }, {
+    key: "onPointerMove",
+    value: function onPointerMove(e) {
+      if (this.dragging) return;
+      this.backgroundSphere.material.opacity = 0.2;
+      this.handleHover(e);
+    }
+  }, {
+    key: "onPointerLeave",
+    value: function onPointerLeave() {
+      if (this.dragging) return;
+      this.backgroundSphere.material.opacity = 0;
+      resetSprites(this.spritePoints);
+      this.domContainer.style.cursor = '';
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(e) {
+      var object = getIntersectionObject(e, this.domRect, this.orthoCamera, this.spritePoints);
+      if (!object) return;
+      this.setOrientation(object.userData.type);
+    }
+  }, {
+    key: "handleHover",
+    value: function handleHover(e) {
+      var object = getIntersectionObject(e, this.domRect, this.orthoCamera, this.spritePoints);
+      resetSprites(this.spritePoints);
+      if (!object) {
+        this.domContainer.style.cursor = '';
+      } else {
+        object.material.map.offset.x = 0.5;
+        object.scale.multiplyScalar(1.2);
+        this.domContainer.style.cursor = 'pointer';
+      }
+    }
+  }, {
+    key: "setControls",
+    value: function setControls(controls) {
+      if (this.controls) {
+        this.controls.removeEventListener('change', this.controlsChangeEvent.listener);
+        this.target = new Vector3();
+      }
+      if (!controls) return;
+      this.controls = controls;
+      controls.addEventListener('change', this.controlsChangeEvent.listener);
+      this.target = controls.target;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var delta = clock.getDelta();
+      if (this.animating) this.animate(delta);
+      var _this$domElement$getB = this.domElement.getBoundingClientRect(),
+        width = _this$domElement$getB.width,
+        height = _this$domElement$getB.height;
+      var autoClear = this.renderer.autoClear;
+      this.renderer.autoClear = false;
+      this.renderer.setViewport(width - dim, height - dim, dim, dim);
+      this.renderer.render(this, this.orthoCamera);
+      this.renderer.setViewport(this.viewport);
+      this.renderer.autoClear = autoClear;
+    }
+  }, {
+    key: "updateOrientation",
+    value: function updateOrientation() {
+      var fromCamera = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      if (fromCamera) {
+        this.quaternion.copy(this.camera.quaternion).invert();
+        this.updateMatrixWorld();
+      }
+      updateSpritesOpacity(this.spritePoints, this.camera);
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      this.domRect = this.domContainer.getBoundingClientRect();
+      this.offsetHeight = this.domElement.offsetHeight;
+      setRadius(this.camera, this.target);
+      this.renderer.getViewport(this.viewport);
+      this.updateOrientation();
+    }
+  }, {
+    key: "animate",
+    value: function animate(delta) {
+      var step = delta * turnRate;
+
+      // animate position by doing a slerp and then scaling the position on the unit sphere
+
+      q1.rotateTowards(q2, step);
+      this.camera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius).add(this.target);
+
+      // animate orientation
+
+      this.camera.quaternion.rotateTowards(targetQuaternion, step);
+      this.updateOrientation();
+      if (q1.angleTo(q2) === 0) this.animating = false;
+    }
+  }, {
+    key: "setOrientation",
+    value: function setOrientation(orientation) {
+      prepareAnimationData(this.camera, this.target, orientation);
+      this.animating = true;
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.axesLines.geometry.dispose();
+      this.axesLines.material.dispose();
+      this.backgroundSphere.geometry.dispose();
+      this.backgroundSphere.material.dispose();
+      this.spritePoints.forEach(function (sprite) {
+        sprite.material.map.dispose();
+        sprite.material.dispose();
+      });
+      this.domContainer.remove();
+      if (this.controls) {
+        this.controls.removeEventListener('change', this.controlsChangeEvent.listener);
+      }
+    }
+  }]);
+  return ViewHelper;
+}(Object3D);
+function getBackgroundSphere() {
+  var geometry = new SphereGeometry(1.6);
+  var sphere = new Mesh(geometry, new MeshBasicMaterial({
+    color: 0xFFFFFF,
+    side: BackSide,
+    transparent: true,
+    opacity: 0,
+    depthTest: false
+  }));
+  return sphere;
+}
+function prepareAnimationData(camera, focusPoint, axis) {
+  switch (axis) {
+    case '+x':
+      targetPosition.set(1, 0, 0);
+      targetQuaternion.setFromEuler(new Euler(0, Math.PI * 0.5, 0));
+      break;
+    case '+y':
+      targetPosition.set(0, 1, 0);
+      targetQuaternion.setFromEuler(new Euler(-Math.PI * 0.5, 0, 0));
+      break;
+    case '+z':
+      targetPosition.set(0, 0, 1);
+      targetQuaternion.setFromEuler(new Euler());
+      break;
+    case '-x':
+      targetPosition.set(-1, 0, 0);
+      targetQuaternion.setFromEuler(new Euler(0, -Math.PI * 0.5, 0));
+      break;
+    case '-y':
+      targetPosition.set(0, -1, 0);
+      targetQuaternion.setFromEuler(new Euler(Math.PI * 0.5, 0, 0));
+      break;
+    case '-z':
+      targetPosition.set(0, 0, -1);
+      targetQuaternion.setFromEuler(new Euler(0, Math.PI, 0));
+      break;
+    default:
+      console.error('ViewHelper: Invalid axis.');
+  }
+  setRadius(camera, focusPoint);
+  prepareQuaternions(camera, focusPoint);
+}
+function setRadius(camera, focusPoint) {
+  radius = camera.position.distanceTo(focusPoint);
+}
+function prepareQuaternions(camera, focusPoint) {
+  targetPosition.multiplyScalar(radius).add(focusPoint);
+  dummy.position.copy(focusPoint);
+  dummy.lookAt(camera.position);
+  q1.copy(dummy.quaternion);
+  dummy.lookAt(targetPosition);
+  q2.copy(dummy.quaternion);
+}
+function updatePointer(e, domRect, orthoCamera) {
+  mouse.x = (e.clientX - domRect.left) / domRect.width * 2 - 1;
+  mouse.y = -((e.clientY - domRect.top) / domRect.height) * 2 + 1;
+  raycaster.setFromCamera(mouse, orthoCamera);
+}
+function isClick(e, startCoords) {
+  var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
+  return Math.abs(e.clientX - startCoords.x) < threshold && Math.abs(e.clientY - startCoords.y) < threshold;
+}
+function getIntersectionObject(event, domRect, orthoCamera, intersectionObjects) {
+  updatePointer(event, domRect, orthoCamera);
+  var intersects = raycaster.intersectObjects(intersectionObjects);
+  if (!intersects.length) return null;
+  var intersection = intersects[0];
+  return intersection.object;
+}
+function resetSprites(sprites) {
+  var i = sprites.length;
+  while (i--) {
+    var scale = i < 3 ? 0.6 : 0.4;
+    sprites[i].scale.set(scale, scale, scale);
+    sprites[i].material.map.offset.x = 1;
+  }
+  // sprites.forEach((sprite) => (sprite.material.map!.offset.x = 1));
+}
+
+function updateSpritesOpacity(sprites, camera) {
+  point.set(0, 0, 1);
+  point.applyQuaternion(camera.quaternion);
+  if (point.x >= 0) {
+    sprites[POS_X].material.opacity = 1;
+    sprites[NEG_X].material.opacity = 0.5;
+  } else {
+    sprites[POS_X].material.opacity = 0.5;
+    sprites[NEG_X].material.opacity = 1;
+  }
+  if (point.y >= 0) {
+    sprites[POS_Y].material.opacity = 1;
+    sprites[NEG_Y].material.opacity = 0.5;
+  } else {
+    sprites[POS_Y].material.opacity = 0.5;
+    sprites[NEG_Y].material.opacity = 1;
+  }
+  if (point.z >= 0) {
+    sprites[POS_Z].material.opacity = 1;
+    sprites[NEG_Z].material.opacity = 0.5;
+  } else {
+    sprites[POS_Z].material.opacity = 0.5;
+    sprites[NEG_Z].material.opacity = 1;
+  }
+}
+function clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+export default ViewHelper;

package/dist/helper/view/utils.d.ts

@@ -0,0 +1,6 @@
+import { BufferGeometry, Color, LineBasicMaterial, LineSegments, Sprite, SpriteMaterial } from '@anov/3d-core';
+import type { DomPlacement } from './index';
+export declare const getDomContainer: (placement: DomPlacement, size: number) => HTMLDivElement;
+export declare const getAxesLines: () => LineSegments<BufferGeometry<import("@anov/3d-core").NormalBufferAttributes>, LineBasicMaterial>;
+export declare const getSpriteMaterial: (color: Color, text?: 'x' | 'y' | 'z' | null) => SpriteMaterial;
+export declare const getAxesSpritePoints: () => Sprite[];

package/dist/helper/view/utils.js

@@ -0,0 +1,91 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BufferAttribute, BufferGeometry, CanvasTexture, Color, LineBasicMaterial, LineSegments, RepeatWrapping, Sprite, SpriteMaterial } from '@anov/3d-core';
+var axesColors = [new Color(0xFF3653), new Color(0x8ADB00), new Color(0x2C8FFF)];
+export var getDomContainer = function getDomContainer(placement, size) {
+  var div = document.createElement('div');
+  var style = div.style;
+  style.height = "".concat(size, "px");
+  style.width = "".concat(size, "px");
+  style.borderRadius = '100%';
+  style.position = 'absolute';
+  var _placement$split = placement.split('-'),
+    _placement$split2 = _slicedToArray(_placement$split, 2),
+    y = _placement$split2[0],
+    x = _placement$split2[1];
+  style.transform = '';
+  style.left = x === 'left' ? '0' : x === 'center' ? '50%' : '';
+  style.right = x === 'right' ? '0' : '';
+  style.transform += x === 'center' ? 'translateX(-50%)' : '';
+  style.top = y === 'top' ? '0' : y === 'bottom' ? '' : '50%';
+  style.bottom = y === 'bottom' ? '0' : '';
+  style.transform += y === 'center' ? 'translateY(-50%)' : '';
+  return div;
+};
+export var getAxesLines = function getAxesLines() {
+  var distance = 0.9;
+  var position = Array(3).fill(0).map(function (_, i) {
+    return [!i ? distance : 0, i === 1 ? distance : 0, i === 2 ? distance : 0, 0, 0, 0];
+  }).flat();
+  var color = Array(6).fill(0).map(function (_, i) {
+    return i < 2 ? axesColors[0].toArray() : i < 4 ? axesColors[1].toArray() : axesColors[2].toArray();
+  }).flat();
+  var geometry = new BufferGeometry();
+  geometry.setAttribute('position', new BufferAttribute(new Float32Array(position), 3));
+  geometry.setAttribute('color', new BufferAttribute(new Float32Array(color), 3));
+  return new LineSegments(geometry, new LineBasicMaterial({
+    linewidth: 3,
+    vertexColors: true
+  }));
+};
+export var getSpriteMaterial = function getSpriteMaterial(color) {
+  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var canvas = document.createElement('canvas');
+  canvas.width = 128;
+  canvas.height = 64;
+  var context = canvas.getContext('2d');
+  context.beginPath();
+  context.arc(32, 32, 32, 0, 2 * Math.PI);
+  context.closePath();
+  context.fillStyle = color.getStyle();
+  context.fill();
+  context.beginPath();
+  context.arc(96, 32, 32, 0, 2 * Math.PI);
+  context.closePath();
+  context.fillStyle = '#FFF';
+  context.fill();
+  if (text !== null) {
+    context.font = 'bold 48px Arial';
+    context.textAlign = 'center';
+    context.fillStyle = '#000';
+    context.fillText(text.toUpperCase(), 32, 48);
+    context.fillText(text.toUpperCase(), 96, 48);
+  }
+  var texture = new CanvasTexture(canvas);
+  texture.wrapS = texture.wrapT = RepeatWrapping;
+  texture.repeat.x = 0.5;
+  return new SpriteMaterial({
+    map: texture,
+    toneMapped: false,
+    transparent: true
+  });
+};
+export var getAxesSpritePoints = function getAxesSpritePoints() {
+  var axes = ['x', 'y', 'z'];
+  return Array(6).fill(0).map(function (_, i) {
+    var isPositive = i < 3;
+    var sign = isPositive ? '+' : '-';
+    var axis = axes[i % 3];
+    var color = axesColors[i % 3];
+    var sprite = new Sprite(getSpriteMaterial(color, isPositive ? axis : null));
+    sprite.userData.type = "".concat(sign).concat(axis);
+    sprite.scale.setScalar(isPositive ? 0.6 : 0.4);
+    sprite.position[axis] = isPositive ? 1.2 : -1.2;
+    sprite.renderOrder = 1;
+    return sprite;
+  });
+};

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { SceneControl } from '@anov/3d-core';
+import { mouseDraweLine } from './core/mouseDrawe';
+import { createSnow } from './environment/snow';
+import { createRain } from './environment/rain';
+import createCloud from './environment/cloud';
+import { initPostEffects } from './postEffects';
+import createHighSelectedTool from './postEffects/outlinePass';
+import { createSun } from './environment/sun';
+import GridMaterial from './material/pristineGridMaterial';
+import ViewHelper from './helper/view';
+import createSkySystem from './environment/sky';
+import createVolumetricCloud from './environment/volumetricCloud/inex';
+import createSkyCloud from './environment/shaderCloud/index';
+import Snow from './environment/showShder';
+import Rain from './environment/rainShder';
+export { SceneControl, // todo remove
+mouseDraweLine, createRain, createSnow, createCloud, createSun, createSkySystem, createVolumetricCloud, createSkyCloud, Snow, Rain, initPostEffects, // effect
+createHighSelectedTool, GridMaterial, ViewHelper, };

package/dist/index.js

@@ -0,0 +1,20 @@
+import { SceneControl } from '@anov/3d-core';
+import { mouseDraweLine } from "./core/mouseDrawe";
+import { createSnow } from "./environment/snow";
+import { createRain } from "./environment/rain";
+import createCloud from "./environment/cloud";
+import { initPostEffects } from "./postEffects";
+import createHighSelectedTool from "./postEffects/outlinePass";
+import { createSun } from "./environment/sun";
+import GridMaterial from "./material/pristineGridMaterial";
+import ViewHelper from "./helper/view";
+import createSkySystem from "./environment/sky";
+import createVolumetricCloud from "./environment/volumetricCloud/inex";
+import createSkyCloud from "./environment/shaderCloud/index";
+import Snow from "./environment/showShder";
+import Rain from "./environment/rainShder";
+export { SceneControl,
+// todo remove
+mouseDraweLine, createRain, createSnow, createCloud, createSun, createSkySystem, createVolumetricCloud, createSkyCloud, Snow, Rain, initPostEffects,
+// effect
+createHighSelectedTool, GridMaterial, ViewHelper };

package/dist/material/pristineGridMaterial/index.d.ts

@@ -0,0 +1,20 @@
+import * as THREE from '@anov/3d-core';
+declare type GridMaterialParameters = {
+    name?: string;
+    side?: THREE.Side;
+    transparent?: boolean;
+    theme?: THREE.Color;
+    majorLineWidth?: number;
+    minorLineWidth?: number;
+    axisLineWidth?: number;
+    majorGridDiv?: number;
+    gridDiv?: number;
+    majorLineColor?: THREE.Color;
+    minorLineColor?: THREE.Color;
+    xAxisColor?: THREE.Color;
+    zAxisColor?: THREE.Color;
+};
+declare class GridMaterial extends THREE.Material {
+    constructor(options?: GridMaterialParameters);
+}
+export default GridMaterial;

package/dist/material/pristineGridMaterial/index.js

@@ -0,0 +1,102 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _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); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import * as THREE from '@anov/3d-core';
+import vertexShader from "./shader/vertex";
+import fragmentShader from "./shader/fragment";
+var GridMaterial = /*#__PURE__*/function (_THREE$Material) {
+  _inherits(GridMaterial, _THREE$Material);
+  var _super = _createSuper(GridMaterial);
+  function GridMaterial(options) {
+    var _this;
+    _classCallCheck(this, GridMaterial);
+    _this = _super.call(this);
+    var _ref = options || {},
+      side = _ref.side,
+      transparent = _ref.transparent,
+      theme = _ref.theme,
+      majorLineWidth = _ref.majorLineWidth,
+      minorLineWidth = _ref.minorLineWidth,
+      axisLineWidth = _ref.axisLineWidth,
+      name = _ref.name,
+      majorGridDiv = _ref.majorGridDiv,
+      gridDiv = _ref.gridDiv,
+      majorLineColor = _ref.majorLineColor,
+      minorLineColor = _ref.minorLineColor,
+      xAxisColor = _ref.xAxisColor,
+      zAxisColor = _ref.zAxisColor;
+    var _majorLineWidth = majorLineWidth !== null && majorLineWidth !== void 0 ? majorLineWidth : 0.04;
+    var _minorLineWidth = minorLineWidth !== null && minorLineWidth !== void 0 ? minorLineWidth : 0.01;
+    var _axisLineWidth = axisLineWidth !== null && axisLineWidth !== void 0 ? axisLineWidth : 0.15;
+    var _majorGridDiv = majorGridDiv !== null && majorGridDiv !== void 0 ? majorGridDiv : 10.0;
+    var _gridDiv = gridDiv !== null && gridDiv !== void 0 ? gridDiv : 4.0;
+    var _majorLineColor = majorLineColor !== null && majorLineColor !== void 0 ? majorLineColor : new THREE.Color();
+    var _minorLineColor = minorLineColor !== null && minorLineColor !== void 0 ? minorLineColor : new THREE.Color();
+    var _xAxisColor = xAxisColor !== null && xAxisColor !== void 0 ? xAxisColor : new THREE.Color(1, 0.3, 0.3);
+    var _zAxisColor = zAxisColor !== null && zAxisColor !== void 0 ? zAxisColor : new THREE.Color(0.3, 0.3, 1);
+    return _possibleConstructorReturn(_this, new THREE.ShaderMaterial({
+      side: side !== null && side !== void 0 ? side : THREE.DoubleSide,
+      glslVersion: THREE.GLSL3,
+      transparent: transparent !== null && transparent !== void 0 ? transparent : true,
+      name: name !== null && name !== void 0 ? name : 'GridMaterial',
+      vertexShader: vertexShader,
+      fragmentShader: fragmentShader,
+      uniforms: {
+        u_baseAlpha: {
+          value: 0.5
+        },
+        u_majorLineWidth: {
+          value: _majorLineWidth
+        },
+        // Example default value , 大网格线宽
+        u_minorLineWidth: {
+          value: _minorLineWidth
+        },
+        // Example default value ，小网格线宽
+        u_axisLineWidth: {
+          value: _axisLineWidth
+        },
+        // Example default value ，坐标轴线宽
+        u_majorGridDiv: {
+          value: _majorGridDiv
+        },
+        // Example default value， 大网格间隔
+        u_gridDiv: {
+          value: _gridDiv
+        },
+        // Example default value， 小网格间隔
+        u_majorLineColor: {
+          value: _majorLineColor
+        },
+        // White color
+        u_minorLineColor: {
+          value: _minorLineColor
+        },
+        // White color
+        u_baseColor: {
+          value: theme !== null && theme !== void 0 ? theme : new THREE.Color('#707070')
+        },
+        // Black color
+        u_xAxisColor: {
+          value: _xAxisColor
+        },
+        // Red color
+        u_zAxisColor: {
+          value: _zAxisColor
+        } // Blue color
+      }
+    }));
+  }
+  return _createClass(GridMaterial);
+}(THREE.Material);
+export default GridMaterial;

package/dist/material/pristineGridMaterial/shader/fragment.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\nprecision highp float;\n\n// Varyings from the vertex shader\nin vec2 v_uv;\nin vec2 v_worldPos;\n\n// Uniforms\nuniform float u_majorLineWidth, u_minorLineWidth, u_axisLineWidth;\nuniform vec3 u_majorLineColor, u_minorLineColor, u_baseColor;\nuniform vec3 u_xAxisColor, u_zAxisColor;\nuniform float u_majorGridDiv, u_baseAlpha;\nuniform vec2 u_resolution;\n\n// Output color\nout vec4 gColor;\n\nfloat saturate(float value) {\nreturn clamp(value, 0.0, 1.0);\n}\n\nvoid main() {\n    // Calculate derivatives for anti-aliasing\nvec4 uvDDXY = vec4(dFdx(v_uv), dFdy(v_uv));\nvec2 uvDeriv = vec2(length(uvDDXY.xz), length(uvDDXY.yw));\n\nvec4 worldPosDDXY = vec4(dFdx(v_worldPos), dFdy(v_worldPos));\nvec2 worldPosDeriv = vec2(length(worldPosDDXY.xz), length(worldPosDDXY.yw));\n\n    // Axis lines calculation\nfloat axisLineWidth = max(u_majorLineWidth, u_axisLineWidth);\n\nvec2 axisDrawWidth = vec2(axisLineWidth) + worldPosDeriv * 0.5; // Adjust for AA\nvec2 axisLineAA = worldPosDeriv * 1.5;\nvec2 axisLines2 = smoothstep(axisDrawWidth + axisLineAA, axisDrawWidth - axisLineAA, abs(v_worldPos.xy * 2.0));\naxisLines2 *= (axisLineWidth / axisDrawWidth);\n\n    // Major grid lines\nfloat div = max(2.0, round(u_majorGridDiv));\nvec2 majorUVDeriv = worldPosDeriv / div;\nfloat majorLineWidth = u_majorLineWidth / div;\nvec2 majorDrawWidth = clamp(vec2(majorLineWidth), majorUVDeriv, vec2(0.5));\nvec2 majorLineAA = majorUVDeriv * 1.5;\nvec2 majorGridUV = 1.0 - abs(fract(v_worldPos.xy / div) * 2.0 - 1.0);\nvec2 majorGrid2 = smoothstep(majorDrawWidth + majorLineAA, majorDrawWidth - majorLineAA, majorGridUV);\nmajorGrid2 *= (majorLineWidth / majorDrawWidth);\n\n    // Minor grid lines\nfloat minorLineWidth = u_minorLineWidth;\nbool minorInvertLine = minorLineWidth > 0.5;\nfloat minorTargetWidth = minorInvertLine ? 1.0 - minorLineWidth : minorLineWidth;\nvec2 minorDrawWidth = clamp(vec2(minorTargetWidth), uvDeriv, vec2(0.5));\nvec2 minorLineAA = uvDeriv * 1.5;\nvec2 minorGridUV = abs(fract(v_uv) * 2.0 - 1.0);\nminorGridUV = minorInvertLine ? minorGridUV : 1.0 - minorGridUV;\nvec2 minorGrid2 = smoothstep(minorDrawWidth + minorLineAA, minorDrawWidth - minorLineAA, minorGridUV);\nminorGrid2 *= (minorTargetWidth / minorDrawWidth);\n\nif(max(axisLines2.x, axisLines2.y) > 0.) {\n        // If we're drawing axis lines, don't draw grid lines on axis\nmajorGrid2 = vec2(0.);\nminorGrid2 = vec2(0.);\n}\n\n // Combine minor and major grid lines\nfloat minorGrid = mix(minorGrid2.x, 1.0, minorGrid2.y);\nfloat majorGrid = mix(majorGrid2.x, 1.0, majorGrid2.y);\n\n    // Final color calculations for grid\nvec3 gridColor = mix(u_baseColor, u_minorLineColor, minorGrid);\ngridColor = mix(gridColor, u_majorLineColor, majorGrid);\nfloat gridAlpha = u_baseAlpha;\n\n    // Apply base alpha to the grid lines\nif(minorGrid > 0.0) {\ngridAlpha = saturate(mix(gridAlpha, 1.0, minorGrid));\n}\nif(majorGrid > 0.0) {\ngridAlpha = saturate(mix(gridAlpha, 1.0, majorGrid));\n}\n\n    // Apply axis color to the axis lines\nvec3 axisColor = mix(vec3(1.), u_xAxisColor, step(0.5, abs(v_worldPos.x)));\naxisColor = mix(axisColor, u_zAxisColor, step(0.5, abs(v_worldPos.y)));\n\nvec3 finalColor = mix(gridColor, axisColor, max(axisLines2.x, axisLines2.y));\n\nif(max(axisLines2.x, axisLines2.y) > 0.) {\ngridAlpha = saturate(mix(gridAlpha, 1.0, max(axisLines2.x, axisLines2.y)));\n}\n\n    // Set the final fragment color\ngColor = vec4(finalColor, gridAlpha);\n}\n";
+export default _default;