@ifiwas/standard-view 2.0.0

package/lib/primitives/Text.js

@@ -0,0 +1,285 @@
+"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 _TextGeometry = require("three/examples/jsm/geometries/TextGeometry.js");
+var _FontLoader = require("three/examples/jsm/loaders/FontLoader.js");
+var _Mesh = _interopRequireDefault(require("./Mesh"));
+var _util = require("../utils/util");
+var _hooks = require("../utils/hooks");
+var _excluded = ["text", "fontName", "fontFile", "size", "depth", "align", "curveSegments", "bevelEnabled", "bevelThickness", "bevelSize", "bevelOffset", "bevelSegments", "billboard", "children"];
+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 _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { if (r) i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n;else { var o = function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); }; o("next", 0), o("throw", 1), o("return", 2); } }, _regeneratorDefine2(e, r, n, 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 _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 _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 _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; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } // Text.tsx
+var useRef = React.useRef,
+  useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  memo = React.memo;
+
+// Available Fonts
+var FONT_SOURCE = 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/';
+var FONTS = {
+  helvetiker: {
+    name: 'helvetiker_regular',
+    typeface: null,
+    threeFont: null
+  },
+  helvetikerBold: {
+    name: 'helvetiker_bold',
+    typeface: null,
+    threeFont: null
+  },
+  optimer: {
+    name: 'optimer_regular',
+    typeface: null,
+    threeFont: null
+  },
+  optimerBold: {
+    name: 'optimer_bold',
+    typeface: null,
+    threeFont: null
+  },
+  gentilis: {
+    name: 'gentilis_regular',
+    typeface: null,
+    threeFont: null
+  },
+  gentilisBold: {
+    name: 'gentilis_bold',
+    typeface: null,
+    threeFont: null
+  }
+};
+/**
+ * getFont
+ * Async Font File Fetcher
+ * Font is cached and Text component is reloaded after font is acquired.
+ */
+function getFont(_x) {
+  return _getFont.apply(this, arguments);
+}
+function _getFont() {
+  _getFont = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
+    var url, cacheFont, loadFont;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          url = _ref.url, cacheFont = _ref.cacheFont, loadFont = _ref.loadFont;
+          fetch(url).then(function (res) {
+            return res.json();
+          }).then(function (data) {
+            cacheFont(data);
+            loadFont();
+          })["catch"](function () {
+            return console.warn("[Text] Font not found from path: ".concat(url));
+          });
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return _getFont.apply(this, arguments);
+}
+/**
+ * Text
+ *
+ * Text is also composed within a Mesh. The 3D text is actually a set
+ * of extrusions handled by @react-three/fiber/three.js's textGeometry.
+ * Materials are defaulted to meshBasicMaterials and accept the same
+ * properties.
+ *
+ * Standard View supports loading the default fonts provided in three.js's examples,
+ * helvetiker, optimer, and gentilis, as well as their bold version.
+ * Passing a string fontName property will automatically load that font.
+ * The loading is asynchronous as the font files are fetched from three's git repo.
+ *
+ * Other typeface.json fonts may also be loaded either from public/assets
+ * or from url with fontFile
+ *
+ * Size is in the same 3D units as for all 3D Objects.
+ *
+ * @param {TextProps} props
+ */
+var Text = function Text(_ref2) {
+  var _ref2$text = _ref2.text,
+    text = _ref2$text === void 0 ? 'Text' : _ref2$text,
+    _ref2$fontName = _ref2.fontName,
+    fontName = _ref2$fontName === void 0 ? 'helvetiker' : _ref2$fontName,
+    fontFile = _ref2.fontFile,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 1 : _ref2$size,
+    _ref2$depth = _ref2.depth,
+    depth = _ref2$depth === void 0 ? 0.01 : _ref2$depth,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? 'bottom-left' : _ref2$align,
+    _ref2$curveSegments = _ref2.curveSegments,
+    curveSegments = _ref2$curveSegments === void 0 ? 12 : _ref2$curveSegments,
+    _ref2$bevelEnabled = _ref2.bevelEnabled,
+    bevelEnabled = _ref2$bevelEnabled === void 0 ? false : _ref2$bevelEnabled,
+    _ref2$bevelThickness = _ref2.bevelThickness,
+    bevelThickness = _ref2$bevelThickness === void 0 ? 10 : _ref2$bevelThickness,
+    _ref2$bevelSize = _ref2.bevelSize,
+    bevelSize = _ref2$bevelSize === void 0 ? 8 : _ref2$bevelSize,
+    _ref2$bevelOffset = _ref2.bevelOffset,
+    bevelOffset = _ref2$bevelOffset === void 0 ? 0 : _ref2$bevelOffset,
+    _ref2$bevelSegments = _ref2.bevelSegments,
+    bevelSegments = _ref2$bevelSegments === void 0 ? 3 : _ref2$bevelSegments,
+    _ref2$billboard = _ref2.billboard,
+    billboard = _ref2$billboard === void 0 ? false : _ref2$billboard,
+    children = _ref2.children,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  // height is deprecated, using depth instead
+  var height = otherProps.height;
+  if (height) {
+    console.warn('[Text] height is deprecated, using depth instead');
+    depth = height;
+  }
+
+  // Loaded Flag
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  var _useToggle = (0, _hooks.useToggle)(false),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    _ = _useToggle2[0],
+    loadFont = _useToggle2[1];
+
+  // Font Name or Font File
+  var _fontName = useMemo(function updateFontName() {
+    // Default Font Name
+    var name = 'helvetiker';
+    if (fontFile) {
+      // Font File
+      name = fontFile;
+
+      // File is not cached
+      if (FONTS[name] == null) {
+        FONTS[name] = {
+          name: name,
+          typeface: null,
+          threeFont: null
+        };
+      }
+    } else if (Object.keys(FONTS).includes(fontName)) {
+      // Font Name
+      name = fontName;
+    }
+    return name;
+  }, [fontName, fontFile]);
+
+  // FONTS cache check
+  var _loaded = FONTS[_fontName].typeface != null;
+
+  // Async Load Font
+  if (!_loaded) {
+    var url = fontFile || "".concat(FONT_SOURCE).concat(FONTS[_fontName].name, ".typeface.json");
+    var cacheFont = function cacheFont(data) {
+      FONTS[_fontName].typeface = data;
+    };
+    getFont({
+      url: url,
+      cacheFont: cacheFont,
+      loadFont: loadFont
+    });
+  }
+
+  // Font
+  var font = useMemo(function updateFont() {
+    // Font Not Yet Loaded
+    if (!_loaded) {
+      return undefined;
+    }
+
+    // Load threeFont from FONTS cache
+    if (FONTS[_fontName].threeFont != null) {
+      return FONTS[_fontName].threeFont;
+    }
+
+    // Generate and cache threeFont
+    FONTS[_fontName].threeFont = new _FontLoader.Font(FONTS[_fontName].typeface);
+    return FONTS[_fontName].threeFont;
+  }, [_loaded, _fontName]);
+
+  // Text Geometry
+  var prevAlign = useRef(align);
+  var textGeometry = useMemo(function updateTextGeometry() {
+    // Font Not Yet Loaded
+    if (!_loaded) {
+      return undefined;
+    }
+    var fontParams = {
+      font: font,
+      size: size,
+      depth: depth,
+      curveSegments: curveSegments,
+      bevelEnabled: bevelEnabled,
+      bevelThickness: bevelThickness,
+      bevelSize: bevelSize,
+      bevelOffset: bevelOffset,
+      bevelSegments: bevelSegments
+    };
+
+    // TextBufferGeometry cannot be modified after instantiation
+    // Must be recreated
+    var geometry = new _TextGeometry.TextGeometry(text, fontParams);
+    geometry.computeBoundingBox();
+
+    // Reset Alignment
+    var boundingBox = geometry.boundingBox;
+    var max = boundingBox ? boundingBox.max : new THREE.Vector3(0, 0, 0);
+    var min = boundingBox ? boundingBox.min : new THREE.Vector3(0, 0, 0);
+    var diagonalVec = max.clone().sub(min);
+    var diagonal = [diagonalVec.x, diagonalVec.y, diagonalVec.z];
+    var alignmentOffset = (0, _util.getAlignmentOffset)('bottom-left', prevAlign.current, diagonal);
+
+    // @ts-ignore:TS2556 // spread
+    geometry.translate.apply(geometry, _toConsumableArray(alignmentOffset));
+    return geometry;
+  }, [_loaded, text, font, size, depth, curveSegments, bevelEnabled, bevelThickness, bevelSize, bevelOffset, bevelSegments]);
+
+  // Align
+  useEffect(function updateAlignment() {
+    // Font Not Yet Loaded
+    if (!_loaded || textGeometry === undefined) {
+      return;
+    }
+    var boundingBox = textGeometry.boundingBox;
+    var max = boundingBox ? boundingBox.max : new THREE.Vector3(0, 0, 0);
+    var min = boundingBox ? boundingBox.min : new THREE.Vector3(0, 0, 0);
+    var diagonalVec = max.clone().sub(min);
+    var diagonal = [diagonalVec.x, diagonalVec.y, diagonalVec.z];
+
+    // Align
+    var alignmentOffset = (0, _util.getAlignmentOffset)(prevAlign.current, align, diagonal);
+    // @ts-ignore:TS2556 // spread
+    textGeometry.translate.apply(textGeometry, _toConsumableArray(alignmentOffset));
+    prevAlign.current = align;
+  }, [_loaded, textGeometry, align]);
+  return /*#__PURE__*/React.createElement(_Mesh["default"], _extends({
+    visible: _loaded,
+    geometry: textGeometry,
+    animation: billboard ? _util.billboard : undefined
+  }, otherProps), children);
+};
+var TextMemo = memo(Text);
+TextMemo.displayName = 'Text';
+var _default = exports["default"] = TextMemo;

