fix lighting

src/examples/GLTFs.tsx

@@ -6,7 +6,7 @@ import { getMutableState, getState } from '@etherealengine/hyperflux'
 import { Engine, EntityUUID, UUIDComponent, createEntity, removeEntity } from '@etherealengine/ecs'
 
 import { GLTFAssetState } from '@etherealengine/engine/src/gltf/GLTFState'
-import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
+import { AmbientLightComponent, DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
@@ -29,27 +29,27 @@ export const gltfRoutes = [
   {
     name: 'Basic',
     description: 'Basic Duck',
-    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF/Duck.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF/Duck.gltf'} light />
   },
   {
     name: 'Binary',
     description: 'Binary Duck',
-    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Binary/Duck.glb'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Binary/Duck.glb'} light />
   },
   {
     name: 'Draco',
     description: 'Draco Duck',
-    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Draco/Duck.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Draco/Duck.gltf'} light />
   },
   {
     name: 'Embedded',
     description: 'Embedded Duck',
-    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Embedded/Duck.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Embedded/Duck.gltf'} light />
   },
   {
     name: 'Quantized',
     description: 'Quantized Duck',
-    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Quantized/Duck.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/Duck/glTF-Quantized/Duck.gltf'} light />
   },
   {
     name: 'KHR_materials_unlit',
@@ -59,52 +59,52 @@ export const gltfRoutes = [
   {
     name: 'KHR_materials_emissive_strength',
     description: 'Khronos Emissive Strength Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/EmissiveStrengthTest/glTF/EmissiveStrengthTest.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/EmissiveStrengthTest/glTF/EmissiveStrengthTest.gltf'} light />
   },
   {
     name: 'KHR_materials_clearcoat',
     description: 'Khronos Clearcoat Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/ClearCoatTest/glTF/ClearCoatTest.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/ClearCoatTest/glTF/ClearCoatTest.gltf'} light />
   },
   {
     name: 'KHR_materials_iridescence',
     description: 'Khronos Iridescence Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/IridescenceMetallicSpheres/glTF/IridescenceMetallicSpheres.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/IridescenceMetallicSpheres/glTF/IridescenceMetallicSpheres.gltf'} light />
   },
   {
     name: 'KHR_materials_sheen',
     description: 'Khronos Sheen Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/SheenChair/glTF/SheenChair.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/SheenChair/glTF/SheenChair.gltf'} light />
   },
   {
     name: 'KHR_materials_transmission',
     description: 'Khronos Transmission Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/TransmissionTest/glTF/TransmissionTest.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/TransmissionTest/glTF/TransmissionTest.gltf'} light />
   },
   {
     name: 'KHR_materials_volume',
     description: 'Khronos Volume Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/AttenuationTest/glTF/AttenuationTest.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/AttenuationTest/glTF/AttenuationTest.gltf'} light />
   },
   // {
   //   name: 'KHR_materials_ior',
   //   description: 'Khronos Index of Refraction Material Extension',
-  //   entry: () => <GLTFViewer src={CDN_URL + '/IORTest/glTF/IORTest.gltf'} />
+  //   entry: () => <GLTFViewer src={CDN_URL + '/IORTest/glTF/IORTest.gltf'} light />
   // },
   {
     name: 'KHR_materials_specular',
     description: 'Khronos Specular Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/SpecularTest/glTF/SpecularTest.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/SpecularTest/glTF/SpecularTest.gltf'} light />
   },
   // {
   //   name: 'EXT_materials_bump',
   //   description: 'Khronos Bump Material Extension',
-  //   entry: () => <GLTFViewer src={CDN_URL + '/BumpTest/glTF/BumpTest.gltf'} />
+  //   entry: () => <GLTFViewer src={CDN_URL + '/BumpTest/glTF/BumpTest.gltf'} light />
   // },
   {
     name: 'KHR_materials_anisotropy',
     description: 'Khronos Anisotropy Material Extension',
-    entry: () => <GLTFViewer src={CDN_URL + '/CarbonFibre/glTF/CarbonFibre.gltf'} />
+    entry: () => <GLTFViewer src={CDN_URL + '/CarbonFibre/glTF/CarbonFibre.gltf'} light />
   },
   {
     name: 'KHR_lights_punctual',
@@ -113,7 +113,7 @@ export const gltfRoutes = [
   }
 ] as RouteData[]
 
-export default function GLTFViewer(props: { src: string }) {
+export default function GLTFViewer(props: { src: string; light?: boolean }) {
   useEffect(() => {
     const bgColor = document.body.style.backgroundColor
     document.body.style.backgroundColor = 'gray'
@@ -133,5 +133,22 @@ export default function GLTFViewer(props: { src: string }) {
     return GLTFAssetState.loadScene(props.src, props.src)
   }, [props.src])
 
+  useEffect(() => {
+    if (!props.light) return
+
+    const entity = createEntity()
+    setComponent(entity, UUIDComponent, 'directional light' as EntityUUID)
+    setComponent(entity, NameComponent, 'Directional Light')
+    setComponent(entity, TransformComponent, { rotation: new Quaternion().setFromEuler(new Euler(2, 5, 3)) })
+    setComponent(entity, EntityTreeComponent, { parentEntity: getState(EngineState).originEntity })
+    setComponent(entity, VisibleComponent, true)
+    setComponent(entity, DirectionalLightComponent, { color: new Color('white'), intensity: 0.5 })
+    setComponent(entity, AmbientLightComponent, { color: new Color('white'), intensity: 0.5 })
+
+    return () => {
+      removeEntity(entity)
+    }
+  }, [props.light])
+
   return null
 }