@metacell/geppetto-meta-ui/3d-canvas/Canvas3D.js

React components from geppetto-meta to create neuroscience applications and visualize data.

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { Canvas } from "@react-three/fiber";
import React, { useEffect, useRef } from "react";
import { CameraControls, Center, Outlines } from "@react-three/drei";
import { useState } from "react";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
import { DoubleSide, NormalBlending } from "three";
var STLViewer = function STLViewer(_ref) {
  var frustumCulled = _ref.frustumCulled,
    objects = _ref.objects,
    onLoadError = _ref.onLoadError;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    stlObjects = _useState2[0],
    setSTLObjects = _useState2[1];
  var loaderRef = useRef(new STLLoader());
  useEffect(function () {
    var loader = loaderRef.current;
    var loadPromises = objects.map(function (object) {
      return loader.loadAsync(object.url).then(function (geometry) {
        return {
          geometry: geometry,
          object: object
        };
      }, function (error) {
        return Promise.reject({
          error: error,
          object: object
        });
      });
    });
    Promise.allSettled(loadPromises).then(function (results) {
      var _results$reduce = results.reduce(function (acc, r) {
          if (r.status === "fulfilled" && r.value) {
            acc[0].push(r.value);
          } else if (r.status === "rejected") {
            acc[1].push(r.reason);
          }
          return acc;
        }, [[], []]),
        _results$reduce2 = _slicedToArray(_results$reduce, 2),
        ok = _results$reduce2[0],
        nok = _results$reduce2[1];
      setSTLObjects(ok);
      if (nok && nok.length > 0) {
        onLoadError === null || onLoadError === void 0 || onLoadError(nok);
      }
    });
  }, [objects]);
  return /*#__PURE__*/React.createElement("group", {
    frustumCulled: frustumCulled || false
  }, stlObjects.map(function (_ref2) {
    var _object$opts, _object$opts2;
    var object = _ref2.object,
      geometry = _ref2.geometry;
    return /*#__PURE__*/React.createElement(STLMesh, {
      key: object.id || object.url,
      id: object.id || object.url,
      object: geometry,
      meshOpts: object === null || object === void 0 || (_object$opts = object.opts) === null || _object$opts === void 0 ? void 0 : _object$opts.mesh,
      materialOpts: object === null || object === void 0 || (_object$opts2 = object.opts) === null || _object$opts2 === void 0 ? void 0 : _object$opts2.material,
      highlightOnClick: object.highlightOnClick
    });
  }));
};
export default STLViewer;
var STLMesh = function STLMesh(_ref3) {
  var id = _ref3.id,
    highlightOnClick = _ref3.highlightOnClick,
    onClick = _ref3.onClick,
    object = _ref3.object,
    meshOpts = _ref3.meshOpts,
    materialOpts = _ref3.materialOpts;
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    highlighted = _useState4[0],
    setHighlight = _useState4[1];
  var objMesh = useRef(null);
  var _onClick = function _onClick(event) {
    if (highlightOnClick) {
      setHighlight(!highlighted);
    }
    onClick === null || onClick === void 0 || onClick(event, id, objMesh.current);
  };
  return /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("mesh", _extends({
    ref: objMesh
  }, meshOpts, {
    userData: {
      id: id
    },
    frustumCulled: (meshOpts === null || meshOpts === void 0 ? void 0 : meshOpts.frustumCulled) || false,
    onClick: _onClick
  }), /*#__PURE__*/React.createElement("primitive", {
    attach: "geometry",
    object: object
  }), /*#__PURE__*/React.createElement("meshStandardMaterial", _extends({}, materialOpts, {
    color: (materialOpts === null || materialOpts === void 0 ? void 0 : materialOpts.color) || "red",
    opacity: (materialOpts === null || materialOpts === void 0 ? void 0 : materialOpts.opacity) || 1,
    side: (materialOpts === null || materialOpts === void 0 ? void 0 : materialOpts.side) || DoubleSide,
    depthWrite: (materialOpts === null || materialOpts === void 0 ? void 0 : materialOpts.depthWrite) || false,
    depthTest: (materialOpts === null || materialOpts === void 0 ? void 0 : materialOpts.depthTest) || false,
    blending: (materialOpts === null || materialOpts === void 0 ? void 0 : materialOpts.blending) || NormalBlending
  })), highlighted && /*#__PURE__*/React.createElement(Outlines, {
    thickness: (highlightOnClick === null || highlightOnClick === void 0 ? void 0 : highlightOnClick.thickness) || 5,
    color: (highlightOnClick === null || highlightOnClick === void 0 ? void 0 : highlightOnClick.color) || "hotpink"
  })));
};
export var Canvas3D = function Canvas3D(_ref4) {
  var children = _ref4.children,
    _ref4$defaultLightOff = _ref4.defaultLightOff,
    defaultLightOff = _ref4$defaultLightOff === void 0 ? false : _ref4$defaultLightOff,
    object3dUrls = _ref4.object3dUrls,
    onLoadError = _ref4.onLoadError,
    _ref4$nonInteractive = _ref4.nonInteractive,
    nonInteractive = _ref4$nonInteractive === void 0 ? false : _ref4$nonInteractive;
  return /*#__PURE__*/React.createElement(Canvas, null, !defaultLightOff && /*#__PURE__*/React.createElement("ambientLight", {
    intensity: 0.5
  }), !defaultLightOff && /*#__PURE__*/React.createElement("directionalLight", null), object3dUrls && /*#__PURE__*/React.createElement(STLViewer, {
    objects: object3dUrls.map(function (o) {
      if (typeof o === "string") {
        return {
          url: o
        };
      }
      return o;
    }),
    onLoadError: onLoadError
  }), children, !nonInteractive && /*#__PURE__*/React.createElement(CameraControls, null));
};