1# 创建并使用图片资源 2<!--Kit: ArkGraphics 3D--> 3<!--Subsystem: Graphics--> 4<!--Owner: @zzhao0--> 5<!--Designer: @zdustc--> 6<!--Tester: @zhangyue283--> 7<!--Adviser: @ge-yafang--> 8 9图片（Image）：图片本质上是一个储存信息的二维内存块(buffer)，用于储存3D渲染计算过程需要的相关信息，比如基础色、法线等等。 10 11ArkGraphics 3D提供基于png、jpg、ktx格式创建Image资源的能力，支持用户自定义需要的Image资源。 12 13 14## 图片资源的创建及使用 153D场景中的图片资源是指GPU可以直接使用的图片资源。创建图片资源的关键参数包括图片资源的名字以及图片资源的路径。将图片资源应用到材质中作为材质属性，是常见的图片资源使用方式之一，示例代码如下： 16```ts 17import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, 18 LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D'; 19 20function createImagePromise(): Promise<Image> { 21 return new Promise((resolve, reject) => { 22 // 加载场景资源，支持.gltf和.glb格式，路径和文件名可根据项目实际资源自定义 23 let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); 24 scene.then(async (result: Scene) => { 25 let sceneFactory: SceneResourceFactory = result.getResourceFactory(); 26 // 加载图片资源，可用于材质贴图等。路径uri可根据项目结构自由指定 27 let sceneImageParameter: SceneResourceParameters = { name: "image", uri: $rawfile("bricks.jpg") }; 28 // 创建Image 29 let image: Promise<Image> = sceneFactory.createImage(sceneImageParameter); 30 image.then(async (imageEntity: Image) => { 31 let sceneMaterialParameter: SceneResourceParameters = { name: "material" }; 32 // 创建材质 33 let material: Promise<Material> = sceneFactory.createMaterial(sceneMaterialParameter, MaterialType.SHADER); 34 // ShaderMaterial继承自Material 35 material.then(async (materialEntity: ShaderMaterial) => { 36 // 利用创建的图片资源设置纹理属性 37 if (materialEntity && materialEntity.colorShader) { 38 materialEntity.colorShader.inputs["BASE_COLOR_Image"] = imageEntity; 39 } 40 resolve(imageEntity); 41 }); 42 }); 43 }); 44 }); 45} 46``` 47 48 49<!--RP1--> 50## 相关实例 51 52对于3D资源更加综合的使用可以参考以下实例： 53- [3D引擎接口示例（ArkTS）（API12）](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Graphics/Graphics3d) 54<!--RP1End-->
