diff --git a/src/FBX/index.tsx b/src/FBX/index.tsx
index c8f34af..db1f968 100644
--- 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
index 5d262d2..fef356d 100644
--- 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 () => (
-
-
-
-);
+export default () => {
+ const modelRef = useRef(null);
+ const setLight = (color) => {
+ modelRef.current.setLight('ambientLight', color, 2);
+ };
+ return (
+
+
+ {
+ setLight('red');
+ }}
+ style={{ background: 'red', cursor: 'pointer' }}
+ >
+ 红
+
+ {
+ setLight('blue');
+ }}
+ style={{ background: 'blue', cursor: 'pointer' }}
+ >
+ 蓝
+
+ {
+ setLight('green');
+ }}
+ style={{ background: 'green', cursor: 'pointer' }}
+ >
+ 绿
+
+
+
(modelRef.current = object)} src="./chair1.gltf" />
+
+ );
+};
```
diff --git a/src/GLTF/index.tsx b/src/GLTF/index.tsx
index 7ffe798..37f6c47 100644
--- 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
index 98111be..ff32e06 100644
--- 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);