增加灯光修改

xiaxiangfeng · Aug 8, 2023 · 3677baa · 3677baa
1 parent 9ce6349
commit 3677baa
Show file tree

Hide file tree

Showing 14 changed files with 125 additions and 33 deletions.
diff --git a/dist/esm/Group/index.d.ts b/dist/esm/Group/index.d.ts
@@ -1,6 +1,10 @@
 import React from 'react';
+interface model {
+    url: string;
+    type: string;
+}
 declare const _default: React.ForwardRefExoticComponent<{
-    list: string[];
+    list: string[] | model[];
     backgroundColor: string;
     onLoad: any;
 } & React.RefAttributes<unknown>>;

diff --git a/dist/esm/Group/index.js b/dist/esm/Group/index.js
@@ -1,3 +1,5 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
 import * as THREE from 'three';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
@@ -37,10 +39,23 @@ function Group(_ref, ref) {
     (_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) {
+    list.forEach(function (data) {
+      var url = '';
+      var type = '';
+
+      if (typeof data === 'string') {
+        url = data;
+      }
+
+      if (_typeof(data) === 'object') {
+        url = data.url;
+        type = data.type;
+      }
+
       var lowerUrl = url.toLowerCase();
+      var lowerType = type.toLowerCase();
 
-      if (lowerUrl.endsWith('fbx')) {
+      if (lowerUrl.endsWith('fbx') || lowerType === 'fbx') {
         var loader = new FBXLoader();
         loader.load(url, function (data) {
           loadCount = loadCount + 1;
@@ -54,7 +69,7 @@ function Group(_ref, ref) {
         });
       }
 
-      if (lowerUrl.endsWith('gltf') || lowerUrl.endsWith('glb')) {
+      if (lowerUrl.endsWith('gltf') || lowerUrl.endsWith('glb') || lowerType === 'glb' || lowerType === 'gltf') {
         var _loader = new GLTFLoader();
 
         _loader.load(url, function (gltf) {

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

diff --git a/src/Collada/index.tsx b/src/Collada/index.tsx
@@ -2,7 +2,7 @@ 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';
-
+import conf from '../conf';
 function Collada(
   {
     src,
@@ -27,10 +27,13 @@ function Collada(
   }));
 
   useEffect(() => {
-    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
     scene.current?.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

diff --git a/src/FBX/index.tsx b/src/FBX/index.tsx
@@ -2,7 +2,7 @@ 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';
-
+import conf from '../conf';
 function FBX(
   { src, backgroundColor, onLoad }: { src: string; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
@@ -19,10 +19,13 @@ function FBX(
   }));
 
   useEffect(() => {
-    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
     scene.current?.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

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="https://taiji.dataojo.com/docloudresource/models/docity_builder/architecture/tianyan/TY/TY.min.glb" />
+    <Model.GLTF src="./chair1.gltf" />
   </div>
 );
 ```
diff --git a/src/GLTF/index.tsx b/src/GLTF/index.tsx
@@ -3,6 +3,7 @@ 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';
+import conf from '../conf';
 
 function GLTF(
   { src, backgroundColor, onLoad }: { src: string; backgroundColor: string; onLoad: any },
@@ -20,11 +21,16 @@ function GLTF(
   }));
 
   useEffect(() => {
-    const environment = new RoomEnvironment();
-    const pmremGenerator = new THREE.PMREMGenerator(renderer.current as THREE.WebGLRenderer);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
+    scene.current?.add(ambientLight);
 
-    scene.current &&
-      (scene.current.environment = pmremGenerator.fromScene(environment, 0.04).texture);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
+    directionalLight.position.set(1, 1, 0).normalize();
+
+    scene.current?.add(directionalLight);
 
     const loader = new GLTFLoader();
     loader.load(src, function (gltf) {

diff --git a/src/Group/index.md b/src/Group/index.md
@@ -14,7 +14,13 @@ import Model from 'react-3dmodelx';
 
 export default () => (
   <div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>
-    <Model.Group list={['./chair1.gltf', './chair.gltf']} onLoad={() => {}} />
+    <Model.Group
+      list={[
+        { url: './chair1.gltf', type: 'gltf' },
+        { url: './chair.gltf', type: 'gltf' },
+      ]}
+      onLoad={() => {}}
+    />
   </div>
 );
 ```
diff --git a/src/Group/index.tsx b/src/Group/index.tsx
@@ -3,9 +3,18 @@ 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';
+import conf from '../conf';
+interface model {
+  url: string;
+  type: string;
+}
 
 function Group(
-  { list, backgroundColor, onLoad }: { list: string[]; backgroundColor: string; onLoad: any },
+  {
+    list,
+    backgroundColor,
+    onLoad,
+  }: { list: string[] | model[]; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -20,21 +29,37 @@ function Group(
   }));
 
   useEffect(() => {
-    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
     scene.current?.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);
 
     let loadCount = 0;
     let modelCount = list.length;
 
-    list.forEach((url) => {
+    list.forEach((data) => {
+      let url = '';
+      let type = '';
+
+      if (typeof data === 'string') {
+        url = data;
+      }
+
+      if (typeof data === 'object') {
+        url = data.url;
+        type = data.type;
+      }
+
       const lowerUrl = url.toLowerCase();
+      const lowerType = type.toLowerCase();
 
-      if (lowerUrl.endsWith('fbx')) {
+      if (lowerUrl.endsWith('fbx') || lowerType === 'fbx') {
         const loader = new FBXLoader();
         loader.load(url, function (data: any) {
           loadCount = loadCount + 1;
@@ -45,7 +70,12 @@ function Group(
           animate();
         });
       }
-      if (lowerUrl.endsWith('gltf') || lowerUrl.endsWith('glb')) {
+      if (
+        lowerUrl.endsWith('gltf') ||
+        lowerUrl.endsWith('glb') ||
+        lowerType === 'glb' ||
+        lowerType === 'gltf'
+      ) {
         const loader = new GLTFLoader();
         loader.load(url, function (gltf: any) {
           loadCount = loadCount + 1;

diff --git a/src/OBJ/index.tsx b/src/OBJ/index.tsx
@@ -2,7 +2,7 @@ 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';
-
+import conf from '../conf';
 function OBJ(
   { src, backgroundColor, onLoad }: { src: string; backgroundColor: string; onLoad: any },
   ref?: React.Ref<unknown>,
@@ -19,10 +19,13 @@ function OBJ(
   }));
 
   useEffect(() => {
-    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
     scene.current?.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

diff --git a/src/PLY/index.tsx b/src/PLY/index.tsx
@@ -2,17 +2,20 @@ import React, { useRef, useEffect } from 'react';
 import * as THREE from 'three';
 import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader';
 import useScene from '../useScene';
-
+import conf from '../conf';
 function PLY({ src, backgroundColor }: { src: string; backgroundColor: string }) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const { add2Scene, scene, animate } = useScene(canvasRef, backgroundColor);
 
   useEffect(() => {
-    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
     scene.current?.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

diff --git a/src/STL/index.tsx b/src/STL/index.tsx
@@ -2,17 +2,20 @@ import React, { useRef, useEffect } from 'react';
 import * as THREE from 'three';
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
 import useScene from '../useScene';
-
+import conf from '../conf';
 function STL({ src, backgroundColor }: { src: string; backgroundColor: string }) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const { add2Scene, scene, animate } = useScene(canvasRef, backgroundColor);
 
   useEffect(() => {
-    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
+    const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
     scene.current?.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(
+      conf.directionalLightColor,
+      conf.directionalIntensity,
+    );
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

diff --git a/src/conf.ts b/src/conf.ts
@@ -0,0 +1,8 @@
+const light = {
+  ambientLightColor: 0x404040,
+  directionalLightColor: 0xffffff,
+  ambientLightIntensity: 1,
+  directionalIntensity: 1,
+};
+
+export default light;
diff --git a/src/index.ts b/src/index.ts
@@ -6,4 +6,12 @@ import PLY from './PLY';
 import STL from './STL';
 import Group from './Group';
 
-export default { GLTF, Collada, FBX, OBJ, PLY, STL, Group };
+export default {
+  GLTF,
+  Collada,
+  FBX,
+  OBJ,
+  PLY,
+  STL,
+  Group,
+} as any;