docs

README.md

@@ -1,4 +1,4 @@
-# react-3d-model
+# react-3dmodelx
 
 > 3D models viewer with react.js。文档地址：https://xiaxiangfeng.github.io/react-3d-model/index.html#/
 
@@ -7,14 +7,14 @@
 ## 从 NPM 下载包
 
 ```npm
-npm i react-3d-model
+npm i react-3dmodelx
 ```
 
 ## Basic usage
 
 ```tsx
 import React from 'react';
-import Model from 'react-3d-model';
+import Model from 'react-3dmodelx';
 
 export default () => (
   <div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>

dist/esm/Collada/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<{
+    src: string;
+    backgroundColor: string;
+    isRotation?: boolean | undefined;
+} & React.RefAttributes<unknown>>;
+export default _default;

dist/esm/Collada/index.js

@@ -0,0 +1,52 @@
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import * as THREE from 'three';
+import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader';
+import useScene from "../useScene";
+
+function Collada(_ref, ref) {
+  var src = _ref.src,
+      backgroundColor = _ref.backgroundColor,
+      isRotation = _ref.isRotation;
+  var canvasRef = useRef(null);
+
+  var _useScene = useScene(canvasRef, backgroundColor, isRotation),
+      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 loader = new ColladaLoader();
+    loader.load(src, function (data) {
+      add2Scene(data.scene);
+      animate();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default /*#__PURE__*/forwardRef(Collada);

dist/esm/FBX/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<{
+    src: string;
+    backgroundColor: string;
+} & React.RefAttributes<unknown>>;
+export default _default;

dist/esm/FBX/index.js

@@ -0,0 +1,51 @@
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import * as THREE from 'three';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import useScene from "../useScene";
+
+function FBX(_ref, ref) {
+  var src = _ref.src,
+      backgroundColor = _ref.backgroundColor;
+  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 loader = new FBXLoader();
+    loader.load(src, function (data) {
+      add2Scene(data);
+      animate();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default /*#__PURE__*/forwardRef(FBX);

dist/esm/GLTF/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<{
+    src: string;
+    backgroundColor: string;
+} & React.RefAttributes<unknown>>;
+export default _default;

dist/esm/GLTF/index.js

@@ -0,0 +1,47 @@
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import * as THREE from 'three';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import useScene from "../useScene";
+
+function GLTF(_ref, ref) {
+  var src = _ref.src,
+      backgroundColor = _ref.backgroundColor;
+  var canvasRef = useRef(null);
+
+  var _useScene = useScene(canvasRef, backgroundColor),
+      add2Scene = _useScene.add2Scene,
+      scene = _useScene.scene,
+      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 environment = new RoomEnvironment();
+    var pmremGenerator = new THREE.PMREMGenerator(renderer.current);
+    scene.current && (scene.current.environment = pmremGenerator.fromScene(environment, 0.04).texture);
+    var loader = new GLTFLoader();
+    loader.load(src, function (gltf) {
+      add2Scene(gltf.scene);
+      render();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default /*#__PURE__*/forwardRef(GLTF);

dist/esm/OBJ/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<{
+    src: string;
+    backgroundColor: string;
+} & React.RefAttributes<unknown>>;
+export default _default;

dist/esm/OBJ/index.js

@@ -0,0 +1,51 @@
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import * as THREE from 'three';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import useScene from "../useScene";
+
+function OBJ(_ref, ref) {
+  var src = _ref.src,
+      backgroundColor = _ref.backgroundColor;
+  var canvasRef = useRef(null);
+
+  var _useScene = useScene(canvasRef, backgroundColor),
+      add2Scene = _useScene.add2Scene,
+      scene = _useScene.scene,
+      animate = _useScene.animate,
+      render = _useScene.render,
+      renderer = _useScene.renderer;
+
+  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 loader = new OBJLoader();
+    loader.load(src, function (data) {
+      add2Scene(data);
+      animate();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default /*#__PURE__*/forwardRef(OBJ);

dist/esm/PLY/index.d.ts

@@ -0,0 +1,5 @@
+declare function PLY({ src, backgroundColor }: {
+    src: string;
+    backgroundColor: string;
+}): JSX.Element;
+export default PLY;

dist/esm/PLY/index.js

@@ -0,0 +1,42 @@
+import React, { useRef, useEffect } from 'react';
+import * as THREE from 'three';
+import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader';
+import useScene from "../useScene";
+
+function PLY(_ref) {
+  var src = _ref.src,
+      backgroundColor = _ref.backgroundColor;
+  var canvasRef = useRef(null);
+
+  var _useScene = useScene(canvasRef, backgroundColor),
+      add2Scene = _useScene.add2Scene,
+      scene = _useScene.scene,
+      animate = _useScene.animate;
+
+  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 loader = new PLYLoader();
+    loader.load(src, function (geometry) {
+      geometry.computeVertexNormals();
+      var material = new THREE.MeshStandardMaterial();
+      var mesh = new THREE.Mesh(geometry, material);
+      add2Scene(mesh);
+      animate();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default PLY;

dist/esm/STL/index.d.ts

@@ -0,0 +1,5 @@
+declare function STL({ src, backgroundColor }: {
+    src: string;
+    backgroundColor: string;
+}): JSX.Element;
+export default STL;

dist/esm/STL/index.js

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect } from 'react';
+import * as THREE from 'three';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
+import useScene from "../useScene";
+
+function STL(_ref) {
+  var src = _ref.src,
+      backgroundColor = _ref.backgroundColor;
+  var canvasRef = useRef(null);
+
+  var _useScene = useScene(canvasRef, backgroundColor),
+      add2Scene = _useScene.add2Scene,
+      scene = _useScene.scene,
+      animate = _useScene.animate;
+
+  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 loader = new STLLoader();
+    loader.load(src, function (geometry) {
+      var material = new THREE.MeshStandardMaterial();
+      var mesh = new THREE.Mesh(geometry, material);
+      add2Scene(mesh);
+      animate();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default STL;

dist/esm/index.d.ts

@@ -0,0 +1,24 @@
+import PLY from './PLY';
+import STL from './STL';
+declare const _default: {
+    GLTF: import("react").ForwardRefExoticComponent<{
+        src: string;
+        backgroundColor: string;
+    } & import("react").RefAttributes<unknown>>;
+    Collada: import("react").ForwardRefExoticComponent<{
+        src: string;
+        backgroundColor: string;
+        isRotation?: boolean | undefined;
+    } & import("react").RefAttributes<unknown>>;
+    FBX: import("react").ForwardRefExoticComponent<{
+        src: string;
+        backgroundColor: string;
+    } & import("react").RefAttributes<unknown>>;
+    OBJ: import("react").ForwardRefExoticComponent<{
+        src: string;
+        backgroundColor: string;
+    } & import("react").RefAttributes<unknown>>;
+    PLY: typeof PLY;
+    STL: typeof STL;
+};
+export default _default;