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

Comparing version 2.25.4 to 2.25.5

dist/index.js

@@ -43,4 +43,5 @@ "use strict";
   const [isIntersecting, setIsIntersecting] = (0, _react.useState)(false);
-  const [isInViewport, setIsInViewport] = (0, _react.useState)(true);
   const [isModelLoaded, setIsModelLoaded] = (0, _react.useState)(false);
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  const stopAnimation = (0, _react.useRef)(false);
   const fluid = fallbackImage?.fluid || fallbackImage?.responsiveImage || fallbackImage;
@@ -52,4 +53,16 @@ const mountRef = (0, _react.useRef)(null);
   const controlsRef = (0, _react.useRef)(null);
+  const renderRef = (0, _react.useRef)(null);
+  const sceneRef = (0, _react.useRef)(null);
   const cameraRef = (0, _react.useRef)(null);
   const originalCameraPosition = (0, _react.useRef)(null);
+  const render = () => {
+    if (controlsRef.current) controlsRef.current.update();
+    if (statsRef.current) statsRef.current.update();
+    renderRef.current.render(sceneRef.current, cameraRef.current);
+  };
+  const animate = () => {
+    if (stopAnimation.current) return;
+    requestAnimationFrame(animate);
+    render();
+  };
   const resize = ({
@@ -66,8 +79,8 @@ renderer
     renderer.setSize(width, height);
+    const isMobileView = window.innerWidth <= _breakpoints.BREAKPOINTS.sm;
+    setIsMobile(isMobileView);
     if (window.innerWidth > _breakpoints.BREAKPOINTS.xs && window.innerWidth <= _breakpoints.BREAKPOINTS.sm) {
       cameraRef.current.fov = 95;
-    } else if (window.innerWidth <= _breakpoints.BREAKPOINTS.xs) {
-      cameraRef.current.fov = 100;
     } else {
-      cameraRef.current.fov = 75;
+      cameraRef.current.fov = isMobileView ? 100 : 75;
     }
@@ -115,12 +128,13 @@ cameraRef.current.updateProjectionMatrix();
     if (!assetUrl) return;
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(backgroundColor || '#000');
+    setIsMobile(window.innerWidth <= _breakpoints.BREAKPOINTS.sm);
+    sceneRef.current = new THREE.Scene();
+    sceneRef.current.background = new THREE.Color(backgroundColor || '#000');
     cameraRef.current = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    const renderer = new THREE.WebGLRenderer({
+    renderRef.current = new THREE.WebGLRenderer({
       alpha: !!backgroundColor
     });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    renderer.setPixelRatio(window.devicePixelRatio);
-    mountRef.current.appendChild(renderer.domElement);
-    controlsRef.current = new _OrbitControls.OrbitControls(cameraRef.current, renderer.domElement);
+    renderRef.current.setSize(window.innerWidth, window.innerHeight);
+    renderRef.current.setPixelRatio(window.devicePixelRatio);
+    mountRef.current.appendChild(renderRef.current.domElement);
+    controlsRef.current = new _OrbitControls.OrbitControls(cameraRef.current, renderRef.current.domElement);
     controlsRef.current.enableDamping = true;
@@ -133,3 +147,3 @@ controlsRef.current.enableOrbitControls = enableOrbitControls;
       lightRef.current = new THREE.PointLight(0xffffff, 1000);
-      scene.add(lightRef.current);
+      sceneRef.current.add(lightRef.current);
     }
@@ -155,3 +169,3 @@ if (enableStatsPanel) {
         modelRef.current = extension === 'gltf' || extension === 'glb' ? object.scene : object;
-        scene.add(modelRef.current);
+        sceneRef.current.add(modelRef.current);
         setLightPosition();
@@ -176,21 +190,14 @@ setModelPosition();
         resize({
-          renderer
+          renderer: renderRef.current
         });
-        animate();
       }, undefined, error => console.error('Error loading model:', error));
     };
-    const render = () => {
-      if (!isInViewport) return;
-      if (controlsRef.current) controlsRef.current.update();
-      if (statsRef.current) statsRef.current.update();
-      renderer.render(scene, cameraRef.current);
-    };
-    const animate = () => {
-      if (!isInViewport) return;
-      requestAnimationFrame(animate);
-      render();
-    };
     const observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
-        setIsInViewport(entry.isIntersecting);
+        if (entry.isIntersecting) {
+          stopAnimation.current = false;
+          animate();
+        } else {
+          stopAnimation.current = true;
+        }
       });
