@titelmedia/bricks-3d-model - npm Package Compare versions

Comparing version 2.24.1 to 2.25.0

dist/index.js

@@ -45,2 +45,3 @@ "use strict";
   const [isInViewport, setIsInViewport] = (0, _react.useState)(true);
+  const [isModelLoaded, setIsModelLoaded] = (0, _react.useState)(false);
   const fluid = fallbackImage?.fluid || fallbackImage?.responsiveImage || fallbackImage;
@@ -156,3 +157,3 @@ const mountRef = (0, _react.useRef)(null);
         setCameraPosition();
-        initGUI();
+        setIsModelLoaded(true);
         if (enableRaycaster) {
@@ -177,26 +178,2 @@ (0, _raycaster.default)({
     };
-    const initGUI = () => {
-      if (!enableGUI) return;
-      const gui = new _dat.GUI();
-      const cameraFolder = gui.addFolder('Camera');
-      cameraFolder.add(cameraRef.current.position, 'x', -50, 50);
-      cameraFolder.add(cameraRef.current.position, 'y', -50, 50);
-      cameraFolder.add(cameraRef.current.position, 'z', -50, 50);
-      cameraFolder.open();
-      const positionFolder = gui.addFolder('Position');
-      positionFolder.add(modelRef.current.position, 'x', -35, 35);
-      positionFolder.add(modelRef.current.position, 'y', -35, 35);
-      positionFolder.add(modelRef.current.position, 'z', -35, 35);
-      positionFolder.open();
-      const scaleFolder = gui.addFolder('Scale');
-      scaleFolder.add(modelRef.current.scale, 'x', 0, 10);
-      scaleFolder.add(modelRef.current.scale, 'y', 0, 10);
-      scaleFolder.add(modelRef.current.scale, 'z', 0, 10);
-      scaleFolder.open();
-      const lightFolder = gui.addFolder('Light');
-      lightFolder.add(lightRef.current.position, 'x', -25, 25);
-      lightFolder.add(lightRef.current.position, 'y', -25, 25);
-      lightFolder.add(lightRef.current.position, 'z', -25, 25);
-      lightFolder.open();
-    };
     const render = () => {
@@ -244,2 +221,34 @@ if (!isInViewport) return;
   }, [assetUrl, backgroundColor, enableLights, enableOrbitControls, enableStatsPanel, setPosition, positionVector, setScale, scaleVector]);
+  (0, _react.useEffect)(() => {
+    if (typeof window === 'undefined') return;
+    if (isModelLoaded && enableGUI) {
+      let gui;
+      Promise.resolve().then(() => _interopRequireWildcard(require('dat.gui'))).then(module => {
+        gui = new module.GUI();
+        const cameraFolder = gui.addFolder('Camera');
+        cameraFolder.add(cameraRef.current.position, 'x', -50, 50);
+        cameraFolder.add(cameraRef.current.position, 'y', -50, 50);
+        cameraFolder.add(cameraRef.current.position, 'z', -50, 50);
+        cameraFolder.open();
+        const positionFolder = gui.addFolder('Position');
+        positionFolder.add(modelRef.current.position, 'x', -35, 35);
+        positionFolder.add(modelRef.current.position, 'y', -35, 35);
+        positionFolder.add(modelRef.current.position, 'z', -35, 35);
+        positionFolder.open();
+        const scaleFolder = gui.addFolder('Scale');
+        scaleFolder.add(modelRef.current.scale, 'x', 0, 10);
+        scaleFolder.add(modelRef.current.scale, 'y', 0, 10);
+        scaleFolder.add(modelRef.current.scale, 'z', 0, 10);
+        scaleFolder.open();
+        const lightFolder = gui.addFolder('Light');
+        lightFolder.add(lightRef.current.position, 'x', -25, 25);
+        lightFolder.add(lightRef.current.position, 'y', -25, 25);
+        lightFolder.add(lightRef.current.position, 'z', -25, 25);
+        lightFolder.open();
+      });
+      return () => {
+        if (gui) gui.destroy();
+      };
+    }
+  }, [isModelLoaded, enableGUI]);
   return _react.default.createElement(_styles.Wrapper, null, isWebGLAvailable ? _react.default.createElement(_styles.CanvasWrapper, {
@@ -246,0 +255,0 @@ ref: mountRef,

lib/index.js

@@ -37,2 +37,3 @@ import React, { useRef, useEffect, useState } from 'react';
   const [isInViewport, setIsInViewport] = useState(true);
+  const [isModelLoaded, setIsModelLoaded] = useState(false);
 
@@ -182,3 +183,3 @@ const fluid =
           setCameraPosition();
-          initGUI();
+          setIsModelLoaded(true);
 
@@ -207,31 +208,2 @@ if (enableRaycaster) {
 
-    const initGUI = () => {
-      if (!enableGUI) return;
-
-      const gui = new GUI();
-      const cameraFolder = gui.addFolder('Camera');
-      cameraFolder.add(cameraRef.current.position, 'x', -50, 50);
-      cameraFolder.add(cameraRef.current.position, 'y', -50, 50);
-      cameraFolder.add(cameraRef.current.position, 'z', -50, 50);
-      cameraFolder.open();
-
-      const positionFolder = gui.addFolder('Position');
-      positionFolder.add(modelRef.current.position, 'x', -35, 35);
-      positionFolder.add(modelRef.current.position, 'y', -35, 35);
-      positionFolder.add(modelRef.current.position, 'z', -35, 35);
-      positionFolder.open();
-
-      const scaleFolder = gui.addFolder('Scale');
-      scaleFolder.add(modelRef.current.scale, 'x', 0, 10);
-      scaleFolder.add(modelRef.current.scale, 'y', 0, 10);
-      scaleFolder.add(modelRef.current.scale, 'z', 0, 10);
-      scaleFolder.open();
-
-      const lightFolder = gui.addFolder('Light');
-      lightFolder.add(lightRef.current.position, 'x', -25, 25);
-      lightFolder.add(lightRef.current.position, 'y', -25, 25);
-      lightFolder.add(lightRef.current.position, 'z', -25, 25);
-      lightFolder.open();
-    };
-
     const render = () => {
@@ -292,2 +264,40 @@ if (!isInViewport) return;
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (isModelLoaded && enableGUI) {
+      let gui;
+      import('dat.gui').then(module => {
+        gui = new module.GUI();
+
+        const cameraFolder = gui.addFolder('Camera');
+        cameraFolder.add(cameraRef.current.position, 'x', -50, 50);
+        cameraFolder.add(cameraRef.current.position, 'y', -50, 50);
+        cameraFolder.add(cameraRef.current.position, 'z', -50, 50);
+        cameraFolder.open();
+
+        const positionFolder = gui.addFolder('Position');
+        positionFolder.add(modelRef.current.position, 'x', -35, 35);
+        positionFolder.add(modelRef.current.position, 'y', -35, 35);
+        positionFolder.add(modelRef.current.position, 'z', -35, 35);
+        positionFolder.open();
+
+        const scaleFolder = gui.addFolder('Scale');
+        scaleFolder.add(modelRef.current.scale, 'x', 0, 10);
+        scaleFolder.add(modelRef.current.scale, 'y', 0, 10);
+        scaleFolder.add(modelRef.current.scale, 'z', 0, 10);
+        scaleFolder.open();
+
+        const lightFolder = gui.addFolder('Light');
+        lightFolder.add(lightRef.current.position, 'x', -25, 25);
+        lightFolder.add(lightRef.current.position, 'y', -25, 25);
+        lightFolder.add(lightRef.current.position, 'z', -25, 25);
+        lightFolder.open();
+      });
+
+      return () => {
+        if (gui) gui.destroy();
+      };
+    }
+  }, [isModelLoaded, enableGUI]);
+
   return (
@@ -294,0 +304,0 @@ <Wrapper>

package.json

 {
   "name": "@titelmedia/bricks-3d-model",
-  "version": "2.24.1",
+  "version": "2.25.0",
   "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
@@ -42,3 +42,3 @@ "keywords": [],
   },
-  "gitHead": "5127c2e1c418f6062a6d0fa489ea45b9f3ff37a5"
+  "gitHead": "f17ae90006829d6732944e15f18c286240ed66b4"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64749

increased by2.38%

Lines of code

779

increased by2.37%

No dependency changes