@ifiwas/standard-view 2.0.0

package/lib/groups/OBJ.js

@@ -0,0 +1,252 @@
+"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 _OBJLoader = require("three/examples/jsm/loaders/OBJLoader");
+var _MTLLoader = require("three/examples/jsm/loaders/MTLLoader");
+var _Label = _interopRequireDefault(require("../primitives/Label"));
+var _Group = _interopRequireDefault(require("./Group"));
+var _hooks = require("../utils/hooks");
+var _excluded = ["color"],
+  _excluded2 = ["objPath", "objURL", "mtlPath", "mtlURL", "resourcePath", "view3DEnvMap", "castShadow", "receiveShadow"]; // OBJ.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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  useRef = React.useRef,
+  memo = React.memo;
+function loadOBJ(_ref) {
+  var group = _ref.group,
+    objPath = _ref.objPath,
+    objURL = _ref.objURL,
+    castShadow = _ref.castShadow,
+    receiveShadow = _ref.receiveShadow;
+  var loader = new _OBJLoader.OBJLoader();
+  loader.setPath(objPath);
+  loader.load(objURL, function (obj) {
+    // Remove Loading Label or Previous OBJ
+    if (group.current) {
+      if (group.current.children) {
+        group.current.children.map(function (child) {
+          return group.current.remove(child);
+        });
+      }
+
+      // Shadows
+      obj.traverse(function (mesh) {
+        /* eslint-disable no-param-reassign */
+        // @ts-ignore:TS2339 isMesh does not exist on Object3D
+        if (mesh.isMesh) {
+          mesh.castShadow = castShadow;
+          mesh.receiveShadow = receiveShadow;
+        }
+        /* eslint-enable no-param-reassign */
+      });
+
+      // Add OBJ
+      group.current.add(obj);
+    }
+  });
+}
+function loadOBJAndMTL(_ref2) {
+  var group = _ref2.group,
+    objPath = _ref2.objPath,
+    objURL = _ref2.objURL,
+    mtlPath = _ref2.mtlPath,
+    mtlURL = _ref2.mtlURL,
+    envMap = _ref2.envMap,
+    resourcePath = _ref2.resourcePath,
+    castShadow = _ref2.castShadow,
+    receiveShadow = _ref2.receiveShadow,
+    materialProps = _ref2.materialProps;
+  // No OBJ
+  if (objURL == null) {
+    /* eslint-disable-next-line no-console */
+    console.warn("[OBJ] No objURL");
+    return;
+  }
+
+  // OBJ
+  if (mtlPath == null || mtlURL == null) {
+    loadOBJ({
+      group: group,
+      objPath: objPath,
+      objURL: objURL,
+      castShadow: castShadow,
+      receiveShadow: receiveShadow
+    });
+    return;
+  }
+
+  // OBJ + MTL
+  var mtlLoader = new _MTLLoader.MTLLoader();
+  mtlLoader.setPath(mtlPath);
+  if (resourcePath) {
+    // @ts-ignore:TS2339 property setResourcePath does not exist in MTLLoader
+    mtlLoader.setResourcePath(resourcePath);
+  }
+  mtlLoader.load(mtlURL, function (mtl) {
+    mtl.preload();
+    var objLoader = new _OBJLoader.OBJLoader();
+    objLoader.setMaterials(mtl);
+    objLoader.setPath(objPath);
+    objLoader.load(objURL, function (obj) {
+      if (group.current) {
+        // Remove Loading Label or Previous OBJ
+        if (group.current.children) {
+          group.current.children.map(function (child) {
+            return group.current.remove(child);
+          });
+        }
+
+        // Material Props
+        if (materialProps && obj.children) {
+          var color = materialProps.color,
+            otherMaterialProps = _objectWithoutProperties(materialProps, _excluded);
+          // Set Material Props for Each Mesh in OBJ Group of Meshes
+          obj.children.map(function (mesh) {
+            // @ts-ignore:TS2339 material does not exist on Object3D
+            if (mesh.material) {
+              if (color) {
+                // @ts-ignore:TS2339 material does not exist on Object3D
+                mesh.material.color.set(color);
+              }
+              Object.entries(otherMaterialProps).map(function (_ref3) {
+                var _ref4 = _slicedToArray(_ref3, 2),
+                  propName = _ref4[0],
+                  value = _ref4[1];
+                /* eslint-disable no-param-reassign */
+                // @ts-ignore:TS2339 material does not exist on Object3D
+                mesh.material[propName] = value;
+                /* eslint-enable no-param-reassign */
+                return null;
+              });
+            }
+            return null;
+          });
+        }
+
+        // Env Map + Shadows
+        obj.traverse(function (mesh) {
+          /* eslint-disable no-param-reassign */
+          // @ts-ignore
+          if (mesh.isMesh) {
+            if (envMap) {
+              // @ts-ignore
+              mesh.material.envMap = envMap;
+            }
+            mesh.castShadow = castShadow;
+            mesh.receiveShadow = receiveShadow;
+          }
+          /* eslint-enable no-param-reassign */
+        });
+
+        // Add OBJ + MTL
+        group.current.add(obj);
+      }
+    });
+  });
+}
+
+/**
+ * OBJ
+ *
+ * This component may render a textured mesh from a .obj, .mtl, and corresponding set of
+ * image files. If mtlURL is not provided, only an untextured mesh from the .obj file
+ * will be rendered.
+ *
+ * resourcePath allows the texture files to located in a directory different from the
+ * mtlPath.
+ */
+var OBJ = function OBJ(_ref5) {
+  var _ref5$objPath = _ref5.objPath,
+    objPath = _ref5$objPath === void 0 ? "" : _ref5$objPath,
+    objURL = _ref5.objURL,
+    mtlPath = _ref5.mtlPath,
+    mtlURL = _ref5.mtlURL,
+    resourcePath = _ref5.resourcePath,
+    _ref5$view3DEnvMap = _ref5.view3DEnvMap,
+    view3DEnvMap = _ref5$view3DEnvMap === void 0 ? false : _ref5$view3DEnvMap,
+    _ref5$castShadow = _ref5.castShadow,
+    castShadow = _ref5$castShadow === void 0 ? false : _ref5$castShadow,
+    _ref5$receiveShadow = _ref5.receiveShadow,
+    receiveShadow = _ref5$receiveShadow === void 0 ? false : _ref5$receiveShadow,
+    otherProps = _objectWithoutProperties(_ref5, _excluded2);
+  var group = useRef(null);
+  var _useViewContext = (0, _hooks.useViewContext)(),
+    envMap = _useViewContext.envMap;
+
+  // Material Props
+  var materialProps = useMemo(function updateMaterialProps() {
+    // No Material Props
+    if (!otherProps || Object.keys(otherProps).length === 0) {
+      return undefined;
+    }
+
+    // Acceptable Material Props
+    var materialPropsKeys = ["color", "wireframe", "opacity", "transparent", "side", "depthWrite", "depthTest"];
+
+    // Extract Acceptable Props
+    var props = {};
+    materialPropsKeys.map(function (propName) {
+      if (otherProps[propName]) {
+        props[propName] = otherProps[propName];
+      }
+      return null;
+    });
+    return Object.keys(props).length > 0 ? props : undefined;
+  }, [otherProps]);
+
+  // Environment Map
+  var _envMap = useMemo(function updateEnvMap() {
+    if (view3DEnvMap) {
+      return envMap;
+    }
+    return null;
+  }, [view3DEnvMap, envMap]);
+
+  // Loading Text
+  var loadingText = useMemo(function updateLoadText() {
+    return objURL || "No objURL";
+  }, [objURL]);
+
+  // Load OBJ + MTL
+  useEffect(function updateOBJAndMTL() {
+    if (group) {
+      loadOBJAndMTL({
+        group: group,
+        objPath: objPath,
+        objURL: objURL,
+        mtlPath: mtlPath,
+        mtlURL: mtlURL,
+        envMap: _envMap,
+        resourcePath: resourcePath,
+        castShadow: castShadow,
+        receiveShadow: receiveShadow,
+        materialProps: materialProps
+      });
+    }
+  }, [objPath, objURL, mtlPath, mtlURL, resourcePath, _envMap, castShadow, receiveShadow, materialProps]);
+  return /*#__PURE__*/React.createElement(_Group["default"], _extends({
+    ref: group
+  }, otherProps), /*#__PURE__*/React.createElement(_Label["default"], {
+    text: loadingText,
+    textColor: "red"
+  }));
+};
+var OBJMemo = memo(OBJ);
+OBJMemo.displayName = "OBJ";
+var _default = exports["default"] = OBJMemo;

