@ifiwas/standard-view 2.0.0

package/lib/groups/Camera.js

@@ -0,0 +1,477 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var THREE = _interopRequireWildcard(require("three"));
+var _Box = _interopRequireDefault(require("../primitives/Box"));
+var _Circle = _interopRequireDefault(require("../primitives/Circle"));
+var _Cylinder = _interopRequireDefault(require("../primitives/Cylinder"));
+var _Label = _interopRequireDefault(require("../primitives/Label"));
+var _Arrow = _interopRequireDefault(require("./Arrow"));
+var _Text = _interopRequireDefault(require("../primitives/Text"));
+var _Group = _interopRequireDefault(require("./Group"));
+var _util = require("../utils/util");
+var _math = require("../utils/math");
+var _hooks = require("../utils/hooks");
+var _constants = require("../utils/constants");
+var _excluded = ["type", "left", "right", "top", "bottom", "near", "far", "fov", "width", "height", "aspect", "position", "normal", "target", "rotation", "eulerOrder", "quaternion", "up", "roll", "helper", "showUp", "showNormal", "showRoll", "showLookAt", "showLabel", "labelOffset", "labelText", "cull", "coverageColor", "coverageOpacity", "castShadow", "receiveShadow", "wireframeColor", "children"]; // Camera.tsx
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _construct(t, e, r) { if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); var o = [null]; o.push.apply(o, e); var p = new (t.bind.apply(t, o))(); return r && _setPrototypeOf(p, r.prototype), p; }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var useMemo = React.useMemo,
+  memo = React.memo;
+function updateAllOpacity(_ref) {
+  var children = _ref.children,
+    originalOpacity = _ref.originalOpacity,
+    _ref$newOpacity = _ref.newOpacity,
+    newOpacity = _ref$newOpacity === void 0 ? 0.5 : _ref$newOpacity,
+    _ref$restore = _ref.restore,
+    restore = _ref$restore === void 0 ? false : _ref$restore;
+  // Validation
+  if (!children) {
+    return;
+  }
+  var _children = Array.isArray(children) ? children : [children];
+
+  // Update Meshes
+  _children.filter(function (child) {
+    return child.constructor.name === '';
+  }).map(function (mesh) {
+    /* eslint-disable no-param-reassign */
+    if (restore) {
+      // Restore
+      mesh.material.opacity = originalOpacity.pop();
+    } else {
+      // Enable Transparency
+      mesh.material.transparent = true;
+      // Update Opacity
+      var oldOpacity = mesh.material.opacity != null ? mesh.material.opacity : 1;
+      originalOpacity.push(oldOpacity);
+      mesh.material.opacity = newOpacity;
+    }
+
+    // Update Material
+    mesh.material.needsUpdate = true;
+    return null;
+    /* eslint-enable no-param-reassign */
+  });
+
+  // Recurse into Groups
+  _children.filter(function (child) {
+    return child.constructor.name === 'Group';
+  }).map(function (group) {
+    return updateAllOpacity({
+      children: group.children,
+      originalOpacity: originalOpacity,
+      newOpacity: newOpacity,
+      restore: restore
+    });
+  });
+
+  // Recurse into Scenes
+  _children.filter(function (child) {
+    return child.constructor.name === 'Scene';
+  }).map(function (scene) {
+    return updateAllOpacity({
+      children: scene.children,
+      originalOpacity: originalOpacity,
+      newOpacity: newOpacity,
+      restore: restore
+    });
+  });
+}
+
+/**
+ * setAllOpacity
+ *
+ * Recursively call updateAllOpacity on groups and sets material opacity
+ * and transparennt for all meshes
+ * originalCapacity needs to be reverse since, restoreAllOpacity will
+ * pop elements from originalCapacity in the same order in which they
+ * were pushed to the array.
+ */
+function setAllOpacity(children, newOpacity) {
+  var originalOpacity = [];
+  updateAllOpacity({
+    children: children,
+    originalOpacity: originalOpacity,
+    newOpacity: newOpacity,
+    restore: false
+  });
+  originalOpacity = originalOpacity.reverse();
+
+  // restoreAllOpacity closure
+  // Something screwy is happening in the restore
+  return function restoreAllOpacity() {
+    updateAllOpacity({
+      children: children,
+      originalOpacity: originalOpacity,
+      newOpacity: newOpacity,
+      restore: true
+    });
+  };
+}
+function CullCoverage(_ref2) {
+  var frustum = _ref2.frustum,
+    cull = _ref2.cull,
+    coverageColor = _ref2.coverageColor,
+    coverageOpacity = _ref2.coverageOpacity;
+  (0, _hooks.useFrame)(function updateRenderLoop(_ref3) {
+    var gl = _ref3.gl,
+      scene = _ref3.scene,
+      camera = _ref3.camera;
+    /* eslint-disable no-param-reassign */
+    if (!cull) {
+      return;
+    }
+
+    // Prevent Render of Full Scene after Culling
+    // @ts-ignore:TS2339 cancelTailRender does not exist on scene
+    scene.cancelTailRender = true;
+
+    // Original Color Coverage with Custom Coverage Opacity
+    if (coverageColor == null && coverageOpacity < 1) {
+      var restoreAllOpacity = setAllOpacity(scene.children, coverageOpacity);
+      gl.clippingPlanes = frustum.planes;
+      gl.render(scene, camera);
+
+      // Restore WebGLRender Options
+      restoreAllOpacity();
+      scene.overrideMaterial = null;
+      gl.clippingPlanes = [];
+      return;
+    }
+
+    // Override Color
+    if (coverageColor != null) {
+      scene.overrideMaterial = new THREE.MeshBasicMaterial({
+        color: coverageColor,
+        transparent: true,
+        opacity: coverageOpacity
+      });
+    }
+    gl.clippingPlanes = frustum.planes;
+    gl.render(scene, camera);
+
+    // Restore WebGLRender Options
+    scene.overrideMaterial = null;
+    gl.clippingPlanes = [];
+
+    /* eslint-enable no-param-reassign */
+  }, 10);
+  return null;
+}
+/**
+ * Camera
+ *
+ * Camera's up prop may be given by the user. The camera's true up will be a projection of the
+ * given up. This way you can have a tilted camera and just provide the up of the world space and
+ * the camera will orient such that the project of the true up is aligned with the world space up.
+ */
+var Camera = function Camera(_ref4) {
+  var _ref4$type = _ref4.type,
+    type = _ref4$type === void 0 ? 'perspective' : _ref4$type,
+    left = _ref4.left,
+    right = _ref4.right,
+    top = _ref4.top,
+    bottom = _ref4.bottom,
+    _ref4$near = _ref4.near,
+    near = _ref4$near === void 0 ? _math.EPS : _ref4$near,
+    _ref4$far = _ref4.far,
+    far = _ref4$far === void 0 ? 1000 : _ref4$far,
+    _ref4$fov = _ref4.fov,
+    fov = _ref4$fov === void 0 ? 50 : _ref4$fov,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? 1 : _ref4$width,
+    _ref4$height = _ref4.height,
+    height = _ref4$height === void 0 ? 1 : _ref4$height,
+    _ref4$aspect = _ref4.aspect,
+    aspect = _ref4$aspect === void 0 ? width / height : _ref4$aspect,
+    _ref4$position = _ref4.position,
+    position = _ref4$position === void 0 ? [0, 0, 0] : _ref4$position,
+    _ref4$normal = _ref4.normal,
+    normal = _ref4$normal === void 0 ? _constants.DEFAULT_NORMAL : _ref4$normal,
+    target = _ref4.target,
+    _ref4$rotation = _ref4.rotation,
+    rotation = _ref4$rotation === void 0 ? [0, 0, 0] : _ref4$rotation,
+    _ref4$eulerOrder = _ref4.eulerOrder,
+    eulerOrder = _ref4$eulerOrder === void 0 ? _constants.EULER_ORDERS.XYZ : _ref4$eulerOrder,
+    quaternion = _ref4.quaternion,
+    up = _ref4.up,
+    _ref4$roll = _ref4.roll,
+    roll = _ref4$roll === void 0 ? 0 : _ref4$roll,
+    _ref4$helper = _ref4.helper,
+    helper = _ref4$helper === void 0 ? false : _ref4$helper,
+    _ref4$showUp = _ref4.showUp,
+    showUp = _ref4$showUp === void 0 ? false : _ref4$showUp,
+    _ref4$showNormal = _ref4.showNormal,
+    showNormal = _ref4$showNormal === void 0 ? false : _ref4$showNormal,
+    _ref4$showRoll = _ref4.showRoll,
+    showRoll = _ref4$showRoll === void 0 ? false : _ref4$showRoll,
+    _ref4$showLookAt = _ref4.showLookAt,
+    showLookAt = _ref4$showLookAt === void 0 ? false : _ref4$showLookAt,
+    _ref4$showLabel = _ref4.showLabel,
+    showLabel = _ref4$showLabel === void 0 ? true : _ref4$showLabel,
+    _ref4$labelOffset = _ref4.labelOffset,
+    labelOffset = _ref4$labelOffset === void 0 ? [0, 0, 1.5] : _ref4$labelOffset,
+    _ref4$labelText = _ref4.labelText,
+    labelText = _ref4$labelText === void 0 ? 'cam' : _ref4$labelText,
+    _ref4$cull = _ref4.cull,
+    cull = _ref4$cull === void 0 ? false : _ref4$cull,
+    coverageColor = _ref4.coverageColor,
+    _ref4$coverageOpacity = _ref4.coverageOpacity,
+    coverageOpacity = _ref4$coverageOpacity === void 0 ? 1 : _ref4$coverageOpacity,
+    _ref4$castShadow = _ref4.castShadow,
+    castShadow = _ref4$castShadow === void 0 ? false : _ref4$castShadow,
+    _ref4$receiveShadow = _ref4.receiveShadow,
+    receiveShadow = _ref4$receiveShadow === void 0 ? false : _ref4$receiveShadow,
+    wireframeColor = _ref4.wireframeColor,
+    children = _ref4.children,
+    otherProps = _objectWithoutProperties(_ref4, _excluded);
+  // Target / Normal
+  var initialNormal = useMemo(function updateNormal() {
+    if (target) {
+      var posVec = _construct(THREE.Vector3, _toConsumableArray(position));
+      var targetVec = _construct(THREE.Vector3, _toConsumableArray(target));
+      var lookAtVec = targetVec.clone().sub(posVec).normalize();
+      // LookAt is opposite direction of Normal
+      return [-lookAtVec.x, -lookAtVec.y, -lookAtVec.z];
+    }
+    return (0, _util.objectToArray)(_construct(THREE.Vector3, _toConsumableArray(normal)).normalize());
+  }, [target, normal, position]);
+
+  // THREE.Camera
+  var camera = useMemo(function updateCamera() {
+    var _cam$position, _cam;
+    var cam;
+    var _left = left != null ? left : -width * 0.5;
+    var _right = right != null ? right : width * 0.5;
+    var _top = top != null ? top : height * 0.5;
+    var _bottom = bottom != null ? bottom : -height * 0.5;
+    switch (type) {
+      case 'orthographic':
+        cam = new THREE.OrthographicCamera(_left, _right, _top, _bottom, near, far);
+        break;
+      case 'perspective':
+        cam = new THREE.PerspectiveCamera(fov, aspect, near, far);
+        break;
+      default:
+        /* eslint-disable-next-line no-console */
+        console.warn("[Camera] Invalid camera type: ".concat(type));
+    }
+
+    // Camera Extrinsics
+    (_cam$position = cam.position).set.apply(_cam$position, _toConsumableArray(position));
+    // cam.up is only used for determining the axis of rotaion for orbitControls or mapControls,
+    // this up does not affect the quaternion of the Camera
+    if (up != null) {
+      var _cam$up;
+      (_cam$up = cam.up).set.apply(_cam$up, _toConsumableArray(up));
+    } else {
+      var _cam$up2;
+      (_cam$up2 = cam.up).set.apply(_cam$up2, _toConsumableArray(_constants.DEFAULT_UP));
+    }
+    // Note: THREE's Camera's actual normal is inverse of the lookAt
+    // Since THREE Camera's quaternion is readOnly and may only be manipulated by methods,
+    // must use lookAt().
+    // Reset LookAt
+    (_cam = cam).lookAt.apply(_cam, _toConsumableArray(position.map(function (val, i) {
+      return val - _constants.DEFAULT_NORMAL[i];
+    })));
+
+    // Normal
+    // @ts-ignore:T2345 // spread
+    var normalVec = _construct(THREE.Vector3, _toConsumableArray(initialNormal));
+    var normalQ = new THREE.Quaternion().setFromUnitVectors(_constants.DEFAULT_NORMAL_VEC3, normalVec);
+
+    // Rotation / Quaternion
+    var rotationQ = new THREE.Quaternion();
+    if (quaternion == null) {
+      var _eulerOrder = eulerOrder.toUpperCase();
+      _eulerOrder = _constants.EULER_ORDERS[_eulerOrder] ? _eulerOrder : _constants.EULER_ORDERS.XYZ;
+      var euler = _construct(THREE.Euler, _toConsumableArray(rotation).concat([_eulerOrder]));
+      rotationQ = new THREE.Quaternion().setFromEuler(euler);
+    } else {
+      rotationQ = (0, _util.toQuaternion)(quaternion);
+    }
+
+    // Up
+    // If an up prop is provided, the camera with align the roll so that the true up vector of
+    // the Camera is aligned with the projection of the given up vector in the
+    // Camera's image plane.
+    var upAlignAngle = 0;
+    if (up != null) {
+      var qNormalAndRotation = cam.quaternion.clone().premultiply(rotationQ).premultiply(normalQ);
+      var givenUpVec = _construct(THREE.Vector3, _toConsumableArray(up)).normalize();
+      var lookAtVec = _constants.DEFAULT_NORMAL_VEC3.clone().applyQuaternion(qNormalAndRotation).multiplyScalar(-1);
+      var rightVec = new THREE.Vector3().crossVectors(givenUpVec, lookAtVec);
+      var projectedUpVec = new THREE.Vector3().crossVectors(lookAtVec, rightVec);
+      var trueUpVec = _constants.DEFAULT_UP_VEC3.clone().applyQuaternion(qNormalAndRotation);
+      var upAlignSign = trueUpVec.clone().dot(rightVec) > 0 ? -1 : 1;
+      upAlignAngle = trueUpVec.angleTo(projectedUpVec) * upAlignSign;
+    }
+
+    // Roll
+    // The normal is inverse of the lookAt so the roll must be negated
+    var _roll = (-roll + upAlignAngle) % (Math.PI * 2);
+    var rollQ = new THREE.Quaternion().setFromAxisAngle(_constants.DEFAULT_NORMAL_VEC3, _roll);
+
+    // cam.quaternion = normalQ * rotationQ * rollQ
+    cam.quaternion.premultiply(rollQ);
+    cam.quaternion.premultiply(rotationQ);
+    cam.quaternion.premultiply(normalQ);
+    cam.updateMatrixWorld();
+    return cam;
+  }, [position, up, initialNormal, quaternion, roll, left, width, right, top, height, bottom, type, near, far, fov, aspect, eulerOrder, rotation]);
+  var cameraNormal = useMemo(function updateNormal() {
+    return (0, _util.objectToArray)(_constants.DEFAULT_NORMAL_VEC3.clone().applyQuaternion(camera.quaternion));
+  }, [camera]);
+  var cameraLookAt = useMemo(function updateLookAt() {
+    return [-cameraNormal[0], -cameraNormal[1], -cameraNormal[2]];
+  }, [cameraNormal]);
+
+  // Camera Helper
+  var cameraHelper = useMemo(function updateCameraHelper() {
+    if (!helper || !camera) {
+      return null;
+    }
+    return new THREE.CameraHelper(camera);
+  }, [camera, helper]);
+
+  // Frustum
+  var frustum = useMemo(function updateFrustum() {
+    // Camera Frustum
+    var frus = new THREE.Frustum();
+    frus.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+    return frus;
+  }, [camera]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Group["default"], _extends({
+    position: position
+  }, otherProps), /*#__PURE__*/React.createElement(_Group["default"], {
+    quaternion: camera.quaternion
+  }, /*#__PURE__*/React.createElement(_Box["default"], {
+    scale: [1, 1, 1.4],
+    castShadow: castShadow,
+    receiveShadow: receiveShadow
+  }), /*#__PURE__*/React.createElement(_Cylinder["default"], {
+    start: [0, 0, -0.7],
+    end: [0, 0, -1],
+    radiusBottom: 0.3,
+    radiusTop: 0.3,
+    castShadow: castShadow,
+    receiveShadow: receiveShadow
+  }), showRoll && /*#__PURE__*/React.createElement(_Group["default"], null, /*#__PURE__*/React.createElement(_Arrow["default"], {
+    head: _constants.DEFAULT_UP.map(function (val) {
+      return val * 2;
+    }),
+    color: "yellow"
+  }), /*#__PURE__*/React.createElement(_Arrow["default"], {
+    head: _constants.DEFAULT_UP.map(function (val) {
+      return val * 2;
+    }),
+    color: "yellow",
+    opacity: 0.3,
+    roll: roll
+  }), /*#__PURE__*/React.createElement(_Circle["default"], {
+    color: "yellow",
+    thetaLength: roll % (Math.PI * 2),
+    thetaStart: Math.PI * 0.5 - roll,
+    normal: [0, 0, -1],
+    opacity: 0.3
+  }), /*#__PURE__*/React.createElement(_Text["default"], {
+    text: "local roll: ".concat(roll),
+    position: _constants.DEFAULT_UP.map(function (val) {
+      return val * 2.2;
+    }),
+    color: "yellow",
+    align: "center",
+    size: 0.2,
+    billboard: true
+  }))), wireframeColor && /*#__PURE__*/React.createElement(_Group["default"], {
+    quaternion: camera.quaternion
+  }, /*#__PURE__*/React.createElement(_Box["default"], {
+    scale: [1, 1, 1.4],
+    color: wireframeColor,
+    wireframe: true,
+    ignoreMouseEvents: true
+  }), /*#__PURE__*/React.createElement(_Cylinder["default"], {
+    start: [0, 0, -0.7],
+    end: [0, 0, -1],
+    radiusBottom: 0.3,
+    radiusTop: 0.3,
+    color: wireframeColor,
+    wireframe: true,
+    ignoreMouseEvents: true
+  })), showUp && /*#__PURE__*/React.createElement(_Group["default"], null, /*#__PURE__*/React.createElement(_Arrow["default"], {
+    head: [camera.up.x * 2, camera.up.y * 2, camera.up.z * 2],
+    color: "cyan"
+  }), /*#__PURE__*/React.createElement(_Text["default"], {
+    text: "up",
+    position: [camera.up.x * 2.2, camera.up.y * 2.2, camera.up.z * 2.2],
+    color: "cyan",
+    align: "center",
+    size: camera.up.length() * 0.2,
+    billboard: true
+  })), showNormal && /*#__PURE__*/React.createElement(_Group["default"], null, /*#__PURE__*/React.createElement(_Arrow["default"], {
+    head: cameraNormal.map(function (val) {
+      return val * 2;
+    }),
+    color: "lime"
+  }), /*#__PURE__*/React.createElement(_Text["default"], {
+    text: "normal",
+    position: cameraNormal.map(function (val) {
+      return val * 2.2;
+    }),
+    color: "lime",
+    align: "center",
+    size: 0.2,
+    billboard: true
+  })), showLookAt && /*#__PURE__*/React.createElement(_Group["default"], null, /*#__PURE__*/React.createElement(_Arrow["default"], {
+    head: cameraLookAt.map(function (val) {
+      return val * 2;
+    }),
+    color: "magenta"
+  }), /*#__PURE__*/React.createElement(_Text["default"], {
+    text: "look",
+    position: cameraLookAt.map(function (val) {
+      return val * 2.2;
+    }),
+    color: "magenta",
+    align: "center",
+    size: 0.2,
+    billboard: true
+  })), showLabel && /*#__PURE__*/React.createElement(_Label["default"], {
+    position: labelOffset,
+    up: [0, 0, 1],
+    text: labelText,
+    animation: _util.billboard
+  }), children), helper &&
+  /*#__PURE__*/
+  // @ts-ignore: Property 'primitive' does not exist on type 'JSX.IntrinsicElements'
+  React.createElement("primitive", {
+    object: cameraHelper
+  }), /*#__PURE__*/React.createElement(CullCoverage, {
+    frustum: frustum,
+    cull: cull,
+    coverageColor: coverageColor,
+    coverageOpacity: coverageOpacity
+  }));
+};
+var CameraMemo = memo(Camera);
+CameraMemo.displayName = 'Camera';
+var _default = exports["default"] = CameraMemo;

