@ifiwas/standard-view 2.0.0

package/lib/lights/LightWithShadows.js

@@ -0,0 +1,188 @@
+"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 _hooks = require("../utils/hooks");
+var _math = require("../utils/math");
+var _excluded = ["THREELight", "THREEHelper", "lightParams", "helperParams", "position", "target", "castShadow", "shadowCameraNear", "shadowCameraFar", "shadowMapWidth", "shadowMapHeight", "helper"]; // LightWithShadows.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 _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 useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  memo = React.memo;
+
+// -------------------------------------- //
+// -----   CommonLightWithShadows   ----- //
+// -------------------------------------- //
+
+// -------------------------------- //
+// -----   LightWithShadows   ----- //
+// -------------------------------- //
+
+/**
+ * LightWithShadows
+ *
+ * Similar to the Mesh component, the Light component is what most lights
+ * are under the hood.
+ *
+ * However, unlike Mesh--which actually boils down to a
+ * three.js Mesh component, Light does not boil down to any specific three.js
+ * component. Instead, Light is like an abstraction to reduce repetitive setup
+ * that is common to DirectionalLight, SpotLight, and PointLight.
+ *
+ * Technically, the specific three.js light constructor and helper constructor
+ * is passed in through the THREELight and THREEHelper props.
+ *
+ * Just as in three.js, Light is an abstract base class, in Standard View, Light
+ * is like an "abstract" base component.
+ */
+var LightWithShadows = function LightWithShadows(_ref) {
+  var THREELight = _ref.THREELight,
+    THREEHelper = _ref.THREEHelper,
+    lightParams = _ref.lightParams,
+    helperParams = _ref.helperParams,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? [0, 0, 1] : _ref$position,
+    target = _ref.target,
+    _ref$castShadow = _ref.castShadow,
+    castShadow = _ref$castShadow === void 0 ? false : _ref$castShadow,
+    _ref$shadowCameraNear = _ref.shadowCameraNear,
+    shadowCameraNear = _ref$shadowCameraNear === void 0 ? 0.1 : _ref$shadowCameraNear,
+    _ref$shadowCameraFar = _ref.shadowCameraFar,
+    shadowCameraFar = _ref$shadowCameraFar === void 0 ? 100 : _ref$shadowCameraFar,
+    _ref$shadowMapWidth = _ref.shadowMapWidth,
+    shadowMapWidth = _ref$shadowMapWidth === void 0 ? 1024 : _ref$shadowMapWidth,
+    _ref$shadowMapHeight = _ref.shadowMapHeight,
+    shadowMapHeight = _ref$shadowMapHeight === void 0 ? 1024 : _ref$shadowMapHeight,
+    _ref$helper = _ref.helper,
+    helper = _ref$helper === void 0 ? false : _ref$helper,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Light
+  var light = useMemo(function createLight() {
+    return _construct(THREELight, _toConsumableArray(lightParams));
+  }, [lightParams, THREELight]);
+
+  // Position
+  useEffect(function updatePosition() {
+    var _light$position;
+    // @ts-ignore:TS2569 spread
+    (_light$position = light.position).set.apply(_light$position, _toConsumableArray(position));
+  }, [light, position]);
+
+  // Target
+  var _useViewContext = (0, _hooks.useViewContext)(),
+    scene = _useViewContext.scene;
+  useEffect(function updateTarget() {
+    if (light.target && target) {
+      // light.target must be Object3D
+      if (Array.isArray(target)) {
+        var _light$target$positio;
+        (_light$target$positio = light.target.position).set.apply(_light$target$positio, _toConsumableArray(target));
+      }
+      scene.add(light.target);
+    }
+  }, [light, scene, target]);
+
+  // Check position overlap with target
+  useEffect(function checkPositionTarget() {
+    if (!light.target) {
+      return;
+    }
+
+    // Check position overlap target
+    var pos = position;
+    var tpos = light.target.position;
+    if (pos[0] === tpos.x && pos[1] === tpos.y && pos[2] === tpos.z) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[LightWithShadows] position and target cannot be the same!");
+
+      /* eslint-disable no-param-reassign */
+      position[2] += _math.EPS;
+      light.position.z += _math.EPS;
+      /* eslint-enable no-param-reassign */
+    }
+  }, [light, position, target]);
+
+  // Shadows
+  useEffect(function updateShadows() {
+    light.castShadow = castShadow;
+    light.shadow.camera.near = shadowCameraNear;
+    light.shadow.camera.far = shadowCameraFar;
+    light.shadow.mapSize.width = (0, _math.nextPowerOfTwo)(shadowMapWidth);
+    light.shadow.mapSize.height = (0, _math.nextPowerOfTwo)(shadowMapHeight);
+  }, [light, castShadow, shadowCameraNear, shadowCameraFar, shadowMapWidth, shadowMapHeight]);
+
+  // Helper Params
+  // Helper needs a reference to light as the first param.
+  var _helperParams = useMemo(function updateHelperParams() {
+    return [light].concat(_toConsumableArray(helperParams));
+  }, [light, helperParams]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("primitive", _extends({
+    object: light
+  }, otherProps)), helper && /*#__PURE__*/React.createElement(LightWithShadowsHelper, {
+    THREEHelper: THREEHelper,
+    helperParams: _helperParams,
+    helper: helper
+  }));
+};
+var LightWithShadowsMemo = memo(LightWithShadows);
+LightWithShadowsMemo.displayName = "LightWithShadows";
+var _default = exports["default"] = LightWithShadowsMemo; // -------------------------------------- //
+// -----   LightWithShadowsHelper   ----- //
+// -------------------------------------- //
+/**
+ * UpdateLightWithShadowsHelper
+ *
+ * Isolates the useFrame hook to avoid larger components, namely
+ * CreateLightHelper, from re-rendering up to 3 times--this is
+ * a bug from @react-three/fiber.
+ * Any @react-three/fiber hook call incurs additional renders.
+ */
+function UpdateLightWithShadowsHelper(_ref2) {
+  var helper = _ref2.helper,
+    lightHelper = _ref2.lightHelper;
+  (0, _hooks.useFrame)(function updateHelper() {
+    if (helper) {
+      lightHelper.update();
+    }
+  }, 2);
+  return null;
+}
+/**
+ * LightWithShadowsHelper
+ *
+ * Generates light helper object and also adds the update
+ * function in three.js's render loop.
+ */
+var LightWithShadowsHelper = function LightWithShadowsHelper(_ref3) {
+  var THREEHelper = _ref3.THREEHelper,
+    helperParams = _ref3.helperParams,
+    helper = _ref3.helper;
+  var lightHelper = useMemo(function updateTHREEHelper() {
+    return _construct(THREEHelper, _toConsumableArray(helperParams));
+  }, [helperParams, THREEHelper]);
+  if (!helper) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UpdateLightWithShadowsHelper, {
+    helper: helper,
+    lightHelper: lightHelper
+  }), /*#__PURE__*/React.createElement("primitive", {
+    object: lightHelper
+  }));
+};

