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

Comparing version 2.25.5 to 2.25.6

dist/index.js

@@ -11,6 +11,2 @@ "use strict";
 var THREE = _interopRequireWildcard(require("three"));
-var _OrbitControls = require("three/examples/jsm/controls/OrbitControls");
-var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
-var _OBJLoader = require("three/examples/jsm/loaders/OBJLoader");
-var _FBXLoader = require("three/examples/jsm/loaders/FBXLoader");
 var _raycaster = _interopRequireDefault(require("./raycaster"));
@@ -42,2 +38,3 @@ var _stats = _interopRequireDefault(require("three/examples/jsm/libs/stats.module"));
 }) => {
+  const [ThreeModules, setThreeModules] = (0, _react.useState)(null);
   const [isWebGLAvailable, setIsWebGLAvailable] = (0, _react.useState)(true);
@@ -58,2 +55,27 @@ const [isIntersecting, setIsIntersecting] = (0, _react.useState)(false);
   const originalCameraPosition = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    let isMounted = true;
+    Promise.all([Promise.resolve().then(() => _interopRequireWildcard(require('three'))), Promise.resolve().then(() => _interopRequireWildcard(require('three/examples/jsm/controls/OrbitControls'))), Promise.resolve().then(() => _interopRequireWildcard(require('three/examples/jsm/loaders/GLTFLoader'))), Promise.resolve().then(() => _interopRequireWildcard(require('three/examples/jsm/loaders/OBJLoader'))), Promise.resolve().then(() => _interopRequireWildcard(require('three/examples/jsm/loaders/FBXLoader')))]).then(([THREE, {
+      OrbitControls
+    }, {
+      GLTFLoader
+    }, {
+      OBJLoader
+    }, {
+      FBXLoader
+    }]) => {
+      if (isMounted) {
+        setThreeModules({
+          THREE,
+          OrbitControls,
+          GLTFLoader,
+          OBJLoader,
+          FBXLoader
+        });
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
   const render = () => {
@@ -122,2 +144,10 @@ if (controlsRef.current) controlsRef.current.update();
     if (typeof window === 'undefined') return;
+    if (!ThreeModules || !assetUrl) return;
+    const {
+      THREE,
+      OrbitControls,
+      GLTFLoader,
+      OBJLoader,
+      FBXLoader
+    } = ThreeModules;
     if (!THREE.WebGLRenderer) {
@@ -128,3 +158,2 @@ console.error('WebGL is not supported in this browser');
     }
-    if (!assetUrl) return;
     setIsMobile(window.innerWidth <= _breakpoints.BREAKPOINTS.sm);
@@ -140,3 +169,3 @@ sceneRef.current = new THREE.Scene();
     mountRef.current.appendChild(renderRef.current.domElement);
-    controlsRef.current = new _OrbitControls.OrbitControls(cameraRef.current, renderRef.current.domElement);
+    controlsRef.current = new OrbitControls(cameraRef.current, renderRef.current.domElement);
     controlsRef.current.enableDamping = true;
@@ -158,6 +187,6 @@ controlsRef.current.enableOrbitControls = enableOrbitControls;
       const loaders = {
-        gltf: new _GLTFLoader.GLTFLoader(),
-        glb: new _GLTFLoader.GLTFLoader(),
-        obj: new _OBJLoader.OBJLoader(),
-        fbx: new _FBXLoader.FBXLoader()
+        gltf: new GLTFLoader(),
+        glb: new GLTFLoader(),
+        obj: new OBJLoader(),
+        fbx: new FBXLoader()
       };
@@ -230,3 +259,3 @@ const loader = loaders[extension];
     };
-  }, [assetUrl, backgroundColor, enableLights, enableOrbitControls, enableStatsPanel, setPosition, positionVector, setScale, scaleVector]);
+  }, [assetUrl, backgroundColor, enableLights, enableOrbitControls, enableStatsPanel, setPosition, positionVector, setScale, scaleVector, ThreeModules]);
   (0, _react.useEffect)(() => {
@@ -233,0 +262,0 @@ if (typeof window === 'undefined') return;

dist/styles.js

@@ -8,2 +8,3 @@ "use strict";
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _breakpoints = require("@titelmedia/bricks-theme/lib/variables/breakpoints");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,2 +17,7 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div`
   width: 100%;
+  canvas {
+    @media (min-width: ${_breakpoints.BREAKPOINTS.sm}px) {
+      touch-action: auto !important;
+    }
+  }
 `;
@@ -18,0 +24,0 @@ const ImageContainer = exports.ImageContainer = _styledComponents.default.div`

lib/index.js

@@ -5,6 +5,2 @@ import React, { useRef, useEffect, useState } from 'react';
 import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 import raycaster from './raycaster';
@@ -34,2 +30,3 @@ import Stats from 'three/examples/jsm/libs/stats.module';
 }) => {
+  const [ThreeModules, setThreeModules] = useState(null);
   const [isWebGLAvailable, setIsWebGLAvailable] = useState(true);
@@ -55,2 +52,36 @@ const [isIntersecting, setIsIntersecting] = useState(false);
 
+  useEffect(() => {
+    let isMounted = true;
+
+    Promise.all([
+      import('three'),
+      import('three/examples/jsm/controls/OrbitControls'),
+      import('three/examples/jsm/loaders/GLTFLoader'),
+      import('three/examples/jsm/loaders/OBJLoader'),
+      import('three/examples/jsm/loaders/FBXLoader'),
+    ]).then(
+      ([
+        THREE,
+        { OrbitControls },
+        { GLTFLoader },
+        { OBJLoader },
+        { FBXLoader },
+      ]) => {
+        if (isMounted) {
+          setThreeModules({
+            THREE,
+            OrbitControls,
+            GLTFLoader,
+            OBJLoader,
+            FBXLoader,
+          });
+        }
+      }
+    );
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   const render = () => {
@@ -133,2 +164,7 @@ if (controlsRef.current) controlsRef.current.update();
 
+    if (!ThreeModules || !assetUrl) return;
+
+    const { THREE, OrbitControls, GLTFLoader, OBJLoader, FBXLoader } =
+      ThreeModules;
+
     if (!THREE.WebGLRenderer) {
@@ -140,4 +176,2 @@ console.error('WebGL is not supported in this browser');
 
-    if (!assetUrl) return;
-
     setIsMobile(window.innerWidth <= BREAKPOINTS.sm);
@@ -279,2 +313,3 @@
     scaleVector,
+    ThreeModules,
   ]);
@@ -281,0 +316,0 @@

lib/styles.js

 import styled from 'styled-components';
+import { BREAKPOINTS } from '@titelmedia/bricks-theme/lib/variables/breakpoints';
 
@@ -10,2 +11,7 @@ export const Wrapper = styled.div`
   width: 100%;
+  canvas {
+    @media (min-width: ${BREAKPOINTS.sm}px) {
+      touch-action: auto !important;
+    }
+  }
 `;
@@ -12,0 +18,0 @@

package.json

 {
   "name": "@titelmedia/bricks-3d-model",
-  "version": "2.25.5",
+  "version": "2.25.6",
   "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": "7e42c105adaa8a0978b748a186b6a8896b86a88d"
+  "gitHead": "5ec2fb28d19383333f5cf00a2a265d5eb41fdde8"
 }

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

71155

increased by5.54%

Lines of code

880

increased by9.05%

No dependency changes