暴露灯光修改方法

xiaxiangfeng · Aug 8, 2023 · 4fe0e28 · 4fe0e28
1 parent 3677baa
commit 4fe0e28
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 7 deletions.
diff --git a/src/FBX/index.tsx b/src/FBX/index.tsx
@@ -16,16 +16,30 @@ function FBX(
       render();
       return renderer.current?.domElement.toDataURL('image/png', 1);
     },
+    setLight: (type: 'directionalLight' | 'ambientLight', color?: string, intensity?: number) => {
+      const light: any = scene.current?.getObjectByName(type);
+      if (light) {
+        if (color !== undefined) {
+          light.color = new THREE.Color(color);
+        }
+        if (intensity !== undefined) {
+          light.intensity = intensity;
+        }
+        render();
+      }
+    },
   }));
 
   useEffect(() => {
     const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
+    ambientLight.name = 'ambientLight';
     scene.current?.add(ambientLight);
 
     const directionalLight = new THREE.DirectionalLight(
       conf.directionalLightColor,
       conf.directionalIntensity,
     );
+    directionalLight.name = 'directionalLight';
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

diff --git a/src/GLTF/index.md b/src/GLTF/index.md
@@ -9,12 +9,44 @@ nav:
 Demo:
 
 ```tsx
-import React from 'react';
+import React, { useRef } from 'react';
 import Model from 'react-3dmodelx';
 
-export default () => (
-  <div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>
-    <Model.GLTF src="./chair1.gltf" />
-  </div>
-);
+export default () => {
+  const modelRef = useRef(null);
+  const setLight = (color) => {
+    modelRef.current.setLight('ambientLight', color, 2);
+  };
+  return (
+    <div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>
+      <div>
+        <span
+          onClick={() => {
+            setLight('red');
+          }}
+          style={{ background: 'red', cursor: 'pointer' }}
+        >
+          红
+        </span>
+        <span
+          onClick={() => {
+            setLight('blue');
+          }}
+          style={{ background: 'blue', cursor: 'pointer' }}
+        >
+          蓝
+        </span>
+        <span
+          onClick={() => {
+            setLight('green');
+          }}
+          style={{ background: 'green', cursor: 'pointer' }}
+        >
+          绿
+        </span>
+      </div>
+      <Model.GLTF ref={(object) => (modelRef.current = object)} src="./chair1.gltf" />
+    </div>
+  );
+};
 ```
diff --git a/src/GLTF/index.tsx b/src/GLTF/index.tsx
@@ -18,16 +18,30 @@ function GLTF(
       render();
       return renderer.current?.domElement.toDataURL('image/png', 1);
     },
+    setLight: (type: 'directionalLight' | 'ambientLight', color?: string, intensity?: number) => {
+      const light: any = scene.current?.getObjectByName(type);
+      if (light) {
+        if (color !== undefined) {
+          light.color = new THREE.Color(color);
+        }
+        if (intensity !== undefined) {
+          light.intensity = intensity;
+        }
+        render();
+      }
+    },
   }));
 
   useEffect(() => {
     const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
+    ambientLight.name = 'ambientLight';
     scene.current?.add(ambientLight);
-
+    console.log(scene.current);
     const directionalLight = new THREE.DirectionalLight(
       conf.directionalLightColor,
       conf.directionalIntensity,
     );
+    directionalLight.name = 'directionalLight';
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);

diff --git a/src/Group/index.tsx b/src/Group/index.tsx
@@ -26,16 +26,30 @@ function Group(
       render();
       return renderer.current?.domElement.toDataURL('image/png', 1);
     },
+    setLight: (type: 'directionalLight' | 'ambientLight', color?: string, intensity?: number) => {
+      const light: any = scene.current?.getObjectByName(type);
+      if (light) {
+        if (color !== undefined) {
+          light.color = new THREE.Color(color);
+        }
+        if (intensity !== undefined) {
+          light.intensity = intensity;
+        }
+        render();
+      }
+    },
   }));
 
   useEffect(() => {
     const ambientLight = new THREE.AmbientLight(conf.ambientLightColor, conf.ambientLightIntensity);
+    ambientLight.name = 'ambientLight';
     scene.current?.add(ambientLight);
 
     const directionalLight = new THREE.DirectionalLight(
       conf.directionalLightColor,
       conf.directionalIntensity,
     );
+    directionalLight.name = 'directionalLight';
     directionalLight.position.set(1, 1, 0).normalize();
 
     scene.current?.add(directionalLight);