package/lib/lights/PointLight.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { CommonLightWithShadowsProps } from "./LightWithShadows";
+interface PointLightProps extends CommonLightWithShadowsProps {
+    distance?: number;
+    decay?: number;
+    helperSize?: number;
+}
+declare const PointLightMemo: React.NamedExoticComponent<PointLightProps>;
+export default PointLightMemo;

package/lib/lights/PointLight.js

@@ -0,0 +1,47 @@
+"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 _LightWithShadows = _interopRequireDefault(require("./LightWithShadows"));
+var _excluded = ["color", "intensity", "distance", "decay", "helperSize", "helperColor"]; // PointLight.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 useMemo = React.useMemo,
+  memo = React.memo;
+var PointLight = function PointLight(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "white" : _ref$color,
+    _ref$intensity = _ref.intensity,
+    intensity = _ref$intensity === void 0 ? 1 : _ref$intensity,
+    _ref$distance = _ref.distance,
+    distance = _ref$distance === void 0 ? 0 : _ref$distance,
+    _ref$decay = _ref.decay,
+    decay = _ref$decay === void 0 ? 1 : _ref$decay,
+    _ref$helperSize = _ref.helperSize,
+    helperSize = _ref$helperSize === void 0 ? 1 : _ref$helperSize,
+    helperColor = _ref.helperColor,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var lightParams = useMemo(function updateLightParams() {
+    return [color, intensity, distance, decay];
+  }, [color, intensity, distance, decay]);
+  var helperParams = useMemo(function updateHelperParams() {
+    return [helperSize, helperColor || color];
+  }, [helperSize, helperColor, color]);
+  return /*#__PURE__*/React.createElement(_LightWithShadows["default"], _extends({
+    THREELight: THREE.PointLight,
+    THREEHelper: THREE.PointLightHelper,
+    lightParams: lightParams,
+    helperParams: helperParams
+  }, otherProps));
+};
+var PointLightMemo = memo(PointLight);
+PointLightMemo.displayName = "PointLight";
+var _default = exports["default"] = PointLightMemo;