package/lib/groups/PCD.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { GroupProps } from "./Group";
+interface PCDProps extends GroupProps {
+    pcdPath: string;
+    pcdURL: string;
+    pointSize: number;
+}
+declare const PCDMemo: React.NamedExoticComponent<PCDProps>;
+export default PCDMemo;

package/lib/groups/PCD.js

@@ -0,0 +1,82 @@
+"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 _PCDLoader = require("three/examples/jsm/loaders/PCDLoader");
+var _Label = _interopRequireDefault(require("../primitives/Label"));
+var _Group = _interopRequireDefault(require("./Group"));
+var _excluded = ["pcdPath", "pcdURL", "pointSize"]; // PCD.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 _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 useRef = React.useRef,
+  useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  memo = React.memo;
+function loadPCD(/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+group, pcdPath, pcdURL, pointSize) {
+  // No PCD
+  if (pcdURL == null) {
+    /* eslint-disable-next-line no-console */
+    console.warn("[PCD] No pcdURL");
+  }
+
+  // PCD
+  var pcdLoader = new _PCDLoader.PCDLoader();
+  pcdLoader.setPath(pcdPath);
+  pcdLoader.load(pcdURL, function (pcd) {
+    if (group.current) {
+      // Remove Loading Label or Previous PCD
+      if (group.current.children) {
+        group.current.children.map(function (child) {
+          return group.current.remove(child);
+        });
+      }
+
+      // Material Props
+      if (pcd.material) {
+        /* eslint-disable no-param-reassign */
+        // @ts-ignore:TS2339 size does not exist
+        pcd.material.size = pointSize;
+        /* eslint-enable no-param-reassign */
+      }
+
+      // Add PCD
+      group.current.add(pcd);
+    }
+  });
+}
+var PCD = function PCD(_ref) {
+  var _ref$pcdPath = _ref.pcdPath,
+    pcdPath = _ref$pcdPath === void 0 ? "" : _ref$pcdPath,
+    pcdURL = _ref.pcdURL,
+    _ref$pointSize = _ref.pointSize,
+    pointSize = _ref$pointSize === void 0 ? 0.01 : _ref$pointSize,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var group = useRef(null);
+  var loadingText = useMemo(function updateLoadText() {
+    return pcdURL || "No pcdURL";
+  }, [pcdURL]);
+
+  // Load PCD
+  useEffect(function updatePCD() {
+    if (group) {
+      loadPCD(group, pcdPath, pcdURL, pointSize);
+    }
+  }, [group, pcdPath, pcdURL, pointSize]);
+  return /*#__PURE__*/React.createElement(_Group["default"], _extends({
+    ref: group
+  }, otherProps), /*#__PURE__*/React.createElement(_Label["default"], {
+    text: loadingText,
+    textColor: "red"
+  }));
+};
+var PCDMemo = memo(PCD);
+PCDMemo.displayName = "PCD";
+var _default = exports["default"] = PCDMemo;