package/lib/primitives/Triangle.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { MeshProps } from "./Mesh";
+interface TriangleProps extends MeshProps {
+    points?: Array<Array<number>>;
+    indices?: Array<Array<number>>;
+}
+declare const TriangleMemo: React.NamedExoticComponent<TriangleProps>;
+export default TriangleMemo;

package/lib/primitives/Triangle.js

@@ -0,0 +1,83 @@
+"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 _Mesh = _interopRequireDefault(require("./Mesh"));
+var _excluded = ["points", "indices", "side", "children"]; // Triangle.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 _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 useRef = React.useRef,
+  useEffect = React.useEffect,
+  memo = React.memo;
+/**
+ * Triangle
+ *
+ * In Standard View, Triangle actually composes a THREE.BufferGeometry.
+ * By default the indices assume the order of the points passed in,
+ * however, particular indices may also be provided. The BufferGeometry
+ * can also handle more than 3 vertices and virtually any polygon may be
+ * constructed by providing all the vertices and sets of triangle indices.
+ * Like most other 3D objects, this is also composed with Mesh and so all
+ * Mesh properties may be applied.
+ *
+ * @param {TriangleProps} props
+ */
+var Triangle = function Triangle(_ref) {
+  var _ref$points = _ref.points,
+    points = _ref$points === void 0 ? [[0, 0, 0], [1, 0, 0], [0, 1, 0]] : _ref$points,
+    _ref$indices = _ref.indices,
+    indices = _ref$indices === void 0 ? [[0, 1, 2]] : _ref$indices,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "double" : _ref$side,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Buffer Geometry of Triangles
+  var geometry = useRef(new THREE.BufferGeometry());
+  useEffect(function updateVertices() {
+    var vertices = [];
+    // @ts-ignore:T2345 // spread
+    points.map(function (point) {
+      return vertices.push.apply(vertices, _toConsumableArray(point));
+    });
+
+    // Remove Old Points
+    geometry.current.deleteAttribute("position");
+    // Add New Points
+    geometry.current.setAttribute("position", new THREE.BufferAttribute(new Float32Array(vertices), 3));
+  }, [geometry, points]);
+
+  // Indices are triplets indicating the index of vertices
+  // that make a triangle.
+  // Format Indices into One Array of [t1,t1,t1, t2,t2,t2 ...]
+  useEffect(function updateIndices() {
+    var _indices = [];
+    // @ts-ignore:T2345 // spread
+    indices.map(function (triangle) {
+      return _indices.push.apply(_indices, _toConsumableArray(triangle));
+    });
+
+    // Replace Indices
+    geometry.current.setIndex(new THREE.BufferAttribute(new Uint32Array(_indices), 1));
+  }, [geometry, indices]);
+  return /*#__PURE__*/React.createElement(_Mesh["default"], _extends({
+    geometry: geometry.current,
+    side: side
+  }, otherProps), children);
+};
+var TriangleMemo = memo(Triangle);
+TriangleMemo.displayName = "Triangle";
+var _default = exports["default"] = TriangleMemo;