package/lib/lights/RectAreaLight.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface RectAreaLightProps {
+    position?: Array<number>;
+    intensity?: number;
+    color?: string;
+    target?: Array<number>;
+    width?: number;
+    height?: number;
+    helper?: boolean;
+    helperColor?: string;
+}
+declare const RectAreaLightMemo: React.NamedExoticComponent<RectAreaLightProps>;
+export default RectAreaLightMemo;

package/lib/lights/RectAreaLight.js

@@ -0,0 +1,177 @@
+"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 _Plane = _interopRequireDefault(require("../primitives/Plane"));
+var _Cylinder = _interopRequireDefault(require("../primitives/Cylinder"));
+var _math = require("../utils/math");
+var _excluded = ["position", "target", "color", "intensity", "width", "height", "helper", "helperColor"];
+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; }
+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; } // RectAreaLight.tsx
+var useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  memo = React.memo;
+/**
+ * RectAreaLightHelper
+ *
+ * During a re-render, @react-three/fiber's reconciler executes a switchInstance
+ * function if a component has new arguments. This switchInstance basically creates
+ * a newInstance with the new arguments and removes old instance.
+ *
+ * The old instance of the component is removed via a removeChild function which
+ * also invokes a removeRecursive function that also removes children of the child,
+ * recursively. This ensures all nested children are removed.
+ *
+ * Unfortunately, @react-three/fiber's removeChild function first removes the child,
+ * then recursively removes its children, and then checks if the child has a
+ * dispose function and calls it--which allows for three.js cleanup code to execute
+ * upon removal, and finally deletes the reference.
+ *
+ * Due to this order of remove, recursively remove, dispose, and delete,
+ * an invalid reference crash occurs.
+ *
+ * This bug is due to the fact that three.js normally stores the geometry and material
+ * of a Mesh/Object3D in class variables named geometry and material.
+ * However, for RectAreaLightHelper, the Line's (outlining the plane of the helper) has
+ * its geometry and material stored in variables of those names, but another Mesh (of
+ * the quad) is stored as a child.
+ *
+ * Normally this is fine, since all children are recursively removed by @react-three/fiber,
+ * but unfortunatley, RectAreaLightHelper's dispose function spefically calls:
+ *    this.children[0].geometry.dispose()
+ *    this.children[0].material.dispose()
+ * refering to the quad mesh as `this.children[0]`. By the time RectAreaLightHelper's
+ * dispose function is called, @react-three/fiber has already recursively removed the
+ * children, hence this.childern is an empty array, resulting in an array reference crash.
+ *
+ * For other light helpers, the geometry and material are not stored in the children
+ * property of the helper, but just in the named variables such as
+ *    PointLight: `geometry`, `material`,
+ *    SpotLight: `cone.geometry`, `cone.material`,
+ *    DirectionalLight:   `lightPlane.geometry`, `lightPlane.material`,
+ *                        `targetLine.geometry`, `targetLine.material`,
+ * and those helpers' dispose function does not reference any children.
+ *
+ * Therefore, THREE.RectAreaLightHelper / rectAreaLightHelper cannot safely re-render
+ * through @react-three/fiber's reconciler.
+ *
+ * This is the custom RectAreaLightHelper.
+ */
+function RectAreaLightHelper(_ref) {
+  var position = _ref.position,
+    target = _ref.target,
+    width = _ref.width,
+    height = _ref.height,
+    helperColor = _ref.helperColor;
+  var dist = useMemo(function updateDist() {
+    var posVec = _construct(THREE.Vector3, _toConsumableArray(position));
+    var targetVec = _construct(THREE.Vector3, _toConsumableArray(target));
+    return posVec.distanceTo(targetVec);
+  }, [position, target]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Plane["default"], {
+    scale: [width, height, 1],
+    color: helperColor,
+    side: THREE.FrontSide,
+    wireframe: true
+  }), /*#__PURE__*/React.createElement(_Plane["default"], {
+    scale: [width, height, 1],
+    color: helperColor,
+    side: THREE.BackSide
+  }), /*#__PURE__*/React.createElement(_Cylinder["default"], {
+    start: [0, 0, 0],
+    end: [0, 0, -dist],
+    radius: 0.02,
+    color: helperColor
+  }));
+}
+/**
+ * RectAreaLight
+ */
+var RectAreaLight = function RectAreaLight(_ref2) {
+  var _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? [0, 10, 0] : _ref2$position,
+    _ref2$target = _ref2.target,
+    target = _ref2$target === void 0 ? [0, 0, 0] : _ref2$target,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? "white" : _ref2$color,
+    _ref2$intensity = _ref2.intensity,
+    intensity = _ref2$intensity === void 0 ? 1 : _ref2$intensity,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 1 : _ref2$width,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 1 : _ref2$height,
+    _ref2$helper = _ref2.helper,
+    helper = _ref2$helper === void 0 ? false : _ref2$helper,
+    helperColor = _ref2.helperColor,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  var _helperColor = useMemo(function updateHelperColor() {
+    return helperColor || color;
+  }, [helperColor, color]);
+  var _useMemo = useMemo(function updateDimensions() {
+      return {
+        _width: Math.max(width, _math.EPS),
+        _height: Math.max(height, _math.EPS)
+      };
+    }, [width, height]),
+    _width = _useMemo._width,
+    _height = _useMemo._height;
+  var light = useMemo(function createLight() {
+    return new THREE.RectAreaLight(color, intensity, _width, _height);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, []);
+  var helperProps = useMemo(function updateHelperProps() {
+    return {
+      position: position,
+      target: target,
+      width: _width,
+      height: _height,
+      helperColor: _helperColor
+    };
+  }, [position, target, _width, _height, _helperColor]);
+  useEffect(function updateColor() {
+    light.color.set(color);
+  }, [light, color]);
+  useEffect(function updateIntensity() {
+    light.intensity = intensity;
+  }, [light, intensity]);
+  useEffect(function updateDimensions() {
+    light.width = _width;
+    light.height = _height;
+  }, [light, _width, _height]);
+  useEffect(function updatePosition() {
+    var _light$position;
+    // @ts-ignore:TS2556 // sphread
+    (_light$position = light.position).set.apply(_light$position, _toConsumableArray(position));
+  }, [light, position]);
+  useEffect(function updateTarget() {
+    // @ts-ignore:TS2556 spread
+    light.lookAt.apply(light, _toConsumableArray(target));
+  }, [light, target]);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore:2339 property primitive does not exist
+    React.createElement("primitive", _extends({
+      object: light
+    }, otherProps), helper && /*#__PURE__*/React.createElement(RectAreaLightHelper, helperProps))
+  );
+};
+var RectAreaLightMemo = memo(RectAreaLight);
+RectAreaLightMemo.displayName = "RectAreaLight";
+var _default = exports["default"] = RectAreaLightMemo;