package/lib/groups/Capsule.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { MeshProps } from "../primitives/Mesh";
+interface CapsuleProps extends MeshProps {
+    start?: Array<number>;
+    end?: Array<number>;
+    radius?: number;
+}
+declare const CapsuleMemo: React.NamedExoticComponent<CapsuleProps>;
+export default CapsuleMemo;

package/lib/groups/Capsule.js

@@ -0,0 +1,112 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var THREE = _interopRequireWildcard(require("three"));
+var _Group = _interopRequireWildcard(require("./Group"));
+var _Sphere = _interopRequireDefault(require("../primitives/Sphere"));
+var _Cylinder = _interopRequireDefault(require("../primitives/Cylinder"));
+var _excluded = ["start", "end", "radius", "color", "hoverColor", "children"]; // Capsule.tsx
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _construct(t, e, r) { if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); var o = [null]; o.push.apply(o, e); var p = new (t.bind.apply(t, o))(); return r && _setPrototypeOf(p, r.prototype), p; }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var useMemo = React.useMemo,
+  memo = React.memo;
+/**
+ * Capsule
+ *
+ * In Standard View, Capsule is a Group comprised of two Spheres and a Cylinder.
+ * The Sphere and Cylinder all have the same radius, radiusTop, and radiusBottom.
+ * The geometries are constructed with unit radii but these primitives are scaled
+ * according to the provided radius property. The start and end properties determine
+ * the centers of the bottom and top Spheres and also the start and end of the
+ * Cylinder.
+ * The position, scale, rotation, quaternion, and other Group properties are extracted
+ * and applied to the group.
+ *
+ * @param {CapsuleProps} props
+ */
+var Capsule = function Capsule(props) {
+  var _generateGroupProps = (0, _Group.generateGroupProps)(props),
+    cleanedProps = _generateGroupProps.cleanedProps,
+    groupProps = _generateGroupProps.groupProps;
+  var start = cleanedProps.start,
+    end = cleanedProps.end,
+    radius = cleanedProps.radius,
+    color = cleanedProps.color,
+    hoverColor = cleanedProps.hoverColor,
+    children = cleanedProps.children,
+    otherProps = _objectWithoutProperties(cleanedProps, _excluded);
+  var _position = groupProps.position;
+  var _useMemo = useMemo(function updateStartAndEnd() {
+      var _start = start;
+      var _end = end;
+
+      // Generate Start and End if not provided
+      if (_start == null || _end == null) {
+        if (_position) {
+          _start = [_position[0], _position[1] - 0.5, _position[2]];
+          _end = [_position[0], _position[1] + 0.5, _position[2]];
+        } else {
+          _start = [0, -0.5, 0];
+          _end = [0, 0.5, 0];
+        }
+      }
+
+      // Normalize start and end around center
+      // Let Group manage the position
+      var startVec = _construct(THREE.Vector3, _toConsumableArray(_start));
+      var endVec = _construct(THREE.Vector3, _toConsumableArray(_end));
+      var center = startVec.clone().add(endVec).multiplyScalar(0.5);
+      // Normalize around center
+      startVec.sub(center);
+      endVec.sub(center);
+      // Vector to Array
+      var startN = [startVec.x, startVec.y, startVec.z];
+      var endN = [endVec.x, endVec.y, endVec.z];
+      return {
+        startNorm: startN,
+        endNorm: endN,
+        centerVec: center
+      };
+    }, [start, end, _position]),
+    startNorm = _useMemo.startNorm,
+    endNorm = _useMemo.endNorm,
+    centerVec = _useMemo.centerVec;
+  groupProps.position = [centerVec.x, centerVec.y, centerVec.z];
+  var _radius = useMemo(function updateRadius() {
+    return radius || 1;
+  }, [radius]);
+  return /*#__PURE__*/React.createElement(_Group["default"], _extends({
+    color: color,
+    hoverColor: hoverColor
+  }, groupProps), /*#__PURE__*/React.createElement(_Sphere["default"], _extends({
+    radius: _radius,
+    position: startNorm
+  }, otherProps), children), /*#__PURE__*/React.createElement(_Cylinder["default"], _extends({
+    radius: _radius,
+    start: startNorm,
+    end: endNorm
+  }, otherProps), children), /*#__PURE__*/React.createElement(_Sphere["default"], _extends({
+    position: endNorm,
+    radius: _radius
+  }, otherProps), children));
+};
+var CapsuleMemo = memo(Capsule);
+CapsuleMemo.displayName = "Capsule";
+var _default = exports["default"] = CapsuleMemo;

package/lib/groups/FBX.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { GroupProps } from "./Group";
+interface FBXProps extends GroupProps {
+    fbxPath?: string;
+    fbxURL: string;
+    actionIndex?: number;
+}
+declare const FBXMemo: React.NamedExoticComponent<FBXProps>;
+export default FBXMemo;