@ifiwas/standard-view 2.0.0

package/lib/primitives/Mesh.js

@@ -0,0 +1,642 @@
+"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 _styles = require("../utils/styles");
+var _constants = require("../utils/constants");
+var _math = require("../utils/math");
+var _events = require("../utils/events");
+var _hooks = require("../utils/hooks");
+var _util = require("../utils/util");
+var _performance = require("../utils/performance");
+var _excluded = ["geometry", "position", "scale", "rotation", "eulerOrder", "normal", "roll", "quaternion", "material", "materialType", "color", "hoverColor", "opacity", "transparent", "roughness", "metalness", "reflectivity", "texturePath", "textureURL", "map", "aoMap", "aoMapIntensity", "bumpMap", "bumpScale", "normalMap", "normalMapType", "normalMapScale", "displacementMap", "displacementMapScale", "displacementBias", "roughnessMap", "metalnessMap", "alphaMap", "envMap", "envMapIntensity", "view3DEnvMap", "wireframe", "side", "depthWrite", "depthTest", "anisotropy", "groupMember", "onClick", "onDoubleClick", "onWheel", "onPointerUp", "onPointerDown", "onPointerOver", "onPointerOut", "onPointerMove", "hoverable", "mousePropagation", "clickSensitivity", "ignoreMouseEvents", "receiveShadow", "animation", "state", "children"],
+  _excluded2 = ["envMap"]; // Mesh.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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 _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 _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 useState = React.useState,
+  useRef = React.useRef,
+  useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  useCallback = React.useCallback,
+  forwardRef = React.forwardRef,
+  memo = React.memo;
+/**
+ * Material Component
+ *
+ * Creates custom material based on materialType and material props
+ * if no material child exists.
+ */
+var MaterialComponent = memo(/* eslint-disable react/prop-types */
+function MaterialComponent(_ref) {
+  var materialType = _ref.materialType,
+    material = _ref.material,
+    hasMaterialChild = _ref.hasMaterialChild,
+    materialProps = _ref.materialProps;
+  var MeshMaterial = useMemo(function updateMeshMaterial() {
+    // Validated materialType
+    if (!_constants.MATERIAL_TYPES[materialType]) {
+      return _constants.MATERIAL_TYPES.basic;
+    }
+    return _constants.MATERIAL_TYPES[materialType];
+  }, [materialType]);
+  if (hasMaterialChild || material) {
+    return null;
+  } else {
+    return /*#__PURE__*/React.createElement(MeshMaterial, {
+      attach: "material",
+      args: [materialProps]
+    });
+  }
+}
+/* eslint-enable react/prop-types */);
+MaterialComponent.displayName = 'MaterialComponent';
+
+/**
+ * Mesh
+ *
+ * This is a wrapper for @react-three/fiber/three.js's mesh.
+ * In three.js Mesh extends Object3D which is essentially the root of
+ * all 3D objects. With this wrapper, Standard View users need not
+ * get tangled with the intricacies of geometries and materials and
+ * may treat primitives as singular objects with properties. Standard View
+ * manages which property is assigned to geometry or materials.
+ * However, just as @react-three/fiber allows for manipulation of all the
+ * three.js properties, so does Standard View. A primitive or shape may be
+ * loaded with custom geometry or materials or even composed with custom
+ * child components.
+ *
+ * In Standard View, nearly all the primitives are composed within Mesh.
+ * The common properties of all Meshes are applied in this component.
+ *
+ * Mesh has two important child components: material and geometry.
+ * These components may also be passed as material and geometry props.
+ * The type of geometry and material depend on the primitive.
+ * The geometry must be passed in either as a property or composed
+ * within the component as a child.
+ *
+ * If no material is passed in, a default meshBasicMaterial is created.
+ * The properties that Mesh accepts include those defined in the
+ * MeshProps type (and also anything that three.js Mesh has a setter for)
+ *
+ * Note that most geometry are initialized with unit lengths and parameters,
+ * and it is actually the mesh that is scaled, rotated, translated to get
+ * the particular shape and orientation desired. Fortunately, all parameters
+ * passed into the Prefab primitives will be drilled down to Mesh and applied.
+ *
+ * Mesh can also support animations via the animation property. A function with
+ * one argument that may be destructured to include mesh, state, setState, and any
+ * Canvas props desired for the animation.
+ * All primitives and shapes may have animation. These animations are reactive,
+ * infinite requestAnimationFrame loops, so they incur many render calls,
+ * but also maintain react-three-renderer's native raycasting for the
+ * event property functions, onPointerHover, onPointerOut, onPointerClick,
+ * onPointerMove, onPointerDown, onPointerUp, onWheel,
+ * and other mouse-handling events.
+ *
+ * Mesh also exposes @react-three/fiber's the event property functions but with
+ * a constrained argument set, same as animation. All event property functions
+ * take one arguement that may be destructured to include mesh, state, setState,
+ * and any Canvas prop. The benefit of this design, just like
+ * animations, is that a reference to mesh is automatically provided and also
+ * access to all props are available. Moreover, @react-three/fiber's Canvas
+ * state properties are exposed. This allows event functions to reach right
+ * into the @react-three/fiber/three.js's scene, camera, gl. Hence all shapes
+ * that are Meshes may have these event property functions.
+ *
+ * @param {MeshProps} props
+ */
+
+var Mesh = forwardRef(function Mesh(_ref2, ref) {
+  var geometry = _ref2.geometry,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? [0, 0, 0] : _ref2$position,
+    _ref2$scale = _ref2.scale,
+    scale = _ref2$scale === void 0 ? [1, 1, 1] : _ref2$scale,
+    _ref2$rotation = _ref2.rotation,
+    rotation = _ref2$rotation === void 0 ? [0, 0, 0] : _ref2$rotation,
+    _ref2$eulerOrder = _ref2.eulerOrder,
+    eulerOrder = _ref2$eulerOrder === void 0 ? _constants.EULER_ORDERS.XYZ : _ref2$eulerOrder,
+    _ref2$normal = _ref2.normal,
+    normal = _ref2$normal === void 0 ? _constants.DEFAULT_NORMAL : _ref2$normal,
+    _ref2$roll = _ref2.roll,
+    roll = _ref2$roll === void 0 ? 0 : _ref2$roll,
+    quaternion = _ref2.quaternion,
+    material = _ref2.material,
+    _ref2$materialType = _ref2.materialType,
+    materialType = _ref2$materialType === void 0 ? 'basic' : _ref2$materialType,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? _styles.DEFAULT_COLOR : _ref2$color,
+    hoverColor = _ref2.hoverColor,
+    _ref2$opacity = _ref2.opacity,
+    opacity = _ref2$opacity === void 0 ? 1 : _ref2$opacity,
+    transparent = _ref2.transparent,
+    _ref2$roughness = _ref2.roughness,
+    roughness = _ref2$roughness === void 0 ? 0.5 : _ref2$roughness,
+    _ref2$metalness = _ref2.metalness,
+    metalness = _ref2$metalness === void 0 ? 0.5 : _ref2$metalness,
+    _ref2$reflectivity = _ref2.reflectivity,
+    reflectivity = _ref2$reflectivity === void 0 ? 0.5 : _ref2$reflectivity,
+    texturePath = _ref2.texturePath,
+    textureURL = _ref2.textureURL,
+    map = _ref2.map,
+    aoMap = _ref2.aoMap,
+    aoMapIntensity = _ref2.aoMapIntensity,
+    bumpMap = _ref2.bumpMap,
+    bumpScale = _ref2.bumpScale,
+    normalMap = _ref2.normalMap,
+    normalMapType = _ref2.normalMapType,
+    normalMapScale = _ref2.normalMapScale,
+    displacementMap = _ref2.displacementMap,
+    displacementMapScale = _ref2.displacementMapScale,
+    displacementBias = _ref2.displacementBias,
+    roughnessMap = _ref2.roughnessMap,
+    metalnessMap = _ref2.metalnessMap,
+    alphaMap = _ref2.alphaMap,
+    envMap = _ref2.envMap,
+    envMapIntensity = _ref2.envMapIntensity,
+    _ref2$view3DEnvMap = _ref2.view3DEnvMap,
+    view3DEnvMap = _ref2$view3DEnvMap === void 0 ? false : _ref2$view3DEnvMap,
+    _ref2$wireframe = _ref2.wireframe,
+    wireframe = _ref2$wireframe === void 0 ? false : _ref2$wireframe,
+    _ref2$side = _ref2.side,
+    side = _ref2$side === void 0 ? 'front' : _ref2$side,
+    _ref2$depthWrite = _ref2.depthWrite,
+    depthWrite = _ref2$depthWrite === void 0 ? true : _ref2$depthWrite,
+    _ref2$depthTest = _ref2.depthTest,
+    depthTest = _ref2$depthTest === void 0 ? true : _ref2$depthTest,
+    _ref2$anisotropy = _ref2.anisotropy,
+    anisotropy = _ref2$anisotropy === void 0 ? 1 : _ref2$anisotropy,
+    _ref2$groupMember = _ref2.groupMember,
+    groupMember = _ref2$groupMember === void 0 ? false : _ref2$groupMember,
+    onClick = _ref2.onClick,
+    onDoubleClick = _ref2.onDoubleClick,
+    onWheel = _ref2.onWheel,
+    onPointerUp = _ref2.onPointerUp,
+    onPointerDown = _ref2.onPointerDown,
+    onPointerOver = _ref2.onPointerOver,
+    onPointerOut = _ref2.onPointerOut,
+    onPointerMove = _ref2.onPointerMove,
+    _ref2$hoverable = _ref2.hoverable,
+    hoverable = _ref2$hoverable === void 0 ? true : _ref2$hoverable,
+    _ref2$mousePropagatio = _ref2.mousePropagation,
+    mousePropagation = _ref2$mousePropagatio === void 0 ? false : _ref2$mousePropagatio,
+    _ref2$clickSensitivit = _ref2.clickSensitivity,
+    clickSensitivity = _ref2$clickSensitivit === void 0 ? 250 : _ref2$clickSensitivit,
+    _ref2$ignoreMouseEven = _ref2.ignoreMouseEvents,
+    ignoreMouseEvents = _ref2$ignoreMouseEven === void 0 ? false : _ref2$ignoreMouseEven,
+    receiveShadow = _ref2.receiveShadow,
+    animation = _ref2.animation,
+    state = _ref2.state,
+    children = _ref2.children,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  (0, _performance.performanceStart)('Mesh');
+
+  // Canvas Properties
+  // const canvasProps = useContext(ViewContext);
+  var _useViewContext = (0, _hooks.useViewContext)(),
+    viewContextEnvMap = _useViewContext.envMap,
+    canvasProps = _objectWithoutProperties(_useViewContext, _excluded2);
+
+  // Position
+  var _position = useMemo(function updatePosition() {
+    if (position) {
+      return (0, _util.filterArrayLength)((0, _util.objectToArray)(position), 3, [0, 0, 0]);
+    }
+    return undefined;
+  }, [position]);
+
+  // Rotations
+  // Intuitively, the component is aligned to the given normal in world space.
+  // Then, it is rotated by the rotation / quaternion in the component's local space.
+  // Then, it is rotated by the  roll about the normal in the component's local space.
+  // Since all quaternions are applied in world space, the rotations must all occur in reverse order.
+  // So, first apply the roll about the DEFAULT_NORMAL, then rotate by the rotation / quaternion,
+  // then apply the normal. This is equivalent to doing local rotations in the intuitive order.
+  // Hence q = normalQ * rotationQ * rollQ
+  var _quaternion = useMemo(function updateQuaternion() {
+    // Normal
+    // @ts-ignore:T2345 // spread
+    var normalVec = _construct(THREE.Vector3, _toConsumableArray(normal)).normalize();
+    var normalQ = new THREE.Quaternion().setFromUnitVectors(_constants.DEFAULT_NORMAL_VEC3, normalVec);
+
+    // Rotation / Quaternion
+    var rotationQ = new THREE.Quaternion();
+    if (quaternion == null) {
+      // Convert Euler Rotation to Quaternion
+      // @ts-ignore:T2345
+      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);
+    }
+
+    // Roll
+    var rollQ = new THREE.Quaternion().setFromAxisAngle(_constants.DEFAULT_NORMAL_VEC3, roll);
+
+    // q = normalQ * rotationQ * rollQ
+    var q = new THREE.Quaternion(); // Identity
+    q.premultiply(rollQ);
+    q.premultiply(rotationQ);
+    q.premultiply(normalQ);
+    return q;
+  }, [quaternion, rotation, eulerOrder, normal, roll]);
+
+  // Scale
+  var _scale = useMemo(function updateScale() {
+    // Invalid Scale  Warning
+    if (!Array.isArray(scale) || scale.length !== 3) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Mesh] scale must be a 3x1 array of numbers! scale: ".concat(scale));
+      return [1, 1, 1];
+    }
+
+    // Handle Zero Scale Input
+    if (!scale[0] || !scale[1] || !scale[2] || Math.abs(scale[0]) < _math.EPS || Math.abs(scale[1]) < _math.EPS || Math.abs(scale[2]) < _math.EPS) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Mesh] scale elements must be non-zero! scale: ".concat(scale));
+      return scale.map(function (value) {
+        return Math.max(value, _math.EPS);
+      });
+    }
+    return scale;
+  }, [scale]);
+
+  // Color
+
+  // Prevent DEFAULT_COLOR blend into texture with given color
+  if (textureURL && color == _styles.DEFAULT_COLOR) {
+    color = undefined;
+  }
+  var _useState = useState(color),
+    _useState2 = _slicedToArray(_useState, 2),
+    _color = _useState2[0],
+    setColor = _useState2[1];
+  useEffect(function updateColor() {
+    setColor(color);
+  }, [color]);
+
+  // Map Props
+  var mapProps = useMemo(function initMapProps() {
+    return {
+      anisotropy: anisotropy
+    };
+  }, [anisotropy]);
+
+  // TextureURL
+  var _textureURL = useMemo(function updateTextureURL() {
+    return texturePath ? texturePath + textureURL : textureURL;
+  }, [texturePath, textureURL]);
+
+  // Load Texture
+  var _map = useMemo(function updateMap() {
+    if (_textureURL) {
+      // Create Texture
+      var tex = new THREE.TextureLoader().load(_textureURL);
+      // Set Map Props
+      Object.entries(mapProps).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          prop = _ref4[0],
+          value = _ref4[1];
+        tex[prop] = value;
+        return null;
+      });
+      tex.colorSpace = THREE.SRGBColorSpace;
+      return tex;
+    }
+
+    // Set color space to sRGB if not set
+    if ((map === null || map === void 0 ? void 0 : map.colorSpace) == THREE.NoColorSpace) {
+      map.colorSpace = THREE.SRGBColorSpace;
+    }
+    return map;
+  }, [map, mapProps, _textureURL]);
+
+  // Environment Map
+  var _envMap = useMemo(function updateEnvMap() {
+    var compatibleMaterials = ['basic', 'physical', 'standard'];
+    return view3DEnvMap && compatibleMaterials.includes(materialType) ? viewContextEnvMap : envMap;
+  }, [viewContextEnvMap, view3DEnvMap, envMap, materialType]);
+
+  // Other Maps
+  var otherMaps = useMemo(function initOtherMap() {
+    var otherMapProps = {
+      aoMap: aoMap,
+      aoMapIntensity: aoMapIntensity,
+      bumpMap: bumpMap,
+      bumpScale: bumpScale,
+      normalMap: normalMap,
+      normalMapType: normalMapType,
+      normalMapScale: normalMapScale,
+      displacementMap: displacementMap,
+      displacementMapScale: displacementMapScale,
+      displacementBias: displacementBias,
+      roughnessMap: roughnessMap,
+      metalnessMap: metalnessMap,
+      alphaMap: alphaMap,
+      envMap: _envMap,
+      envMapIntensity: envMapIntensity
+    };
+    return otherMapProps;
+  }, [aoMap, aoMapIntensity, bumpMap, bumpScale, normalMap, normalMapType, normalMapScale, displacementMap, displacementMapScale, displacementBias, roughnessMap, metalnessMap, alphaMap, _envMap, envMapIntensity]);
+
+  // Side
+  var _side = useMemo(function updateSide() {
+    if (typeof side === 'string') {
+      return _constants.SIDE_TYPES[side];
+    } else {
+      // THREE.Side
+      return side;
+    }
+  }, [side]);
+
+  // Material Props
+  var materialProps = useMemo(function updateMaterialProps() {
+    // Metalness
+    var _metalness = materialType === 'standard' || materialType === 'physical' ? metalness : undefined;
+    // Roughness
+    var _roughness = materialType === 'standard' || materialType === 'physical' ? roughness : undefined;
+    // Reflectivity
+    var reflectiveMaterials = ['basic', 'lambert', 'phong', 'physical'];
+    var _reflectivity = reflectiveMaterials.includes(materialType) ? reflectivity : undefined;
+    // Collect All Material Props
+    var allMaterialProps = _objectSpread(_objectSpread({
+      color: _color,
+      map: _map
+    }, otherMaps), {}, {
+      wireframe: wireframe,
+      opacity: opacity,
+      transparent: transparent != null ? transparent : opacity < 1 - _math.EPS,
+      roughness: _roughness,
+      metalness: _metalness,
+      reflectivity: _reflectivity,
+      side: _side,
+      depthWrite: depthWrite,
+      depthTest: depthTest
+    });
+
+    // Clean undefined and null
+    var cleanedMaterialProps = {};
+    Object.entries(allMaterialProps).map(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        value = _ref6[1];
+      if (value != null) {
+        cleanedMaterialProps[key] = value;
+      }
+      return null;
+    });
+    return cleanedMaterialProps;
+  }, [materialType, metalness, roughness, reflectivity, _color, _map, otherMaps, wireframe, opacity, transparent, _side, depthWrite, depthTest]);
+
+  // Children
+  var _children = useMemo(function updateChildren() {
+    return children || null;
+  }, [children]);
+
+  // Check Children for Material
+  // Only checks on load. If material children are add later,
+  // will not rerender.
+  var hasMaterialChild = useMemo(function checkMaterialChild() {
+    // No Children
+    if (_children == null) {
+      return false;
+    }
+
+    // Check Children
+    if (_children.length == null) {
+      // Check The Only Child for Material
+      // Separate check necessary because when there is only one child,
+      // react stores children as a variable instead of an array.
+      if (Object.values(_constants.MATERIAL_TYPES).includes(_children.type)) {
+        // Update props.color with child material's color
+        if (_children.props.color) {
+          setColor(_children.props.color);
+        }
+        return true;
+      }
+    } else {
+      // Check Each Child for Material
+      /* eslint-disable no-restricted-syntax */
+      // loop
+      var _iterator = _createForOfIteratorHelper(_children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          if (child != null && Object.values(_constants.MATERIAL_TYPES).includes(child.type)) {
+            // Update props.color with child material's color
+            if (child.props.color) {
+              setColor(child.props.color);
+            }
+            return true;
+          }
+        }
+        /* eslint-enable no-restricted-syntax */
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    // No Material Children
+    return false;
+  }, [_children]);
+
+  // Material
+  var _material = useMemo(function updateMaterial() {
+    return material || null;
+  }, [material]);
+
+  // Ref
+  var meshRef = useRef(null); // Hooks must be deterministic
+  var mesh = ref || meshRef;
+
+  // State
+  var _useState3 = useState(state != null ? _objectSpread({
+      lastClickTime: 0
+    }, state) : {
+      lastClickTime: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _state = _useState4[0],
+    setState = _useState4[1];
+
+  // ignoreMouseEvents
+  var _ignoreMouseEvents = useMemo(function updateIgnoreMouseEvents() {
+    return ignoreMouseEvents || groupMember && !hoverColor && !onClick && !onDoubleClick && !onPointerOver && !onPointerOut && !onPointerDown && !onPointerUp && !onPointerMove && !onWheel;
+  }, [ignoreMouseEvents, groupMember, hoverColor, onClick, onDoubleClick, onPointerOver, onPointerOut, onPointerDown, onPointerUp, onPointerMove, onWheel]);
+
+  // ---------------------- //
+  // -----   Events   ----- //
+  // ---------------------- //
+  // Event Props
+  var eventProps = useMemo(function updateEventProps() {
+    return _objectSpread({
+      mesh: mesh,
+      state: _state,
+      setState: setState
+    }, canvasProps);
+  }, [mesh, _state, setState, canvasProps]);
+
+  // Click Props
+  var clickProps = useMemo(function updateClickProps() {
+    return {
+      mousePropagation: mousePropagation,
+      clickSensitivity: clickSensitivity,
+      mesh: mesh,
+      eventProps: eventProps,
+      onClick: onClick,
+      onDoubleClick: onDoubleClick
+    };
+  }, [mousePropagation, clickSensitivity, mesh, eventProps, onClick, onDoubleClick]);
+
+  // onPointerOver
+  var _onPointerOver = useCallback(function onHoverOver(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (hoverable) {
+      if (hoverColor != null) {
+        setColor(hoverColor);
+      }
+      if (onPointerOver) {
+        onPointerOver(_objectSpread(_objectSpread({}, e), eventProps));
+      }
+    }
+  }, [onPointerOver, hoverable, hoverColor, eventProps, mousePropagation]);
+
+  // onPointerOut
+  var _onPointerOut = useCallback(function onHoverOut(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (hoverable) {
+      if (hoverColor != null) {
+        setColor(color);
+      }
+      if (onPointerOut) {
+        onPointerOut(_objectSpread(_objectSpread({}, e), eventProps));
+      }
+    }
+  }, [onPointerOut, hoverable, hoverColor, color, eventProps, mousePropagation]);
+
+  // onPointerDown
+  var _onPointerDown = useCallback(function onMouseDown(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onPointerDown) {
+      onPointerDown(_objectSpread(_objectSpread({}, e), eventProps));
+    }
+  }, [onPointerDown, mousePropagation, eventProps]);
+
+  // onPointerUp
+  var _onPointerUp = useCallback(function onMouseUp(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onPointerUp) {
+      onPointerUp(_objectSpread(_objectSpread({}, e), eventProps));
+    }
+  }, [onPointerUp, mousePropagation, eventProps]);
+
+  // onPointerMove
+  var _onPointerMove = useCallback(function onMouseMove(e) {
+    //  Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onPointerMove) {
+      onPointerMove(_objectSpread(_objectSpread({}, e), eventProps));
+    }
+  }, [onPointerMove, mousePropagation, eventProps]);
+
+  // onWheel
+  var _onWheel = useCallback(function onScroll(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onWheel) {
+      onWheel(_objectSpread(_objectSpread({}, e), eventProps));
+    }
+  }, [onWheel, mousePropagation, eventProps]);
+
+  // onClick + onDoubleClick
+  var _onClick = useCallback((0, _events.handleClick)(clickProps), [clickProps]);
+
+  // ------------------------- //
+  // -----   Animation   ----- //
+  // ------------------------- //
+  // Animatiom Function
+  var _animation = useCallback(function onAnimation() {
+    // @ts-ignore:TS2339 // current not in RefObject<any> | null
+    if (animation && mesh.current) {
+      animation(eventProps);
+    }
+  }, [mesh, animation, eventProps]);
+
+  // ----------------------- //
+  // -----   Shadows   ----- //
+  // ----------------------- //
+  var _receiveShadow = useMemo(function updateReceiveShadow() {
+    // @ts-ignore:TS2339 // current not in RefObject<any> | null
+    if (mesh && mesh.current) {
+      // @ts-ignore:TS2339 // current not in RefObject<any> | null
+      mesh.current.material.needsUpdate = true;
+    }
+    return receiveShadow;
+  }, [receiveShadow, mesh]);
+  (0, _performance.performanceEnd)('Mesh');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (0, _performance.performanceStart)('Around mesh'), /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: mesh
+    // Event Functions
+    ,
+    onPointerOver: _ignoreMouseEvents ? undefined : _onPointerOver,
+    onPointerOut: _ignoreMouseEvents ? undefined : _onPointerOut,
+    onPointerDown: _ignoreMouseEvents ? undefined : _onPointerDown,
+    onPointerUp: _ignoreMouseEvents ? undefined : _onPointerUp,
+    onPointerMove: _ignoreMouseEvents ? undefined : _onPointerMove,
+    onWheel: _ignoreMouseEvents ? undefined : _onWheel,
+    onClick: _ignoreMouseEvents ? undefined : _onClick
+    // Geometry
+    ,
+    geometry: geometry || undefined,
+    position: _position,
+    scale: _scale,
+    quaternion: _quaternion,
+    material: _material,
+    receiveShadow: _receiveShadow
+  }, otherProps), /*#__PURE__*/React.createElement(MaterialComponent, {
+    materialType: materialType,
+    hasMaterialChild: hasMaterialChild,
+    material: _material,
+    materialProps: materialProps
+  }), animation && /*#__PURE__*/React.createElement(_events.AnimationComponent, {
+    animation: _animation
+  }), _children), (0, _performance.performanceEnd)('Around mesh'));
+});
+var MeshMemo = memo(Mesh);
+MeshMemo.displayName = 'Mesh';
+var _default = exports["default"] = MeshMemo;

package/lib/primitives/Plane.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { MeshProps } from "./Mesh";
+interface PlaneProps extends MeshProps {
+    billboard?: boolean;
+}
+declare const PlaneMemo: React.NamedExoticComponent<PlaneProps>;
+export default PlaneMemo;