package/lib/lights/SpotLight.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { CommonLightWithShadowsProps } from "./LightWithShadows";
+interface SpotLightProps extends CommonLightWithShadowsProps {
+    distance?: number;
+    decay?: number;
+    angle?: number;
+    penumbra?: number;
+}
+declare const SpotLightMemo: React.NamedExoticComponent<SpotLightProps>;
+export default SpotLightMemo;

package/lib/lights/SpotLight.js

@@ -0,0 +1,49 @@
+"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 _LightWithShadows = _interopRequireDefault(require("./LightWithShadows"));
+var _excluded = ["color", "intensity", "distance", "decay", "angle", "penumbra", "helperColor"]; // SpotLight.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 useMemo = React.useMemo,
+  memo = React.memo;
+var SpotLight = function SpotLight(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "white" : _ref$color,
+    _ref$intensity = _ref.intensity,
+    intensity = _ref$intensity === void 0 ? 1 : _ref$intensity,
+    _ref$distance = _ref.distance,
+    distance = _ref$distance === void 0 ? 0 : _ref$distance,
+    _ref$decay = _ref.decay,
+    decay = _ref$decay === void 0 ? 1 : _ref$decay,
+    _ref$angle = _ref.angle,
+    angle = _ref$angle === void 0 ? Math.PI * 0.333 : _ref$angle,
+    _ref$penumbra = _ref.penumbra,
+    penumbra = _ref$penumbra === void 0 ? 0 : _ref$penumbra,
+    helperColor = _ref.helperColor,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var lightParams = useMemo(function updateLightParams() {
+    return [color, intensity, distance, angle, penumbra, decay];
+  }, [color, intensity, distance, angle, penumbra, decay]);
+  var helperParams = useMemo(function updateHelperParams() {
+    return [helperColor || color];
+  }, [helperColor, color]);
+  return /*#__PURE__*/React.createElement(_LightWithShadows["default"], _extends({
+    THREELight: THREE.SpotLight,
+    THREEHelper: THREE.SpotLightHelper,
+    lightParams: lightParams,
+    helperParams: helperParams
+  }, otherProps));
+};
+var SpotLightMemo = memo(SpotLight);
+SpotLightMemo.displayName = "SpotLight";
+var _default = exports["default"] = SpotLightMemo;

