three-render-objects 1.41.1 → 1.43.0

package/dist/three-render-objects.mjs

@@ -1,4 +1,4 @@
-import { SphereGeometry, Color, TextureLoader, SRGBColorSpace, MeshBasicMaterial, BackSide, Vector2, WebGLRenderer, Mesh, Timer, PerspectiveCamera, Scene, Raycaster, Vector3, Box3 } from 'three';
+import { Timer, PerspectiveCamera, Scene, SphereGeometry, Color, TextureLoader, SRGBColorSpace, MeshBasicMaterial, BackSide, Vector2, WebGLRenderer, Mesh, Raycaster, Vector3, Box3 } from 'three';
 import { WebGPURenderer } from 'three/webgpu';
 import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -39,89 +39,9 @@ function styleInject(css, ref) {
 var css_248z = ".scene-nav-info {\n  position: absolute;\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
 styleInject(css_248z);
 
-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 _arrayWithHoles(r) {
-  if (Array.isArray(r)) return r;
-}
-function _arrayWithoutHoles(r) {
-  if (Array.isArray(r)) return _arrayLikeToArray(r);
-}
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function _iterableToArray(r) {
-  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-}
-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 = true,
-      o = false;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = true, n = r;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-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 _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 _slicedToArray(r, e) {
-  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-}
-function _toConsumableArray(r) {
-  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
-}
-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);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-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;
-  }
-}
-
-var _materialDispose = function materialDispose(material) {
+const materialDispose = material => {
   if (material instanceof Array) {
-    material.forEach(_materialDispose);
+    material.forEach(materialDispose);
   } else {
     if (material.map) {
       material.map.dispose();
@@ -129,83 +49,83 @@ var _materialDispose = function materialDispose(material) {
     material.dispose();
   }
 };
-var _deallocate = function deallocate(obj) {
+const deallocate = obj => {
   if (obj.geometry) {
     obj.geometry.dispose();
   }
   if (obj.material) {
-    _materialDispose(obj.material);
+    materialDispose(obj.material);
   }
   if (obj.texture) {
     obj.texture.dispose();
   }
   if (obj.children) {
-    obj.children.forEach(_deallocate);
+    obj.children.forEach(deallocate);
   }
 };
-var emptyObject = function emptyObject(obj) {
+const emptyObject = obj => {
   while (obj.children.length) {
-    var childObj = obj.children[0];
+    const childObj = obj.children[0];
     obj.remove(childObj);
-    _deallocate(childObj);
+    deallocate(childObj);
   }
 };
 
-var three = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
+const three = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
 : {
-  WebGLRenderer: WebGLRenderer,
-  Scene: Scene,
-  PerspectiveCamera: PerspectiveCamera,
-  Raycaster: Raycaster,
-  SRGBColorSpace: SRGBColorSpace,
-  TextureLoader: TextureLoader,
-  Vector2: Vector2,
-  Vector3: Vector3,
-  Box3: Box3,
-  Color: Color,
-  Mesh: Mesh,
-  SphereGeometry: SphereGeometry,
-  MeshBasicMaterial: MeshBasicMaterial,
-  BackSide: BackSide,
-  Timer: Timer
+  WebGLRenderer,
+  Scene,
+  PerspectiveCamera,
+  Raycaster,
+  SRGBColorSpace,
+  TextureLoader,
+  Vector2,
+  Vector3,
+  Box3,
+  Color,
+  Mesh,
+  SphereGeometry,
+  MeshBasicMaterial,
+  BackSide,
+  Timer
 };
 var threeRenderObjects = Kapsule({
   props: {
     width: {
-      "default": window.innerWidth,
-      onChange: function onChange(width, state, prevWidth) {
+      default: window.innerWidth,
+      onChange(width, state, prevWidth) {
         isNaN(width) && (state.width = prevWidth);
       }
     },
     height: {
-      "default": window.innerHeight,
-      onChange: function onChange(height, state, prevHeight) {
+      default: window.innerHeight,
+      onChange(height, state, prevHeight) {
         isNaN(height) && (state.height = prevHeight);
       }
     },
     viewOffset: {
-      "default": [0, 0]
+      default: [0, 0]
     },
     backgroundColor: {
-      "default": '#000011'
+      default: '#000011'
     },
     backgroundImageUrl: {},
     onBackgroundImageLoaded: {},
     showNavInfo: {
-      "default": true
+      default: true
     },
     skyRadius: {
-      "default": 50000
+      default: 50000
     },
     objects: {
-      "default": []
+      default: []
     },
     lights: {
-      "default": []
+      default: []
     },
     enablePointerInteraction: {
-      "default": true,
-      onChange: function onChange(_, state) {
+      default: true,
+      onChange(_, state) {
         // Reset hover state
         state.hoverObj = null;
         state.tooltip && state.tooltip.content(null);
@@ -213,15 +133,15 @@ var threeRenderObjects = Kapsule({
       triggerUpdate: false
     },
     pointerRaycasterThrottleMs: {
-      "default": 50,
+      default: 50,
       triggerUpdate: false
     },
     lineHoverPrecision: {
-      "default": 1,
+      default: 1,
       triggerUpdate: false
     },
     pointsHoverPrecision: {
-      "default": 1,
+      default: 1,
       triggerUpdate: false
     },
     hoverOrderComparator: {
@@ -229,9 +149,7 @@ var threeRenderObjects = Kapsule({
     },
     // keep existing order by default
     hoverFilter: {
-      "default": function _default() {
-        return true;
-      },
+      default: () => true,
       triggerUpdate: false
     },
     // exclude objects from interaction
@@ -239,19 +157,19 @@ var threeRenderObjects = Kapsule({
       triggerUpdate: false
     },
     hoverDuringDrag: {
-      "default": false,
+      default: false,
       triggerUpdate: false
     },
     clickAfterDrag: {
-      "default": false,
+      default: false,
       triggerUpdate: false
     },
     onHover: {
-      "default": function _default() {},
+      default: () => {},
       triggerUpdate: false
     },
     onClick: {
-      "default": function _default() {},
+      default: () => {},
       triggerUpdate: false
     },
     onRightClick: {
@@ -259,28 +177,22 @@ var threeRenderObjects = Kapsule({
     }
   },
   methods: {
-    tick: function tick(state) {
+    tick: function (state) {
       if (state.initialised) {
         state.controls.enabled && state.controls.update && state.controls.update(Math.min(1, state.timer.update().getDelta())); // timedelta is required for fly controls
 
         state.postProcessingComposer ? state.postProcessingComposer.render() // if using postprocessing, switch the output to it
         : state.renderer.render(state.scene, state.camera);
-        state.extraRenderers.forEach(function (r) {
-          return r.render(state.scene, state.camera);
-        });
-        var now = +new Date();
+        state.extraRenderers.forEach(r => r.render(state.scene, state.camera));
+        const now = +new Date();
         if (state.enablePointerInteraction && now - state.lastRaycasterCheck >= state.pointerRaycasterThrottleMs) {
           state.lastRaycasterCheck = now;
           // Update tooltip and trigger onHover events
-          var topObject = null;
+          let topObject = null;
           if (state.hoverDuringDrag || !state.isPointerDragging) {
-            var intersects = this.intersectingObjects(state.pointerPos.x, state.pointerPos.y);
-            state.hoverOrderComparator && intersects.sort(function (a, b) {
-              return state.hoverOrderComparator(a.object, b.object);
-            });
-            var topIntersect = intersects.find(function (d) {
-              return state.hoverFilter(d.object);
-            }) || null;
+            const intersects = this.intersectingObjects(state.pointerPos.x, state.pointerPos.y);
+            state.hoverOrderComparator && intersects.sort((a, b) => state.hoverOrderComparator(a.object, b.object));
+            const topIntersect = intersects.find(d => state.hoverFilter(d.object)) || null;
             topObject = topIntersect ? topIntersect.object : null;
             state.intersection = topIntersect || null;
           }
@@ -294,39 +206,46 @@ var threeRenderObjects = Kapsule({
       }
       return this;
     },
-    getPointerPos: function getPointerPos(state) {
-      var _state$pointerPos = state.pointerPos,
-        x = _state$pointerPos.x,
-        y = _state$pointerPos.y;
+    getPointerPos: function (state) {
+      const {
+        x,
+        y
+      } = state.pointerPos;
       return {
-        x: x,
-        y: y
+        x,
+        y
       };
     },
-    cameraPosition: function cameraPosition(state, position, lookAt, transitionDuration) {
-      var camera = state.camera;
+    cameraPosition: function (state, position, lookAt, transitionDuration) {
+      const camera = state.camera;
 
       // Setter
       if (position && state.initialised) {
-        var finalPos = position;
-        var finalLookAt = lookAt || {
+        const finalPos = position;
+        const finalLookAt = lookAt || {
           x: 0,
           y: 0,
           z: 0
         };
+
+        // cancel any ongoing pov animation
+        state.povPosTween?.end();
+        state.povTgtTween?.end();
         if (!transitionDuration) {
           // no animation
           setCameraPos(finalPos);
           setLookAt(finalLookAt);
         } else {
-          var camPos = Object.assign({}, camera.position);
-          var camLookAt = getLookAt();
-          state.tweenGroup.add(new Tween(camPos).to(finalPos, transitionDuration).easing(Easing.Quadratic.Out).onUpdate(setCameraPos).onComplete(function () {
+          const camPos = Object.assign({}, camera.position);
+          const camLookAt = getLookAt();
+          state.tweenGroup.add(state.povPosTween = new Tween(camPos).to(finalPos, transitionDuration).easing(Easing.Quadratic.Out).onUpdate(setCameraPos).onComplete(function () {
+            state.povPosTween = undefined;
             state.tweenGroup.remove(this);
           }).start());
 
           // Face direction in 1/3rd of time
-          state.tweenGroup.add(new Tween(camLookAt).to(finalLookAt, transitionDuration / 3).easing(Easing.Quadratic.Out).onUpdate(setLookAt).onComplete(function () {
+          state.tweenGroup.add(state.povTgtTween = new Tween(camLookAt).to(finalLookAt, transitionDuration / 3).easing(Easing.Quadratic.Out).onUpdate(setLookAt).onComplete(function () {
+            state.povTgtTween = undefined;
             state.tweenGroup.remove(this);
           }).start());
         }
@@ -341,15 +260,17 @@ var threeRenderObjects = Kapsule({
       //
 
       function setCameraPos(pos) {
-        var x = pos.x,
-          y = pos.y,
-          z = pos.z;
+        const {
+          x,
+          y,
+          z
+        } = pos;
         if (x !== undefined) camera.position.x = x;
         if (y !== undefined) camera.position.y = y;
         if (z !== undefined) camera.position.z = z;
       }
       function setLookAt(lookAt) {
-        var lookAtVect = new three.Vector3(lookAt.x, lookAt.y, lookAt.z);
+        const lookAtVect = new three.Vector3(lookAt.x, lookAt.y, lookAt.z);
         if (state.controls.enabled && state.controls.target) {
           state.controls.target = lookAtVect;
         } else {
@@ -361,60 +282,53 @@ var threeRenderObjects = Kapsule({
         return Object.assign(new three.Vector3(0, 0, -1e3).applyQuaternion(camera.quaternion).add(camera.position));
       }
     },
-    zoomToFit: function zoomToFit(state) {
-      var transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      var padding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
-      for (var _len = arguments.length, bboxArgs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-        bboxArgs[_key - 3] = arguments[_key];
-      }
-      return this.fitToBbox(this.getBbox.apply(this, bboxArgs), transitionDuration, padding);
+    zoomToFit: function (state, transitionDuration = 0, padding = 10, bboxArg, preserveLookDirection) {
+      return this.fitToBbox(this.getBbox(bboxArg), transitionDuration, padding, preserveLookDirection);
     },
-    fitToBbox: function fitToBbox(state, bbox) {
-      var transitionDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      var padding = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 10;
-      // based on https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
-      var camera = state.camera;
+    fitToBbox: function (state, bbox, transitionDuration = 0, padding = 10, preserveLookDirection = false) {
+      const camera = state.camera;
       if (bbox) {
-        var center = new three.Vector3(0, 0, 0); // reset camera aim to center
-        var maxBoxSide = Math.max.apply(Math, _toConsumableArray(Object.entries(bbox).map(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            coordType = _ref2[0],
-            coords = _ref2[1];
-          return Math.max.apply(Math, _toConsumableArray(coords.map(function (c) {
-            return Math.abs(center[coordType] - c);
-          })));
-        }))) * 2;
-
-        // find distance that fits whole bbox within padded fov
-        var paddedFov = (1 - padding * 2 / state.height) * camera.fov;
-        var fitHeightDistance = maxBoxSide / Math.atan(paddedFov * Math.PI / 180);
-        var fitWidthDistance = fitHeightDistance / camera.aspect;
-        var distance = Math.max(fitHeightDistance, fitWidthDistance);
-        if (distance > 0) {
-          var newCameraPosition = center.clone().sub(camera.position).normalize().multiplyScalar(-distance);
-          this.cameraPosition(newCameraPosition, center, transitionDuration);
-        }
+        camera.updateMatrixWorld();
+        const camRight = new three.Vector3();
+        const camUp = new three.Vector3();
+        const camForward = new three.Vector3();
+        const camPos = new three.Vector3();
+        camera.getWorldPosition(camPos);
+        camera.getWorldDirection(camForward);
+        camRight.crossVectors(camForward, camera.up).normalize();
+        camUp.crossVectors(camRight, camForward).normalize();
+        const paddedFov = (1 - padding * 2 / state.height) * camera.fov;
+        const vFovHalf = paddedFov / 2 * (Math.PI / 180);
+        const hFovHalf = Math.atan(Math.tan(vFovHalf) * camera.aspect);
+        const bboxCenter = new three.Vector3((bbox.x[0] + bbox.x[1]) / 2, (bbox.y[0] + bbox.y[1]) / 2, (bbox.z[0] + bbox.z[1]) / 2);
+        const center = preserveLookDirection ? camForward.clone().multiplyScalar(camPos.distanceTo(bboxCenter)).add(camPos) : bboxCenter;
+        const distance = Math.max(0, ...[new three.Vector3(bbox.x[0], bbox.y[0], bbox.z[0]), new three.Vector3(bbox.x[0], bbox.y[0], bbox.z[1]), new three.Vector3(bbox.x[0], bbox.y[1], bbox.z[0]), new three.Vector3(bbox.x[0], bbox.y[1], bbox.z[1]), new three.Vector3(bbox.x[1], bbox.y[0], bbox.z[0]), new three.Vector3(bbox.x[1], bbox.y[0], bbox.z[1]), new three.Vector3(bbox.x[1], bbox.y[1], bbox.z[0]), new three.Vector3(bbox.x[1], bbox.y[1], bbox.z[1])].map(corner => {
+          const localPos = corner.clone().sub(center);
+          return Math.max(Math.abs(localPos.dot(camUp)) / Math.tan(vFovHalf), Math.abs(localPos.dot(camRight)) / Math.tan(hFovHalf)) - localPos.dot(camForward);
+        }));
+        const dir = camForward.clone().negate();
+        const newCameraPos = {
+          x: center.x + dir.x * distance,
+          y: center.y + dir.y * distance,
+          z: center.z + dir.z * distance
+        };
+        this.cameraPosition(newCameraPos, center, transitionDuration);
       }
       return this;
     },
-    getBbox: function getBbox(state) {
-      var objFilter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
-        return true;
-      };
-      var box = new three.Box3(new three.Vector3(0, 0, 0), new three.Vector3(0, 0, 0));
-      var objs = state.objects.filter(objFilter);
+    getBbox: function (state, objFilter = () => true) {
+      const box = new three.Box3();
+      const objs = state.objects.filter(objFilter);
       if (!objs.length) return null;
-      objs.forEach(function (obj) {
-        return box.expandByObject(obj);
-      });
+      objs.forEach(obj => box.expandByObject(obj));
 
       // extract global x,y,z min/max
-      return Object.assign.apply(Object, _toConsumableArray(['x', 'y', 'z'].map(function (c) {
-        return _defineProperty({}, c, [box.min[c], box.max[c]]);
+      return Object.assign(...['x', 'y', 'z'].map(c => ({
+        [c]: [box.min[c], box.max[c]]
       })));
     },
-    getScreenCoords: function getScreenCoords(state, x, y, z) {
-      var vec = new three.Vector3(x, y, z);
+    getScreenCoords: function (state, x, y, z) {
+      const vec = new three.Vector3(x, y, z);
       vec.project(this.camera()); // project to the camera plane
       return {
         // align relative pos to canvas dimensions
@@ -422,69 +336,48 @@ var threeRenderObjects = Kapsule({
         y: -(vec.y - 1) * state.height / 2
       };
     },
-    getSceneCoords: function getSceneCoords(state, screenX, screenY) {
-      var distance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      var relCoords = new three.Vector2(screenX / state.width * 2 - 1, -(screenY / state.height) * 2 + 1);
-      var raycaster = new three.Raycaster();
+    getSceneCoords: function (state, screenX, screenY, distance = 0) {
+      const relCoords = new three.Vector2(screenX / state.width * 2 - 1, -(screenY / state.height) * 2 + 1);
+      const raycaster = new three.Raycaster();
       raycaster.setFromCamera(relCoords, state.camera);
       return Object.assign({}, raycaster.ray.at(distance, new three.Vector3()));
     },
-    intersectingObjects: function intersectingObjects(state, x, y) {
-      var relCoords = new three.Vector2(x / state.width * 2 - 1, -(y / state.height) * 2 + 1);
-      var raycaster = new three.Raycaster();
+    intersectingObjects: function (state, x, y) {
+      const relCoords = new three.Vector2(x / state.width * 2 - 1, -(y / state.height) * 2 + 1);
+      const raycaster = new three.Raycaster();
       raycaster.params.Line.threshold = state.lineHoverPrecision; // set linePrecision
       raycaster.params.Points.threshold = state.pointsHoverPrecision; // set pointsPrecision
       raycaster.setFromCamera(relCoords, state.camera);
       return raycaster.intersectObjects(state.objects, true);
     },
-    renderer: function renderer(state) {
-      return state.renderer;
-    },
-    scene: function scene(state) {
-      return state.scene;
-    },
-    camera: function camera(state) {
-      return state.camera;
-    },
-    postProcessingComposer: function postProcessingComposer(state) {
-      return state.postProcessingComposer;
-    },
-    controls: function controls(state) {
-      return state.controls;
-    },
-    tbControls: function tbControls(state) {
-      return state.controls;
-    },
+    renderer: state => state.renderer,
+    scene: state => state.scene,
+    camera: state => state.camera,
+    postProcessingComposer: state => state.postProcessingComposer,
+    controls: state => state.controls,
+    tbControls: state => state.controls,
     // to be deprecated
-    _destructor: function _destructor(state) {
-      var _state$controls, _state$renderer, _state$postProcessing;
+    _destructor: function (state) {
       emptyObject(state.scene);
-      (_state$controls = state.controls) === null || _state$controls === void 0 || _state$controls.dispose();
-      (_state$renderer = state.renderer) === null || _state$renderer === void 0 || _state$renderer.dispose();
-      (_state$postProcessing = state.postProcessingComposer) === null || _state$postProcessing === void 0 || _state$postProcessing.dispose();
+      state.controls?.dispose();
+      state.renderer?.dispose();
+      state.postProcessingComposer?.dispose();
     }
   },
-  stateInit: function stateInit() {
-    return {
-      scene: new three.Scene(),
-      camera: new three.PerspectiveCamera(),
-      timer: new three.Timer(),
-      tweenGroup: new Group(),
-      lastRaycasterCheck: 0
-    };
-  },
-  init: function init(domNode, state) {
-    var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      _ref4$controlType = _ref4.controlType,
-      controlType = _ref4$controlType === void 0 ? 'trackball' : _ref4$controlType,
-      _ref4$useWebGPU = _ref4.useWebGPU,
-      useWebGPU = _ref4$useWebGPU === void 0 ? false : _ref4$useWebGPU,
-      _ref4$rendererConfig = _ref4.rendererConfig,
-      rendererConfig = _ref4$rendererConfig === void 0 ? {} : _ref4$rendererConfig,
-      _ref4$extraRenderers = _ref4.extraRenderers,
-      extraRenderers = _ref4$extraRenderers === void 0 ? [] : _ref4$extraRenderers,
-      _ref4$waitForLoadComp = _ref4.waitForLoadComplete,
-      waitForLoadComplete = _ref4$waitForLoadComp === void 0 ? true : _ref4$waitForLoadComp;
+  stateInit: () => ({
+    scene: new three.Scene(),
+    camera: new three.PerspectiveCamera(),
+    timer: new three.Timer(),
+    tweenGroup: new Group(),
+    lastRaycasterCheck: 0
+  }),
+  init(domNode, state, {
+    controlType = 'trackball',
+    useWebGPU = false,
+    rendererConfig = {},
+    extraRenderers = [],
+    waitForLoadComplete = true
+  } = {}) {
     // Wipe DOM
     domNode.innerHTML = '';
 
@@ -510,39 +403,35 @@ var threeRenderObjects = Kapsule({
     state.pointerPos = new three.Vector2();
     state.pointerPos.x = -2; // Initialize off canvas
     state.pointerPos.y = -2;
-    ['pointermove', 'pointerdown'].forEach(function (evType) {
-      return state.container.addEventListener(evType, function (ev) {
-        // track click state
-        evType === 'pointerdown' && (state.isPointerPressed = true);
+    ['pointermove', 'pointerdown'].forEach(evType => state.container.addEventListener(evType, ev => {
+      // track click state
+      evType === 'pointerdown' && (state.isPointerPressed = true);
 
-        // detect point drag
-        !state.isPointerDragging && ev.type === 'pointermove' && (ev.pressure > 0 || state.isPointerPressed) // ev.pressure always 0 on Safari, so we used the isPointerPressed tracker
-        && (ev.pointerType === 'mouse' || ev.movementX === undefined || [ev.movementX, ev.movementY].some(function (m) {
-          return Math.abs(m) > 1;
-        })) // relax drag trigger sensitivity on non-mouse (touch/pen) events
-        && (state.isPointerDragging = true);
-        if (state.enablePointerInteraction) {
-          // update the pointer pos
-          var offset = getOffset(state.container);
-          state.pointerPos.x = ev.pageX - offset.left;
-          state.pointerPos.y = ev.pageY - offset.top;
-        }
-        function getOffset(el) {
-          var rect = el.getBoundingClientRect(),
-            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
-            scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-          return {
-            top: rect.top + scrollTop,
-            left: rect.left + scrollLeft
-          };
-        }
-      }, {
-        passive: true
-      });
-    });
+      // detect point drag
+      !state.isPointerDragging && ev.type === 'pointermove' && (ev.pressure > 0 || state.isPointerPressed) // ev.pressure always 0 on Safari, so we used the isPointerPressed tracker
+      && (ev.pointerType === 'mouse' || ev.movementX === undefined || [ev.movementX, ev.movementY].some(m => Math.abs(m) > 1)) // relax drag trigger sensitivity on non-mouse (touch/pen) events
+      && (state.isPointerDragging = true);
+      if (state.enablePointerInteraction) {
+        // update the pointer pos
+        const offset = getOffset(state.container);
+        state.pointerPos.x = ev.pageX - offset.left;
+        state.pointerPos.y = ev.pageY - offset.top;
+      }
+      function getOffset(el) {
+        const rect = el.getBoundingClientRect(),
+          scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+          scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return {
+          top: rect.top + scrollTop,
+          left: rect.left + scrollLeft
+        };
+      }
+    }, {
+      passive: true
+    }));
 
     // Handle click events on objs
-    state.container.addEventListener('pointerup', function (ev) {
+    state.container.addEventListener('pointerup', ev => {
       if (!state.isPointerPressed) return; // don't trigger click events if pointer is not pressed on the canvas
 
       state.isPointerPressed = false;
@@ -550,7 +439,7 @@ var threeRenderObjects = Kapsule({
         state.isPointerDragging = false;
         if (!state.clickAfterDrag) return; // don't trigger onClick after pointer drag (camera motion via controls)
       }
-      requestAnimationFrame(function () {
+      requestAnimationFrame(() => {
         // trigger click events asynchronously, to allow hoverObj to be set (on frame)
         if (ev.button === 0) {
           // left-click
@@ -566,7 +455,7 @@ var threeRenderObjects = Kapsule({
       capture: true
     }); // use capture phase to prevent propagation blocking from controls (specifically for fly)
 
-    state.container.addEventListener('contextmenu', function (ev) {
+    state.container.addEventListener('contextmenu', ev => {
       if (state.onRightClick) ev.preventDefault(); // prevent default contextmenu behavior and allow pointerup to fire instead
     });
 
@@ -580,7 +469,7 @@ var threeRenderObjects = Kapsule({
 
     // Setup extra renderers
     state.extraRenderers = extraRenderers;
-    state.extraRenderers.forEach(function (r) {
+    state.extraRenderers.forEach(r => {
       // overlay them on top of main renderer
       r.domElement.style.position = 'absolute';
       r.domElement.style.top = '0px';
@@ -606,22 +495,20 @@ var threeRenderObjects = Kapsule({
     if (controlType === 'trackball' || controlType === 'orbit') {
       state.controls.minDistance = 0.1;
       state.controls.maxDistance = state.skyRadius;
-      state.controls.addEventListener('start', function () {
+      state.controls.addEventListener('start', () => {
         state.controlsEngaged = true;
       });
-      state.controls.addEventListener('change', function () {
+      state.controls.addEventListener('change', () => {
         if (state.controlsEngaged) {
           state.controlsDragging = true;
         }
       });
-      state.controls.addEventListener('end', function () {
+      state.controls.addEventListener('end', () => {
         state.controlsEngaged = false;
         state.controlsDragging = false;
       });
     }
-    [state.renderer, state.postProcessingComposer].concat(_toConsumableArray(state.extraRenderers)).forEach(function (r) {
-      return r.setSize(state.width, state.height);
-    });
+    [state.renderer, state.postProcessingComposer, ...state.extraRenderers].forEach(r => r.setSize(state.width, state.height));
     state.camera.aspect = state.width / state.height;
     state.camera.updateProjectionMatrix();
     state.camera.position.z = 1000;
@@ -632,32 +519,24 @@ var threeRenderObjects = Kapsule({
     state.loadComplete = state.scene.visible = !waitForLoadComplete;
     window.scene = state.scene;
   },
-  update: function update(state, changedProps) {
+  update(state, changedProps) {
     // resize canvas
     if (state.width && state.height && (changedProps.hasOwnProperty('width') || changedProps.hasOwnProperty('height'))) {
-      var _state$camera;
-      var w = state.width;
-      var h = state.height;
-      state.container.style.width = "".concat(w, "px");
-      state.container.style.height = "".concat(h, "px");
-      [state.renderer, state.postProcessingComposer].concat(_toConsumableArray(state.extraRenderers)).forEach(function (r) {
-        return r.setSize(w, h);
-      });
+      const w = state.width;
+      const h = state.height;
+      state.container.style.width = `${w}px`;
+      state.container.style.height = `${h}px`;
+      [state.renderer, state.postProcessingComposer, ...state.extraRenderers].forEach(r => r.setSize(w, h));
       state.camera.aspect = w / h;
-      var o = state.viewOffset.slice(0, 2);
-      o.some(function (n) {
-        return n;
-      }) && (_state$camera = state.camera).setViewOffset.apply(_state$camera, [w, h].concat(_toConsumableArray(o), [w, h]));
+      const o = state.viewOffset.slice(0, 2);
+      o.some(n => n) && state.camera.setViewOffset(w, h, ...o, w, h);
       state.camera.updateProjectionMatrix();
     }
     if (changedProps.hasOwnProperty('viewOffset')) {
-      var _state$camera2;
-      var _w = state.width;
-      var _h = state.height;
-      var _o = state.viewOffset.slice(0, 2);
-      _o.some(function (n) {
-        return n;
-      }) ? (_state$camera2 = state.camera).setViewOffset.apply(_state$camera2, [_w, _h].concat(_toConsumableArray(_o), [_w, _h])) : state.camera.clearViewOffset();
+      const w = state.width;
+      const h = state.height;
+      const o = state.viewOffset.slice(0, 2);
+      o.some(n => n) ? state.camera.setViewOffset(w, h, ...o, w, h) : state.camera.clearViewOffset();
     }
     if (changedProps.hasOwnProperty('skyRadius') && state.skyRadius) {
       state.controls.hasOwnProperty('maxDistance') && changedProps.skyRadius && (state.controls.maxDistance = Math.min(state.controls.maxDistance, state.skyRadius));
@@ -666,7 +545,7 @@ var threeRenderObjects = Kapsule({
       state.skysphere.geometry = new three.SphereGeometry(state.skyRadius);
     }
     if (changedProps.hasOwnProperty('backgroundColor')) {
-      var alpha = parseToRgb(state.backgroundColor).alpha;
+      let alpha = parseToRgb(state.backgroundColor).alpha;
       if (alpha === undefined) alpha = 1;
       state.renderer.setClearColor(new three.Color(opacify(1, state.backgroundColor)), alpha);
     }
@@ -676,7 +555,7 @@ var threeRenderObjects = Kapsule({
         state.skysphere.material.map = null;
         !state.loadComplete && finishLoad();
       } else {
-        new three.TextureLoader().load(state.backgroundImageUrl, function (texture) {
+        new three.TextureLoader().load(state.backgroundImageUrl, texture => {
           texture.colorSpace = three.SRGBColorSpace;
           state.skysphere.material = new three.MeshBasicMaterial({
             map: texture,
@@ -692,20 +571,12 @@ var threeRenderObjects = Kapsule({
     }
     changedProps.hasOwnProperty('showNavInfo') && (state.navInfo.style.display = state.showNavInfo ? null : 'none');
     if (changedProps.hasOwnProperty('lights')) {
-      (changedProps.lights || []).forEach(function (light) {
-        return state.scene.remove(light);
-      }); // Clear the place
-      state.lights.forEach(function (light) {
-        return state.scene.add(light);
-      }); // Add to scene
+      (changedProps.lights || []).forEach(light => state.scene.remove(light)); // Clear the place
+      state.lights.forEach(light => state.scene.add(light)); // Add to scene
     }
     if (changedProps.hasOwnProperty('objects')) {
-      (changedProps.objects || []).forEach(function (obj) {
-        return state.scene.remove(obj);
-      }); // Clear the place
-      state.objects.forEach(function (obj) {
-        return state.scene.add(obj);
-      }); // Add to scene
+      (changedProps.objects || []).forEach(obj => state.scene.remove(obj)); // Clear the place
+      state.objects.forEach(obj => state.scene.add(obj)); // Add to scene
     }
 
     //