onLoad

xiaxiangfeng · May 9, 2023 · 9ce6349 · 9ce6349
1 parent 4d31d87
commit 9ce6349
Show file tree

Hide file tree

Showing 18 changed files with 137 additions and 11 deletions.
diff --git a/dist/esm/FBX/index.d.ts b/dist/esm/FBX/index.d.ts
@@ -2,5 +2,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<{
     src: string;
     backgroundColor: string;
+    onLoad: any;
 } & React.RefAttributes<unknown>>;
 export default _default;
diff --git a/dist/esm/FBX/index.js b/dist/esm/FBX/index.js
@@ -5,7 +5,8 @@ import useScene from "../useScene";
 
 function FBX(_ref, ref) {
   var src = _ref.src,
-      backgroundColor = _ref.backgroundColor;
+      backgroundColor = _ref.backgroundColor,
+      onLoad = _ref.onLoad;
   var canvasRef = useRef(null);
 
   var _useScene = useScene(canvasRef, backgroundColor),
@@ -35,6 +36,7 @@ function FBX(_ref, ref) {
     (_scene$current2 = scene.current) === null || _scene$current2 === void 0 ? void 0 : _scene$current2.add(directionalLight);
     var loader = new FBXLoader();
     loader.load(src, function (data) {
+      onLoad && onLoad();
       add2Scene(data);
       animate();
     });

diff --git a/dist/esm/GLTF/index.d.ts b/dist/esm/GLTF/index.d.ts
@@ -2,5 +2,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<{
     src: string;
     backgroundColor: string;
+    onLoad: any;
 } & React.RefAttributes<unknown>>;
 export default _default;
diff --git a/dist/esm/GLTF/index.js b/dist/esm/GLTF/index.js
@@ -6,7 +6,8 @@ import useScene from "../useScene";
 
 function GLTF(_ref, ref) {
   var src = _ref.src,
-      backgroundColor = _ref.backgroundColor;
+      backgroundColor = _ref.backgroundColor,
+      onLoad = _ref.onLoad;
   var canvasRef = useRef(null);
 
   var _useScene = useScene(canvasRef, backgroundColor),
@@ -31,6 +32,7 @@ function GLTF(_ref, ref) {
     scene.current && (scene.current.environment = pmremGenerator.fromScene(environment, 0.04).texture);
     var loader = new GLTFLoader();
     loader.load(src, function (gltf) {
+      onLoad && onLoad();
       add2Scene(gltf.scene);
       render();
     });

diff --git a/dist/esm/Group/index.d.ts b/dist/esm/Group/index.d.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<{
+    list: string[];
+    backgroundColor: string;
+    onLoad: any;
+} & React.RefAttributes<unknown>>;
+export default _default;
diff --git a/dist/esm/Group/index.js b/dist/esm/Group/index.js
@@ -0,0 +1,85 @@
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import * as THREE from 'three';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import useScene from "../useScene";
+
+function Group(_ref, ref) {
+  var list = _ref.list,
+      backgroundColor = _ref.backgroundColor,
+      onLoad = _ref.onLoad;
+  var canvasRef = useRef(null);
+
+  var _useScene = useScene(canvasRef, backgroundColor),
+      add2Scene = _useScene.add2Scene,
+      scene = _useScene.scene,
+      animate = _useScene.animate,
+      renderer = _useScene.renderer,
+      render = _useScene.render;
+
+  useImperativeHandle(ref, function () {
+    return {
+      getSnapshot: function getSnapshot() {
+        var _renderer$current;
+
+        render();
+        return (_renderer$current = renderer.current) === null || _renderer$current === void 0 ? void 0 : _renderer$current.domElement.toDataURL('image/png', 1);
+      }
+    };
+  });
+  useEffect(function () {
+    var _scene$current, _scene$current2;
+
+    var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    (_scene$current = scene.current) === null || _scene$current === void 0 ? void 0 : _scene$current.add(ambientLight);
+    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(1, 1, 0).normalize();
+    (_scene$current2 = scene.current) === null || _scene$current2 === void 0 ? void 0 : _scene$current2.add(directionalLight);
+    var loadCount = 0;
+    var modelCount = list.length;
+    list.forEach(function (url) {
+      var lowerUrl = url.toLowerCase();
+
+      if (lowerUrl.endsWith('fbx')) {
+        var loader = new FBXLoader();
+        loader.load(url, function (data) {
+          loadCount = loadCount + 1;
+
+          if (loadCount === modelCount) {
+            onLoad && onLoad();
+          }
+
+          add2Scene(data);
+          animate();
+        });
+      }
+
+      if (lowerUrl.endsWith('gltf') || lowerUrl.endsWith('glb')) {
+        var _loader = new GLTFLoader();
+
+        _loader.load(url, function (gltf) {
+          loadCount = loadCount + 1;
+
+          if (loadCount === modelCount) {
+            onLoad && onLoad();
+          }
+
+          add2Scene(gltf.scene);
+          render();
+        });
+      }
+    });
+    return function () {
+      loadCount = 0;
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default /*#__PURE__*/forwardRef(Group);
diff --git a/dist/esm/OBJ/index.d.ts b/dist/esm/OBJ/index.d.ts
@@ -2,5 +2,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<{
     src: string;
     backgroundColor: string;
+    onLoad: any;
 } & React.RefAttributes<unknown>>;
 export default _default;
diff --git a/dist/esm/OBJ/index.js b/dist/esm/OBJ/index.js
@@ -5,7 +5,8 @@ import useScene from "../useScene";
 
 function OBJ(_ref, ref) {
   var src = _ref.src,
-      backgroundColor = _ref.backgroundColor;
+      backgroundColor = _ref.backgroundColor,
+      onLoad = _ref.onLoad;
   var canvasRef = useRef(null);
 
   var _useScene = useScene(canvasRef, backgroundColor),
@@ -35,6 +36,7 @@ function OBJ(_ref, ref) {
     (_scene$current2 = scene.current) === null || _scene$current2 === void 0 ? void 0 : _scene$current2.add(directionalLight);
     var loader = new OBJLoader();
     loader.load(src, function (data) {
+      onLoad && onLoad();
       add2Scene(data);
       animate();
     });

diff --git a/dist/esm/index.d.ts b/dist/esm/index.d.ts
@@ -20,5 +20,9 @@ declare const _default: {
     } & import("react").RefAttributes<unknown>>;
     PLY: typeof PLY;
     STL: typeof STL;
+    Group: import("react").ForwardRefExoticComponent<{
+        list: string[];
+        backgroundColor: string;
+    } & import("react").RefAttributes<unknown>>;
 };
 export default _default;
diff --git a/dist/esm/index.js b/dist/esm/index.js
@@ -4,11 +4,13 @@ import FBX from "./FBX";
 import OBJ from "./OBJ";
 import PLY from "./PLY";
 import STL from "./STL";
+import Group from "./Group";
 export default {
   GLTF: GLTF,
   Collada: Collada,
   FBX: FBX,
   OBJ: OBJ,
   PLY: PLY,
-  STL: STL
+  STL: STL,
+  Group: Group
 };
diff --git a/dist/esm/useScene.js b/dist/esm/useScene.js
@@ -34,6 +34,7 @@ function useScene(canvas, backgroundColor, isRotation) {
         offsetWidth = _canvas$current.offsetWidth;
     var camera = new THREE.PerspectiveCamera(45, offsetWidth / offsetHeight, 0.01, 100000);
     cameraRef.current = camera;
+    camera.up.set(0, 1, 0);
     camera.position.set(0, 0, 0);
     var scene = new THREE.Scene();
     scene.background = new THREE.Color(backgroundColor || 0xbbbbbb);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "react-3dmodelx",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "3D models viewer with react.js",
   "author": "xiaxiangfeng",
   "license": "MIT",

diff --git a/src/FBX/index.tsx b/src/FBX/index.tsx
@@ -4,7 +4,7 @@ import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 import useScene from '../useScene';
 
 function FBX(
-  { src, backgroundColor }: { src: string; backgroundColor: string },
+  { src, backgroundColor, onLoad }: { src: string; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -29,6 +29,7 @@ function FBX(
 
     const loader = new FBXLoader();
     loader.load(src, function (data) {
+      onLoad && onLoad();
       add2Scene(data);
       animate();
     });

diff --git a/src/GLTF/index.md b/src/GLTF/index.md
@@ -14,7 +14,7 @@ import Model from 'react-3dmodelx';
 
 export default () => (
   <div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>
-    <Model.GLTF src="./Duck.gltf" />
+    <Model.GLTF src="https://taiji.dataojo.com/docloudresource/models/docity_builder/architecture/tianyan/TY/TY.min.glb" />
   </div>
 );
 ```
diff --git a/src/GLTF/index.tsx b/src/GLTF/index.tsx
@@ -5,7 +5,7 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import useScene from '../useScene';
 
 function GLTF(
-  { src, backgroundColor }: { src: string; backgroundColor: string },
+  { src, backgroundColor, onLoad }: { src: string; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -28,6 +28,7 @@ function GLTF(
 
     const loader = new GLTFLoader();
     loader.load(src, function (gltf) {
+      onLoad && onLoad();
       add2Scene(gltf.scene);
       render();
     });

diff --git a/src/Group/index.md b/src/Group/index.md
@@ -14,7 +14,7 @@ import Model from 'react-3dmodelx';
 
 export default () => (
   <div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>
-    <Model.Group list={['./chair1.gltf', './chair.gltf']} />
+    <Model.Group list={['./chair1.gltf', './chair.gltf']} onLoad={() => {}} />
   </div>
 );
 ```
diff --git a/src/Group/index.tsx b/src/Group/index.tsx
@@ -5,7 +5,7 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import useScene from '../useScene';
 
 function Group(
-  { list, backgroundColor }: { list: string[]; backgroundColor: string },
+  { list, backgroundColor, onLoad }: { list: string[]; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -28,24 +28,39 @@ function Group(
 
     scene.current?.add(directionalLight);
 
+    let loadCount = 0;
+    let modelCount = list.length;
+
     list.forEach((url) => {
       const lowerUrl = url.toLowerCase();
 
       if (lowerUrl.endsWith('fbx')) {
         const loader = new FBXLoader();
         loader.load(url, function (data: any) {
+          loadCount = loadCount + 1;
+          if (loadCount === modelCount) {
+            onLoad && onLoad();
+          }
           add2Scene(data);
           animate();
         });
       }
       if (lowerUrl.endsWith('gltf') || lowerUrl.endsWith('glb')) {
         const loader = new GLTFLoader();
         loader.load(url, function (gltf: any) {
+          loadCount = loadCount + 1;
+          if (loadCount === modelCount) {
+            onLoad && onLoad();
+          }
           add2Scene(gltf.scene);
           render();
         });
       }
     });
+
+    return () => {
+      loadCount = 0;
+    };
   }, []);
 
   return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;

diff --git a/src/OBJ/index.tsx b/src/OBJ/index.tsx
@@ -4,7 +4,7 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 import useScene from '../useScene';
 
 function OBJ(
-  { src, backgroundColor }: { src: string; backgroundColor: string },
+  { src, backgroundColor, onLoad }: { src: string; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -29,6 +29,7 @@ function OBJ(
 
     const loader = new OBJLoader();
     loader.load(src, function (data) {
+      onLoad && onLoad();
       add2Scene(data);
       animate();
     });