package/lib/lights/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AmbientLight } from "./AmbientLight";
+export { default as DirectionalLight } from "./DirectionalLight";
+export { default as HemisphereLight } from "./HemisphereLight";
+export { default as PointLight } from "./PointLight";
+export { default as RectAreaLight } from "./RectAreaLight";
+export { default as SpotLight } from "./SpotLight";

package/lib/lights/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AmbientLight", {
+  enumerable: true,
+  get: function get() {
+    return _AmbientLight["default"];
+  }
+});
+Object.defineProperty(exports, "DirectionalLight", {
+  enumerable: true,
+  get: function get() {
+    return _DirectionalLight["default"];
+  }
+});
+Object.defineProperty(exports, "HemisphereLight", {
+  enumerable: true,
+  get: function get() {
+    return _HemisphereLight["default"];
+  }
+});
+Object.defineProperty(exports, "PointLight", {
+  enumerable: true,
+  get: function get() {
+    return _PointLight["default"];
+  }
+});
+Object.defineProperty(exports, "RectAreaLight", {
+  enumerable: true,
+  get: function get() {
+    return _RectAreaLight["default"];
+  }
+});
+Object.defineProperty(exports, "SpotLight", {
+  enumerable: true,
+  get: function get() {
+    return _SpotLight["default"];
+  }
+});
+var _AmbientLight = _interopRequireDefault(require("./AmbientLight"));
+var _DirectionalLight = _interopRequireDefault(require("./DirectionalLight"));
+var _HemisphereLight = _interopRequireDefault(require("./HemisphereLight"));
+var _PointLight = _interopRequireDefault(require("./PointLight"));
+var _RectAreaLight = _interopRequireDefault(require("./RectAreaLight"));
+var _SpotLight = _interopRequireDefault(require("./SpotLight"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/lib/primitives/Box.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { MeshProps } from "./Mesh";
+interface BoxProps extends MeshProps {
+}
+declare const BoxMemo: React.NamedExoticComponent<BoxProps>;
+export default BoxMemo;

package/lib/primitives/Box.js

@@ -0,0 +1,43 @@
+"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 = ["children"]; // Box.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 useMemo = React.useMemo,
+  memo = React.memo;
+
+/* eslint-disable @typescript-eslint/no-empty-interface */
+
+/**
+ * Box
+ *
+ * Nothing particularly special about boxes. All the properties of
+ * Meshes can be applied and will be passed into the Box's Mesh.
+ *
+ * @param {BoxProps} props
+ */
+var Box = function Box(_ref) {
+  var children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Box Buffer Geometry
+  var geometry = useMemo(function initGeometry() {
+    return new THREE.BoxGeometry(1, 1, 1);
+  }, []);
+  return /*#__PURE__*/React.createElement(_Mesh["default"], _extends({
+    geometry: geometry
+  }, otherProps), children);
+};
+var BoxMemo = memo(Box);
+BoxMemo.displayName = "Box";
+var _default = exports["default"] = BoxMemo;

package/lib/primitives/Circle.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { MeshProps } from "./Mesh";
+interface CircleProps extends MeshProps {
+    radius?: number;
+    segments?: number;
+    thetaStart?: number;
+    thetaLength?: number;
+}
+declare const CircleMemo: React.NamedExoticComponent<CircleProps>;
+export default CircleMemo;