My App will dynamically load different immersive furniture design scenes.
After each scene is loaded, I need to set the HDR image as ImageBasedLight.
How can I load EnvironmentResource dynamically?
This way I can set the ImageBasedLightComponent dynamically
Hey @xuhengfei
It is certainly possible to dynamically load an EnvironmentResource and apply it to your Entity's ImageBasedLightComponent. The official documentation for EnvironmentResource is available here. Once you have added the image assets to your project (see the documentation for details about creating .skybox folders), you can load them just like the other resources in your app:
func loadIBLAndApplyToEntity(resourceToLoad: String, entity: Entity) {
Task {
guard let resource = try? await EnvironmentResource(named: resourceToLoad) else {
print("Failed to load resource")
return
}
var iblComponent = ImageBasedLightComponent(source: .single(resource))
iblComponent.inheritsRotation = true
// Set the IBL and the receiver components.
entity.components.set(iblComponent)
entity.components.set(ImageBasedLightReceiverComponent(imageBasedLight: entity))
}
}
Also check out this video which contains an example of an EnvironmentResource being loaded at runtime and then applied to an entity.
Let me know if you have any questions!
I know that preparing multiple .skybox folders in the project ahead of time can dynamically change the ImageBasedLight during runtime. But my entire scene usdz is downloaded from the url, so my HDR picture is also downloaded from the url. How to turn the HDR image downloaded in the URL into an EnvironmentResoure and then generate an ImageBasedLightComponent
Thank you very mush