package/lib/groups/Path.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { GroupProps } from "./Group";
+interface PathProps extends GroupProps {
+    points?: Array<Array<number>>;
+    frames?: Array<number>;
+    thickness?: number;
+    lineThickness?: number;
+    pointRadius?: number;
+    pointColor?: string;
+    lineColor?: string;
+    frame?: number;
+    point?: Array<number>;
+    lineProps?: any;
+    pointProps?: any;
+    textProps?: any;
+    enumerate?: boolean;
+}
+declare const PathMemo: React.NamedExoticComponent<PathProps>;
+export default PathMemo;

package/lib/groups/Path.js

@@ -0,0 +1,160 @@
+"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 _Group = _interopRequireWildcard(require("./Group"));
+var _primitives = require("../primitives");
+var _util = require("../utils/util");
+var _excluded = ["points", "frames", "thickness", "lineThickness", "pointRadius", "pointColor", "lineColor", "frame", "point", "enumerate"],
+  _excluded2 = ["color", "hoverColor", "lineProps", "pointProps", "textProps", "children"]; // Path.tsx
+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 _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 useRef = React.useRef,
+  useMemo = React.useMemo,
+  memo = React.memo;
+/**
+ * Path
+ *
+ * In Standard View, Path is a Group comprised of Spheres and Cylinders which
+ * update based on the array of points prop. Path will keep a hashset of
+ * frames and append a new point if frame and point props are both new and
+ * the frame number is greater than the last given frame. The new point will
+ * have a Cylinder connecting from the last given point in chronological by
+ * frame order, thus creating a chronological 3D path.
+ */
+var Path = function Path(_ref) {
+  var points = _ref.points,
+    frames = _ref.frames,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 0.1 : _ref$thickness,
+    lineThickness = _ref.lineThickness,
+    pointRadius = _ref.pointRadius,
+    pointColor = _ref.pointColor,
+    lineColor = _ref.lineColor,
+    frame = _ref.frame,
+    point = _ref.point,
+    _ref$enumerate = _ref.enumerate,
+    enumerate = _ref$enumerate === void 0 ? false : _ref$enumerate,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _generateGroupProps = (0, _Group.generateGroupProps)(otherProps),
+    cleanedProps = _generateGroupProps.cleanedProps,
+    groupProps = _generateGroupProps.groupProps;
+  var color = cleanedProps.color,
+    hoverColor = cleanedProps.hoverColor,
+    lineProps = cleanedProps.lineProps,
+    pointProps = cleanedProps.pointProps,
+    textProps = cleanedProps.textProps,
+    children = cleanedProps.children,
+    otherCleanedProps = _objectWithoutProperties(cleanedProps, _excluded2);
+  var _points = useRef([]);
+  useMemo(function updatePoints() {
+    // Add point
+    if (!points) {
+      // No point or frame
+      if (!point || !frame) {
+        return;
+      }
+
+      // Only add points for frames that do not already have a point
+      if (!_points.current[frame]) {
+        _points.current[frame] = point;
+      }
+      return;
+    }
+    var _frames = frames || Array.from(Array(points.length).keys());
+    // Validate Arrays
+    if (!Array.isArray(points) || !Array.isArray(_frames) || points.length !== _frames.length) {
+      console.warn("[Path] number of elements in frames must match number of elements in points. points.length (".concat(points && points.length, ") =/= frames.length (").concat(_frames && _frames.length, ")"));
+      return;
+    }
+
+    // Load _points
+    if (points.length <= _points.current.length) {
+      _points.current = _points.current.slice(0, points.length);
+    }
+
+    /* eslint-disable-next-line no-shadow */
+    _frames.map(function (frame, index) {
+      // frames number check
+      if (Number.isNaN(frame)) {
+        console.warn("[Path] frames must be Array<number>. frame[".concat(index, "] = ").concat(frame));
+        return null;
+      }
+
+      // points array check
+      if (!Array.isArray(points[index]) || points[index].length !== 3) {
+        console.warn("[Path] points must be Array<Array<number>> where each point has 3 number elements. points[".concat(index, "] = ").concat(points[index]));
+      }
+
+      // diff check
+      var prevPoint = _points.current[frame];
+      var newPoint = points[index];
+      if (!(0, _util.areArraysEqual)(prevPoint, newPoint)) {
+        _points.current[frame] = newPoint;
+      }
+      return null;
+    });
+  }, [points, frames, point, frame]);
+  var _pointRadius = useMemo(function updatePointRadius() {
+    return pointRadius || thickness;
+  }, [pointRadius, thickness]);
+  var _pointProps = useMemo(function updatePointProps() {
+    return pointProps != null ? pointProps : otherCleanedProps;
+  }, [pointProps, otherCleanedProps]);
+  var _lineProps = useMemo(function updateLineProps() {
+    return lineProps != null ? lineProps : otherCleanedProps;
+  }, [lineProps, otherCleanedProps]);
+  return /*#__PURE__*/React.createElement(_Group["default"], _extends({
+    color: color,
+    hoverColor: hoverColor
+  }, groupProps), _points.current.filter(function (p) {
+    return !!p;
+  })
+  /* eslint-disable-next-line no-shadow */.map(function (point, index) {
+    return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */React.createElement(_primitives.Sphere, _extends({
+      key: "Sphere".concat(index),
+      track: false,
+      position: point,
+      radius: _pointRadius,
+      color: pointColor
+    }, _pointProps), enumerate && /*#__PURE__*/React.createElement(_primitives.Text, _extends({
+      text: "".concat(index),
+      align: "bottom",
+      position: [0, 1.2, 0],
+      color: "white"
+    }, textProps)))
+    /* eslint-enable react/no-array-index-key */;
+  }), _points.current.filter(function (p) {
+    return !!p;
+  })
+  /* eslint-disable-next-line no-shadow */.map(function (point, index, points) {
+    // No Cylinder for first point
+    if (points.length <= 1) {
+      return null;
+    }
+
+    // No invalid points nor collapsed
+    var prevPoint = points[index - 1];
+    if (!Array.isArray(point) || point.length !== 3 || !Array.isArray(prevPoint) || prevPoint.length !== 3 || (0, _util.areArraysEqual)(point, prevPoint)) {
+      return null;
+    }
+    return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */React.createElement(_primitives.Cylinder, _extends({
+      key: "Cylinder".concat(index),
+      track: false,
+      start: points[index - 1],
+      end: point,
+      radius: lineThickness || thickness,
+      color: lineColor
+    }, _lineProps))
+    /* eslint-enable react/no-array-index-key */;
+  }), children);
+};
+var PathMemo = memo(Path);
+PathMemo.displayName = "Path";
+var _default = exports["default"] = PathMemo;

