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);