@@ -205,3 +212,3 @@ }, {
     window.addEventListener('resize', () => resize({
-      renderer
+      renderer: renderRef.current
     }));
@@ -211,7 +218,7 @@ return () => {
         observer.unobserve(mountRef.current);
-        while (scene.children.length > 0) {
-          scene.remove(scene.children[0]);
+        while (sceneRef.current.children.length > 0) {
+          sceneRef.current.remove(sceneRef.current.children[0]);
         }
-        renderer.dispose();
-        mountRef.current.removeChild(renderer.domElement);
+        renderRef.current.dispose();
+        mountRef.current.removeChild(renderRef.current.domElement);
         if (enableStatsPanel && statsRef.current) {
@@ -222,3 +229,3 @@ mountRef.current.removeChild(statsRef.current.dom);
       window.removeEventListener('resize', () => resize({
-        renderer
+        renderer: renderRef.current
       }));
@@ -259,2 +266,8 @@ };
   }, [isModelLoaded, enableGui]);
+  (0, _react.useEffect)(() => {
+    if (controlsRef.current) {
+      controlsRef.current.enableZoom = !isMobile && enableZoom;
+      controlsRef.current.update();
+    }
+  }, [isMobile, enableZoom]);
   return _react.default.createElement(_styles.Wrapper, null, isWebGLAvailable ? _react.default.createElement(_styles.CanvasWrapper, {
@@ -261,0 +274,0 @@ ref: mountRef,

lib/index.js

@@ -35,5 +35,7 @@ import React, { useRef, useEffect, useState } from 'react';
   const [isIntersecting, setIsIntersecting] = useState(false);
-  const [isInViewport, setIsInViewport] = useState(true);
   const [isModelLoaded, setIsModelLoaded] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
+  const stopAnimation = useRef(false);
+
   const fluid =
@@ -47,5 +49,19 @@ fallbackImage?.fluid || fallbackImage?.responsiveImage || fallbackImage;
   const controlsRef = useRef(null);
+  const renderRef = useRef(null);
+  const sceneRef = useRef(null);
   const cameraRef = useRef(null);
   const originalCameraPosition = useRef(null);
 
+  const render = () => {
+    if (controlsRef.current) controlsRef.current.update();
+    if (statsRef.current) statsRef.current.update();
+    renderRef.current.render(sceneRef.current, cameraRef.current);
+  };
+
+  const animate = () => {
+    if (stopAnimation.current) return;
+    requestAnimationFrame(animate);
+    render();
+  };
+
   const resize = ({ renderer }) => {
@@ -58,2 +74,5 @@ if (!mountRef.current) return;
 
+    const isMobileView = window.innerWidth <= BREAKPOINTS.sm;
+    setIsMobile(isMobileView);
+
     if (
@@ -64,6 +83,4 @@ window.innerWidth > BREAKPOINTS.xs &&
       cameraRef.current.fov = 95;
-    } else if (window.innerWidth <= BREAKPOINTS.xs) {
-      cameraRef.current.fov = 100;
     } else {
-      cameraRef.current.fov = 75;
+      cameraRef.current.fov = isMobileView ? 100 : 75;
     }
@@ -73,2 +90,3 @@
   };
+
   const setLightPosition = () => {
@@ -125,5 +143,7 @@ if (!enableLights || !modelRef.current) return;
 
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(backgroundColor || '#000');
+    setIsMobile(window.innerWidth <= BREAKPOINTS.sm);
 
+    sceneRef.current = new THREE.Scene();
+    sceneRef.current.background = new THREE.Color(backgroundColor || '#000');
+
     cameraRef.current = new THREE.PerspectiveCamera(
@@ -136,10 +156,10 @@ 75,
 
-    const renderer = new THREE.WebGLRenderer({ alpha: !!backgroundColor });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    renderer.setPixelRatio(window.devicePixelRatio);
-    mountRef.current.appendChild(renderer.domElement);
+    renderRef.current = new THREE.WebGLRenderer({ alpha: !!backgroundColor });
+    renderRef.current.setSize(window.innerWidth, window.innerHeight);
+    renderRef.current.setPixelRatio(window.devicePixelRatio);
+    mountRef.current.appendChild(renderRef.current.domElement);
 
     controlsRef.current = new OrbitControls(
       cameraRef.current,
-      renderer.domElement
+      renderRef.current.domElement
     );
@@ -150,2 +170,3 @@ controlsRef.current.enableDamping = true;
     controlsRef.current.enablePan = enablePan;
+
     controlsRef.current.enableZoom = enableZoom;
@@ -156,3 +177,3 @@ controlsRef.current.enableRotate = enableRotate;
       lightRef.current = new THREE.PointLight(0xffffff, 1000);
-      scene.add(lightRef.current);
+      sceneRef.current.add(lightRef.current);
     }
@@ -185,3 +206,3 @@
             extension === 'gltf' || extension === 'glb' ? object.scene : object;
-          scene.add(modelRef.current);
+          sceneRef.current.add(modelRef.current);
           setLightPosition();
@@ -207,4 +228,3 @@ setModelPosition();
 
-          resize({ renderer });
-          animate();
+          resize({ renderer: renderRef.current });
         },
@@ -216,19 +236,11 @@ undefined,
 
-    const render = () => {
-      if (!isInViewport) return;
-      if (controlsRef.current) controlsRef.current.update();
-      if (statsRef.current) statsRef.current.update();
-      renderer.render(scene, cameraRef.current);
-    };
-
-    const animate = () => {
-      if (!isInViewport) return;
-      requestAnimationFrame(animate);
-      render();
-    };
-
     const observer = new IntersectionObserver(
       entries => {
         entries.forEach(entry => {
-          setIsInViewport(entry.isIntersecting);
+          if (entry.isIntersecting) {
+            stopAnimation.current = false;
+            animate();
+          } else {
+            stopAnimation.current = true;
+          }
         });
@@ -244,3 +256,5 @@ },
     loadModel();
-    window.addEventListener('resize', () => resize({ renderer }));
+    window.addEventListener('resize', () =>
+      resize({ renderer: renderRef.current })
+    );
 
@@ -250,7 +264,7 @@ return () => {
         observer.unobserve(mountRef.current);
-        while (scene.children.length > 0) {
-          scene.remove(scene.children[0]);
+        while (sceneRef.current.children.length > 0) {
+          sceneRef.current.remove(sceneRef.current.children[0]);
         }
-        renderer.dispose();
-        mountRef.current.removeChild(renderer.domElement);
+        renderRef.current.dispose();
+        mountRef.current.removeChild(renderRef.current.domElement);
         if (enableStatsPanel && statsRef.current) {
@@ -260,3 +274,5 @@ mountRef.current.removeChild(statsRef.current.dom);
       }
-      window.removeEventListener('resize', () => resize({ renderer }));
+      window.removeEventListener('resize', () =>
+        resize({ renderer: renderRef.current })
+      );
     };
@@ -313,2 +329,9 @@ }, [
 
+  useEffect(() => {
+    if (controlsRef.current) {
+      controlsRef.current.enableZoom = !isMobile && enableZoom;
+      controlsRef.current.update();
+    }
+  }, [isMobile, enableZoom]);
+
   return (
@@ -315,0 +338,0 @@ <Wrapper>

package.json

 {
   "name": "@titelmedia/bricks-3d-model",
-  "version": "2.25.4",
+  "version": "2.25.5",
   "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",
@@ -40,7 +40,5 @@ "keywords": [],
     "@types/dat.gui": "0.7.7",
-    "@types/three": "0.160.0",
-    "dat.gui": "0.7.9",
-    "stats.js": "0.17.0"
+    "@types/three": "0.160.0"
   },
-  "gitHead": "e01aa790bb366baf297cf984f7f616bc036c37ee"
+  "gitHead": "7e42c105adaa8a0978b748a186b6a8896b86a88d"
 }

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

67420

increased by4.26%

Dev dependency count

2

decreased by-50%

Lines of code

807

increased by3.86%

No dependency changes