package/lib/groups/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Axis } from "./Axis";
+export { default as Arrow } from "./Arrow";
+export { default as Camera } from "./Camera";
+export { default as BoundingBox } from "./BoundingBox";
+export { default as Capsule } from "./Capsule";
+export { default as FBX } from "./FBX";
+export { default as GLTF } from "./GLTF";
+export { default as Group, generateGroupProps } from "./Group";
+export { default as OBJ } from "./OBJ";
+export { default as Path } from "./Path";
+export { default as PCD } from "./PCD";

package/lib/groups/index.js

@@ -0,0 +1,91 @@
+"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
+});
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function get() {
+    return _Arrow["default"];
+  }
+});
+Object.defineProperty(exports, "Axis", {
+  enumerable: true,
+  get: function get() {
+    return _Axis["default"];
+  }
+});
+Object.defineProperty(exports, "BoundingBox", {
+  enumerable: true,
+  get: function get() {
+    return _BoundingBox["default"];
+  }
+});
+Object.defineProperty(exports, "Camera", {
+  enumerable: true,
+  get: function get() {
+    return _Camera["default"];
+  }
+});
+Object.defineProperty(exports, "Capsule", {
+  enumerable: true,
+  get: function get() {
+    return _Capsule["default"];
+  }
+});
+Object.defineProperty(exports, "FBX", {
+  enumerable: true,
+  get: function get() {
+    return _FBX["default"];
+  }
+});
+Object.defineProperty(exports, "GLTF", {
+  enumerable: true,
+  get: function get() {
+    return _GLTF["default"];
+  }
+});
+Object.defineProperty(exports, "Group", {
+  enumerable: true,
+  get: function get() {
+    return _Group["default"];
+  }
+});
+Object.defineProperty(exports, "OBJ", {
+  enumerable: true,
+  get: function get() {
+    return _OBJ["default"];
+  }
+});
+Object.defineProperty(exports, "PCD", {
+  enumerable: true,
+  get: function get() {
+    return _PCD["default"];
+  }
+});
+Object.defineProperty(exports, "Path", {
+  enumerable: true,
+  get: function get() {
+    return _Path["default"];
+  }
+});
+Object.defineProperty(exports, "generateGroupProps", {
+  enumerable: true,
+  get: function get() {
+    return _Group.generateGroupProps;
+  }
+});
+var _Axis = _interopRequireDefault(require("./Axis"));
+var _Arrow = _interopRequireDefault(require("./Arrow"));
+var _Camera = _interopRequireDefault(require("./Camera"));
+var _BoundingBox = _interopRequireDefault(require("./BoundingBox"));
+var _Capsule = _interopRequireDefault(require("./Capsule"));
+var _FBX = _interopRequireDefault(require("./FBX"));
+var _GLTF = _interopRequireDefault(require("./GLTF"));
+var _Group = _interopRequireWildcard(require("./Group"));
+var _OBJ = _interopRequireDefault(require("./OBJ"));
+var _Path = _interopRequireDefault(require("./Path"));
+var _PCD = _interopRequireDefault(require("./PCD"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import { View3D } from "./views";
+import { Mesh, Box, Plane, Circle, Triangle, Quad, Sphere, Cylinder, Line, Text, Label, Polygon } from "./primitives";
+import { Arrow, Axis, BoundingBox, Camera, Capsule, FBX, GLTF, Group, OBJ, Path, PCD, generateGroupProps } from "./groups";
+import { AmbientLight, DirectionalLight, PointLight, RectAreaLight, HemisphereLight, SpotLight } from "./lights";
+import { FPS, useAnimationFrame, useFrame, useViewContext, billboard, Z_AXIS, Y_AXIS, X_AXIS, DEFAULT_UP_VEC3, DEFAULT_NORMAL_VEC3, DEFAULT_RIGHT_VEC3, DEFAULT_UP, DEFAULT_NORMAL, DEFAULT_RIGHT, SIDE_TYPES, CONTROLS_TYPES, CAMERA_TYPES } from "./utils";
+export { View3D, Group, Arrow, Axis, Capsule, Cylinder, FBX, GLTF, OBJ, PCD, Mesh, Box, Camera, Circle, Path, Plane, Polygon, Quad, Sphere, Triangle, Line, BoundingBox, Label, Text, AmbientLight, DirectionalLight, HemisphereLight, PointLight, RectAreaLight, SpotLight, useAnimationFrame, useFrame, useViewContext, Z_AXIS, Y_AXIS, X_AXIS, DEFAULT_UP_VEC3, DEFAULT_NORMAL_VEC3, DEFAULT_RIGHT_VEC3, DEFAULT_UP, DEFAULT_NORMAL, DEFAULT_RIGHT, SIDE_TYPES, CONTROLS_TYPES, CAMERA_TYPES, FPS, generateGroupProps, billboard };