package/lib/primitives/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Box } from "./Box";
+export { default as Circle } from "./Circle";
+export { default as Cylinder } from "./Cylinder";
+export { default as Label } from "./Label";
+export { default as Line } from "./Line";
+export { default as Mesh } from "./Mesh";
+export { default as Plane } from "./Plane";
+export { default as Quad } from "./Quad";
+export { default as Sphere } from "./Sphere";
+export { default as Text } from "./Text";
+export { default as Triangle } from "./Triangle";
+export { default as Polygon } from "./Polygon";

package/lib/primitives/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function get() {
+    return _Box["default"];
+  }
+});
+Object.defineProperty(exports, "Circle", {
+  enumerable: true,
+  get: function get() {
+    return _Circle["default"];
+  }
+});
+Object.defineProperty(exports, "Cylinder", {
+  enumerable: true,
+  get: function get() {
+    return _Cylinder["default"];
+  }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _Label["default"];
+  }
+});
+Object.defineProperty(exports, "Line", {
+  enumerable: true,
+  get: function get() {
+    return _Line["default"];
+  }
+});
+Object.defineProperty(exports, "Mesh", {
+  enumerable: true,
+  get: function get() {
+    return _Mesh["default"];
+  }
+});
+Object.defineProperty(exports, "Plane", {
+  enumerable: true,
+  get: function get() {
+    return _Plane["default"];
+  }
+});
+Object.defineProperty(exports, "Polygon", {
+  enumerable: true,
+  get: function get() {
+    return _Polygon["default"];
+  }
+});
+Object.defineProperty(exports, "Quad", {
+  enumerable: true,
+  get: function get() {
+    return _Quad["default"];
+  }
+});
+Object.defineProperty(exports, "Sphere", {
+  enumerable: true,
+  get: function get() {
+    return _Sphere["default"];
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _Text["default"];
+  }
+});
+Object.defineProperty(exports, "Triangle", {
+  enumerable: true,
+  get: function get() {
+    return _Triangle["default"];
+  }
+});
+var _Box = _interopRequireDefault(require("./Box"));
+var _Circle = _interopRequireDefault(require("./Circle"));
+var _Cylinder = _interopRequireDefault(require("./Cylinder"));
+var _Label = _interopRequireDefault(require("./Label"));
+var _Line = _interopRequireDefault(require("./Line"));
+var _Mesh = _interopRequireDefault(require("./Mesh"));
+var _Plane = _interopRequireDefault(require("./Plane"));
+var _Quad = _interopRequireDefault(require("./Quad"));
+var _Sphere = _interopRequireDefault(require("./Sphere"));
+var _Text = _interopRequireDefault(require("./Text"));
+var _Triangle = _interopRequireDefault(require("./Triangle"));
+var _Polygon = _interopRequireDefault(require("./Polygon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/lib/shaders/index.js

@@ -0,0 +1,2 @@
+// shaders/index.tsx
+"use strict";

package/lib/types/three-jsx.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});