1# Creating and Using Environment Resources 2<!--Kit: ArkGraphics 3D--> 3<!--Subsystem: Graphics--> 4<!--Owner: @zzhao0--> 5<!--SE: @zdustc--> 6<!--TSE: @zhangyue283--> 7 8Environment is a description of the 3D scene background, which can be created based on images. To simulate a real-world environment in a 3D scene, you can map a square or sphere onto an image and wrap the image around the square or sphere. 9 10ArkGraphics 3D allows you to create environment resources and define the background of 3D scenes. 11 12 13## Creating and Using an Environment 14To create an environment resource, you need to specify the name and path of the image or glTF model in the application sandbox, and set the environment resource as an environment attribute of the 3D scene. In this way, the created environment resource is set as the background environment of the 3D scene. Environment resources also provide attributes such as **diffuseFactor** and **specularFactor**. The sample code is as follows: 15```ts 16import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, 17 LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node, EnvironmentBackgroundType } from '@kit.ArkGraphics3D'; 18 19function createEnvironmentPromise() : Promise<Environment> { 20 return new Promise((resolve, reject) => { 21 // Load scene resources, which supports .gltf and .glb formats. The path and file name can be customized based on the specific project resources. 22 let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); 23 scene.then(async (result: Scene) => { 24 let sceneFactory: SceneResourceFactory = result.getResourceFactory(); 25 // Load image resources, which can be used for environment mapping. The URI can be specified based on the project structure. 26 let sceneImageParameter: SceneResourceParameters = { name: "image", uri: $rawfile("bricks.jpg") }; 27 let image: Promise<Image> = sceneFactory.createImage(sceneImageParameter); 28 image.then(async (imageEntity: Image) => { 29 // Create an environment. 30 let sceneEnvironmentParameter: SceneResourceParameters = { name: "env" }; 31 let env: Promise<Environment> = sceneFactory.createEnvironment(sceneEnvironmentParameter); 32 env.then(async (envEntity: Environment) => { 33 // Set the environment background type to equirectangular. 34 envEntity.backgroundType = EnvironmentBackgroundType.BACKGROUND_EQUIRECTANGULAR; 35 // Bind the loaded image as the environment map. 36 envEntity.environmentImage = imageEntity; 37 // Set environment-related properties. 38 envEntity.indirectDiffuseFactor.x = 1; 39 envEntity.indirectDiffuseFactor.y = 1; 40 envEntity.indirectDiffuseFactor.z = 1; 41 envEntity.indirectDiffuseFactor.w = 1; 42 resolve(envEntity); 43 }); 44 }); 45 }); 46 }); 47} 48``` 49
