鸿蒙图形开发【3D引擎接口示例】

介绍

本实例主要介绍3D引擎提供的接口功能。提供了@ohos.graphics.scene中接口的功能演示。 3D引擎渲染的画面会被显示在Component3D这一控件中。点击按钮触发不同的功能，用户可以观察渲染画面的改变。

效果预览

使用说明

1. 在主界面，可以点击按钮进入不同的子页面，每一个子页面分别测试了一类3D引擎的接口功能，在子页面点击back返回主界面。
2. 在container界面，点击按钮，可以添加、移除子节点，节点的结构信息已打印在界面上。在本示例中操作的子节点是一个头盔模型。
3. 在node_base界面，点击按钮对节点的基础属性如位置、旋转、大小、可见性等进行操作。在本示例中操作的子节点是一个头盔模型。
4. 在node_camera界面，点击按钮对相机的属性如投影、后处理等进行操作。
5. 在node_light界面，点击按钮对灯光的类型、颜色、强度、阴影等进行操作。
6. 在scene_environment界面，点击按钮对背景进行操作。
7. 在scene_animation界面，点击按钮进行动画的播放、暂停等操作的功能。
8. 在scene_shader界面，点击按钮进行纹理材质的操作。

具体实现

• 添加、移除、遍历节点的功能接口参考：ContainerPage.ets

  • 初始时会使用深度优先的方式遍历并打印场景中每一个节点的信息，从场景的root节点开始；
  • 删除节点：调用remove方法删除指定节点，不会重复删除，在本示例中删除了头盔节点；
  • 添加节点：调用append方法在子节点列表的末尾添加指定节点，不会重复添加，在本示例中添加了头盔节点；
  • 添加节点：调用insertAfter方法在子节点列表的指定位置添加指定节点，不会重复添加，在本示例中添加了头盔节点；
  • 清除子节点：调用clear方法清除子节点列表的所有节点，本示例中清除了root的子节点。

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { router } from '@kit.ArkUI';
import { Scene, Camera, Node, Container, SceneResourceFactory, EnvironmentBackgroundType } from '@kit.ArkGraphics3D';
import { Constants } from '../constants/Constants';
import Logger from '../utils/Logger';const TAG: string = '[ContainerPage]';@Entry
@Component
struct ContainerPage {@State sceneOpt: SceneOptions | null = null;@State hierarchy: string = '';scene: Scene | null = null;cam: Camera | null = null;node: Node | null | undefined = undefined;sceneNode: Node | null = null;traversal(node: Node | null): void {if (!node) {return;}this.hierarchy += node.path + node.name + '\n';let container: Container<Node> = node.children;let count: number = container.count();this.hierarchy += '  ';for (let i = 0; i < count; i++) {this.traversal(container.get(i));}}aboutToAppear(): void {this.init();}aboutToDisappear(): void {if (this.scene) {this.scene.destroy();this.scene = null;}this.cam = null;this.scene = null;}init(): void {if (this.scene === null) {Scene.load($rawfile('gltf/DamagedHelmet/glTF/DamagedHelmet.gltf')).then(async (result: Scene) => {if (!result) {return;}this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;let rf: SceneResourceFactory = this.scene.getResourceFactory();this.cam = await rf.createCamera({ 'name': 'Camera1' });this.cam.enabled = true;this.cam.position.z = Constants.CAMERA_POSITION_Z_INDEX;this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;this.cam.clearColor = Constants.CLEAR_COLOR;this.node = this.scene.getNodeByPath(Constants.HELMET_NODE_PATH);this.traversal(this.scene.root);this.sceneNode = this.scene.getNodeByPath(Constants.SCENE_NODE_PATH);}).catch((reason: string) => {Logger.error(TAG, `init error: ${reason}`);});}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent'))} else {Text($r('app.string.loading')).fontSize($r('app.float.text_font_size')).fontWeight(Constants.FONT_WEIGHT_FIVE_HUNDRED)}}.height(Constants.THIRTY_PERCENT).width(Constants.FULL_PERCENT).backgroundColor(Color.White).borderRadius($r('app.float.board_radius_normal'))Column() {Text(this.hierarchy).borderRadius($r('app.float.board_radius_normal')).fontWeight(FontWeight.Normal)}.height(Constants.TWENTY_PERCENT).width(Constants.FULL_PERCENT).borderRadius($r('app.float.board_radius_normal')).backgroundColor(Color.White).alignItems(HorizontalAlign.Start).padding($r('app.float.text_area_padding'))Blank().layoutWeight(1)Button($r('app.string.remove_node')).onClick(() => {if (this?.scene?.root) {this.scene.root.children.get(0)?.children.remove(this.node);this.hierarchy = '';this.traversal(this.scene.root);}}).width(Constants.FULL_PERCENT)Button($r('app.string.append_node')).onClick(() => {if (this?.scene?.root) {this.scene.root.children.get(0)?.children.append(this.node);this.hierarchy = '';this.traversal(this.scene.root);}}).width(Constants.FULL_PERCENT)Button($r('app.string.insert_node')).onClick(() => {if (this?.scene?.root) {this.scene.root.children.get(0)?.children.insertAfter(this.node, null);this.hierarchy = '';this.traversal(this.scene.root);}}).width(Constants.FULL_PERCENT)Button($r('app.string.clear')).onClick(() => {if (this?.scene?.root) {this.scene.root.children.clear();this.hierarchy = '';this.traversal(this.scene.root);}}).width(Constants.FULL_PERCENT)Button($r('app.string.back')).onClick(() => {router.back();}).width(Constants.FULL_PERCENT)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left'))}
}

• 对节点的基础属性如位置、旋转、大小等操作参考：NodeBase.ets

  • 修改scale属性改变节点的大小，本示例中改变了头盔的大小；
  • 修改position属性改变节点的位置，本示例中改变了头盔的x轴坐标；
  • 修改rotation属性改变节点的旋转方向，改变子节点的父节点的rotation同样会改变子节点的旋转方向（position同理），本示例中改变了头盔的旋转方向；
  • 修改节点的visible属性改变节点的可见性，本示例中改变了头盔的可见性；
  • 使用getEnabled和setEnabled操作节点的layerMask，本示例中将layerMask的信息打印在界面上。

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { Scene, Camera, Node, Container, SceneResourceFactory, EnvironmentBackgroundType } from '@kit.ArkGraphics3D';
import { router } from '@kit.ArkUI';
import { Constants } from '../constants/Constants';
import Logger from '../utils/Logger';const TAG: string = '[NodeBase]';@Entry
@Component
struct NodeBase {@State sceneOpt: SceneOptions | null = null;@State xAxis: number = 0;@State layerMaskInfo: string = '';scene: Scene | null = null;cam: Camera | null = null;node: Node | null | undefined = null;scaled: boolean = false;step: number = 0;value: number = 0;layerMaskIndex: number = 0x1;traversalChild(node: Node | null): void {if (!node) {return;}let container: Container<Node> = node.children;let count: number = container.count();for (let i = 0; i < count; i++) {this.traversalChild(container.get(i));}}aboutToAppear(): void {this.init();}aboutToDisappear(): void {if (this.scene) {this.scene.destroy();}this.cam = null;this.scene = null;}init(): void {if (this.scene === null) {Scene.load($rawfile('gltf/DamagedHelmet/glTF/DamagedHelmet.gltf')).then(async (result: Scene) => {if (!result) {return;}this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;let rf: SceneResourceFactory = this.scene.getResourceFactory();this.cam = await rf.createCamera({ 'name': 'Camera1' });this.cam.enabled = true;this.cam.position.z = Constants.CAMERA_POSITION_Z_INDEX;this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;this.cam.clearColor = Constants.CLEAR_COLOR;this.node = this.scene.getNodeByPath(Constants.HELMET_NODE_PATH);if (this.node) {this.xAxis = this.node.position.x;this.value = this.xAxis;}}).catch((reason: string) => {Logger.error(TAG, `init error: ${reason}`);});}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent'))} else {Text($r('app.string.loading'));}}.height(Constants.THIRTY_PERCENT).width(Constants.FULL_PERCENT).backgroundColor(Color.White).borderRadius($r('app.float.board_radius_normal'))Column() {Text('layer mask info:').fontWeight(FontWeight.Normal)Text(this.layerMaskInfo).fontWeight(FontWeight.Normal)}.height(Constants.THIRTEEN_PERCENT).width(Constants.FULL_PERCENT).borderRadius($r('app.float.board_radius_normal')).backgroundColor(Color.White).alignItems(HorizontalAlign.Start).padding($r('app.float.text_area_padding'))Column({ space: Constants.LIST_SPACE }) {Text($r('app.string.x_axis', this.xAxis?.toFixed(1).toString())).fontSize($r('app.float.text_font_size')).fontWeight(Constants.FONT_WEIGHT_FIVE_HUNDRED).margin({ left: $r('app.float.text_area_padding') })Slider({value: this.value,min: this.value - Constants.XAXIS_VALUE,max: this.value + Constants.XAXIS_VALUE,step: Constants.XAXIS_STEP,style: SliderStyle.OutSet}).showTips(false).onChange((value: number, mode: SliderChangeMode) => {this.xAxis = value;if (mode === SliderChangeMode.End) {if (!this.node) {return;}this.node.position.x = this.xAxis;}}).width(Constants.FULL_PERCENT).height($r('app.float.slider_height'))}.alignItems(HorizontalAlign.Start).width(Constants.FULL_PERCENT)Column({ space: Constants.LIST_SPACE }) {Button($r('app.string.layer_mask')).onClick(() => {if (!this.scene) {return;}let node: Node | null | undefined = this.scene.getNodeByPath(Constants.HELMET_NODE_PATH);if (!node) {return;}let enabled: boolean = node.layerMask.getEnabled(this.layerMaskIndex);node.layerMask.setEnabled(1, !enabled);this.layerMaskInfo = 'node name: ' + node.name + '\n' + 'layer mask index: ' + this.layerMaskIndex + '\n' +'layer mask enabled: ' + enabled;}).width(Constants.FULL_PERCENT)Button($r('app.string.scale_helmet')).onClick(() => {if (!this.scene) {return;}let node: Node | null | undefined = this.scene.root?.children.get(0)?.getNodeByPath(Constants.HELMET_PATH);if (!node) {return;}if (this.scaled) {node.scale = { x: 1.0, y: 1.0, z: 1.0 };this.scaled = false;} else {node.scale = { x: 0.5, y: 0.5, z: 0.5 };this.scaled = true;}}).width(Constants.FULL_PERCENT)Button($r('app.string.rotate_helmet')).onClick(() => {if (!this.scene) {return;}let node: Node | null | undefined = this.scene.getNodeByPath(Constants.HELMET_NODE_PATH);if (!node) {return;}let c = Math.cos(-this.step * 0.7 * 0.1);let s = Math.sin(-this.step * 0.7 * 0.1);node.rotation = {x: s,y: 0.0,z: 0.0,w: c};this.step++;}).width(Constants.FULL_PERCENT)Button($r('app.string.rotate_parent')).onClick(() => {if (!this.scene) {return;}let child: Node | null | undefined = this.scene.root?.getNodeByPath(Constants.HELMET_PARENT_PATH);if (!child) {return;}let node: Node | null = child.parent;if (!node) {return;}let c = Math.cos(-this.step * 0.7 * 0.1);let s = Math.sin(-this.step * 0.7 * 0.1);node.rotation = {x: 0.0,y: s,z: 0.0,w: c};this.step++;}).width(Constants.FULL_PERCENT)Button($r('app.string.root_visible')).onClick(() => {if (this.scene?.root) {this.scene.root.visible = !this.scene.root?.visible;}}).width(Constants.FULL_PERCENT)Button($r('app.string.back')).onClick(() => {if (this.scene) {this.scene.destroy();}router.back();}).width(Constants.FULL_PERCENT)}.layoutWeight(1).justifyContent(FlexAlign.End)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left')).justifyContent(FlexAlign.SpaceBetween)}
}

• 对相机的属性如投影、后处理等进行操作的功能接口参考：NodeCamera.ets

  • 修改fov属性改变投影的视场角，本示例中设置了45/60/90三种；
  • 修改nearPlane和farPlane属性投影的近平面和远平面；
  • 修改enabled属性改变相机是否启用，设为false之后控件中的画面将不再刷新；
  • 修改postProcess.toneMapping.type属性可以改变用于色调映射的方法，目前有ACES/ACES_2020/FILMIC三种；
  • 修改postProcess.toneMapping.exposure属性可以改变用于色调映射的曝光参数。
  • 修改clearColor属性可以设置每一帧的刷新背景色，设置a通道为零可以获得一个透明的背景，设置为null时不会刷新全部背景像素。

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import {Scene,Camera,SceneResourceFactory,EnvironmentBackgroundType,ToneMappingType,ToneMappingSettings
} from '@kit.ArkGraphics3D';
import { router } from '@kit.ArkUI';
import { Constants } from '../constants/Constants';
import Logger from '../utils/Logger';let fovFlag: number = 0;
let TonemapTypeFlag: number = 0;
let clearColorFlag: number = 0;@Extend(Text)
function textEffect() {.fontSize($r('app.float.text_font_size')).fontWeight(Constants.FONT_WEIGHT_FIVE_HUNDRED).margin({ left: $r('app.float.text_area_padding') })
}@Entry
@Component
struct NodeCamera {@State sceneOpt: SceneOptions | null = null;@State nearPlaneValue: number = 0.1;@State farPlaneValue: number = 100;@State tonemapExposure: number = 1;@State enable: boolean = true;scene: Scene | null = null;cam: Camera | null = null;aboutToAppear(): void {this.init();}aboutToDisappear(): void {if (this.scene) {this.scene.destroy();}this.cam = null;this.scene = null;}init(): void {if (this.scene === null) {Scene.load($rawfile('gltf/DamagedHelmet/glTF/DamagedHelmet.gltf')).then(async (result: Scene) => {this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;let rf: SceneResourceFactory = this.scene.getResourceFactory();this.cam = await rf.createCamera({ 'name': 'Camera1' });this.cam.position.z = Constants.CAMERA_POSITION_Z_INDEX;this.cam.enabled = true;this.cam.postProcess = {toneMapping: {type: ToneMappingType.ACES,exposure: 1.0} as ToneMappingSettings};this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;}).catch((reason: string) => {Logger.error(`init error: ${reason}`);});}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent')).backgroundColor(Color.Transparent).width(Constants.NINETY_PERCENT).height(Constants.FULL_PERCENT)} else {Text($r('app.string.loading'))}}.width(Constants.FULL_PERCENT).backgroundColor(Color.White).height(Constants.THIRTY_PERCENT).borderRadius($r('app.float.board_radius_normal'))Column() {Text($r('app.string.near_plane', this.nearPlaneValue.toFixed(1).toString())).textEffect()Slider({value: this.nearPlaneValue,min: 0.1,max: 10,step: 0.1,style: SliderStyle.OutSet}).showTips(false).onChange((value: number, mode: SliderChangeMode) => {this.nearPlaneValue = value;if (mode === SliderChangeMode.End) {if (!this.scene || !this.cam) {return;}this.cam.nearPlane = value;}}).width(Constants.FULL_PERCENT)}.alignItems(HorizontalAlign.Start).width(Constants.FULL_PERCENT)Column() {Text($r('app.string.far_plane', this.farPlaneValue.toFixed(1).toString())).textEffect()Slider({value: this.farPlaneValue,min: 0.1,max: 100,step: 1,style: SliderStyle.OutSet}).showTips(false).onChange((value: number, mode: SliderChangeMode) => {this.farPlaneValue = value;if (mode === SliderChangeMode.End) {if (!this.scene || !this.cam) {return;}this.cam.farPlane = this.farPlaneValue;}}).width(Constants.FULL_PERCENT)}.alignItems(HorizontalAlign.Start).width(Constants.FULL_PERCENT)Column() {Text($r('app.string.tonemap_exposure', this.tonemapExposure.toFixed(1).toString())).textEffect()Slider({value: this.tonemapExposure,min: 0,max: 10,step: 0.1,style: SliderStyle.OutSet}).showTips(false).onChange((value: number, mode: SliderChangeMode) => {this.tonemapExposure = value;if (mode === SliderChangeMode.End) {if (!this.scene || !this.cam || !this.cam.postProcess || !this.cam.postProcess.toneMapping) {return;}this.cam.postProcess = {toneMapping: {exposure: this.tonemapExposure,type: this.cam.postProcess.toneMapping.type}};}}).width(Constants.FULL_PERCENT)}.alignItems(HorizontalAlign.Start).width(Constants.FULL_PERCENT)Column({ space: Constants.LIST_SPACE }) {Button(!this.enable ? $r('app.string.enabled') : $r('app.string.disabled')).onClick(() => {if (!this.scene || !this.cam) {return;}this.enable = !this.enable;this.cam.enabled = this.enable;}).width(Constants.FULL_PERCENT)Button($r('app.string.change_fov')).onClick(() => {if (!this.scene || !this.cam) {return;}const RADIAN: number = Math.PI / Constants.PI_RADIAN;const FOV_COUNT: number = 3;const FOV_0: number = 0;const FOV_1: number = 1;fovFlag = ++fovFlag % FOV_COUNT;if (fovFlag === FOV_0) {let degree = Constants.DEGREE_SIXTY;this.cam.fov = degree * RADIAN;} else if (fovFlag === FOV_1) {let degree = Constants.DEGREE_NINETY;this.cam.fov = degree * RADIAN;} else {let degree = Constants.DEGREE_FORTY_FIVE;this.cam.fov = degree * RADIAN;}}).width(Constants.FULL_PERCENT)Button($r('app.string.change_tonemap_type')).onClick(() => {if (!this.scene || !this.cam || !this.cam.postProcess || !this.cam.postProcess.toneMapping) {return;}let type: ToneMappingType = ToneMappingType.ACES;const TONE_MAPPING_COUNT: number = 3;const TONE_MAPPING_0: number = 0;const TONE_MAPPING_1: number = 1;TonemapTypeFlag = ++TonemapTypeFlag % TONE_MAPPING_COUNT;if (TonemapTypeFlag === TONE_MAPPING_0) {type = ToneMappingType.ACES;} else if (TonemapTypeFlag === TONE_MAPPING_1) {type = ToneMappingType.ACES_2020;} else {type = ToneMappingType.FILMIC;}this.cam.postProcess = {toneMapping: {exposure: this.cam.postProcess.toneMapping.exposure,type: type}};}).width(Constants.FULL_PERCENT)Button($r('app.string.set_clear_color')).onClick(() => {if (!this.scene || !this.cam) {return;}const CLEAR_COLOR_COUNT: number = 3;const CLEAR_COLOR_0: number = 0;const CLEAR_COLOR_1: number = 1;clearColorFlag = ++clearColorFlag % CLEAR_COLOR_COUNT;if (clearColorFlag === CLEAR_COLOR_0) {this.cam.clearColor = this.cam.clearColor = Constants.CLEAR_COLOR;} else if (clearColorFlag === CLEAR_COLOR_1) {this.cam.clearColor = Constants.CLEAR_COLOR_BLUE;} else {this.cam.clearColor = Constants.CLEAR_COLOR_RED;}}).width(Constants.FULL_PERCENT)Button($r('app.string.back')).onClick(() => {router.back();}).width(Constants.FULL_PERCENT)}.layoutWeight(1).justifyContent(FlexAlign.End)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left')).justifyContent(FlexAlign.SpaceBetween)}
}

• 对灯光的类型、颜色、强度、阴影等进行操作的功能接口参考：NodeLight.ets

  • lightType属性为只读，表示灯光的种类，目前有DIRECTIONAL和SPOT两种，分别为平行光和点光源；
  • 修改enabled属性改变灯光是否启用；
  • 修改color属性可以改变灯光的颜色，本示例中有三种可以变化；
  • 修改intensity属性可以改变灯光的强度。
  • 修改shadowEnabled属性可以设置灯光是否产生阴影。

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import {Scene,Camera,DirectionalLight,Light,SpotLight,Image,LightType,SceneResourceFactory,EnvironmentBackgroundType
} from '@kit.ArkGraphics3D';
import { router } from '@kit.ArkUI';
import { Constants } from '../constants/Constants';
import Logger from '../utils/Logger';
import { CalcUtils } from '../utils/CalcUtils';let colorFlag: number = 0;
let intensityFlag: number = 0;
let shadowFlag: boolean = true;@Entry
@Component
struct NodeLight {@State sceneOpt: SceneOptions | null = null;@State lgt: Light | null = null;scene: Scene | null = null;cam: Camera | null = null;directionalLight: DirectionalLight | null | undefined = null;spotLight: SpotLight | null = null;radianceImg1: Image | null = null;onPageShow(): void {this.init();}onPageHide(): void {if (this.scene) {this.scene.destroy();}this.cam = null;this.scene = null;}init(): void {if (this.scene !== null) {return;}Scene.load($rawfile('gltf/CubeWithFloor/glTF/AnimatedCube.gltf')).then(async (result: Scene) => {this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;let rf: SceneResourceFactory = this.scene.getResourceFactory();this.cam = await rf.createCamera({ 'name': 'Camera1' });this.cam.position.z = Constants.CAMERA_POSITION_Z_INDEX;this.cam.enabled = true;// Camera look at direction.CalcUtils.lookAt(this.cam, { x: 10, y: 5, z: 15 }, { x: 0, y: 0.0, z: 0.0 }, { x: 0, y: 1, z: 0 });this.radianceImg1 = await rf.createImage({name: 'radianceImg1',uri: $rawfile('gltf/Environment/glTF/images/quarry_02_2k_radiance.ktx')});this.scene.environment.radianceImage = this.radianceImg1;this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;this.directionalLight = await this.scene?.getResourceFactory().createLight({ 'name': 'DirectionalLight1' }, LightType.DIRECTIONAL) as DirectionalLight;// Light look at direction.CalcUtils.lookAt(this.directionalLight, { x: 10.0, y: 10.0, z: 10.0 }, { x: 0.0, y: 0.0, z: 0.0 },{ x: 0.0, y: 1.0, z: 0.0 });this.directionalLight.enabled = false;this.spotLight = await this.scene?.getResourceFactory().createLight({ 'name': 'SpotLight1' }, LightType.SPOT) as SpotLight;// Spot light look at direction.CalcUtils.lookAt(this.spotLight, { x: 6, y: 6, z: -6 }, { x: 0, y: 0.0, z: 0.0 }, { x: 0, y: 1, z: 0 });this.spotLight.enabled = true;this.lgt = this.spotLight;this.UpdateLights();}).catch((reason: string) => {Logger.error(`init error ${reason}`);})}UpdateLights(): void {if (this.lgt) {this.lgt.color = Constants.COLORS[colorFlag];this.lgt.intensity = Constants.INTENSITIES[intensityFlag];if (this.lgt.lightType === LightType.DIRECTIONAL) {// Just reduce some intensity when directional light.this.lgt.intensity = Constants.INTENSITIES[intensityFlag] / Constants.HALF_HUNDRED;}this.lgt.shadowEnabled = shadowFlag;}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent'))} else {Text($r('app.string.loading'));}}.width(Constants.FULL_PERCENT).backgroundColor(Color.White).height(Constants.THIRTY_PERCENT).borderRadius($r('app.float.board_radius_normal'))Blank().layoutWeight(1)if (this.lgt) {if (this.lgt.enabled) {Button(`Shadows (${!this.lgt.shadowEnabled ? 'enabled' : 'disabled'})`).onClick(() => {if (!this.scene || !this.lgt) {return;}shadowFlag = !shadowFlag;this.UpdateLights();}).width(Constants.FULL_PERCENT)Button($r('app.string.change_color')).onClick(() => {if (!this.scene || !this.lgt) {return;}colorFlag = ++colorFlag % Constants.COLORS.length;this.UpdateLights();}).width(Constants.FULL_PERCENT)Button(`Change intensity (${this.lgt.intensity})`).onClick(() => {if (!this.scene || !this.lgt) {return;}intensityFlag = (intensityFlag + 1) % Constants.INTENSITIES.length;this.UpdateLights();}).width(Constants.FULL_PERCENT)}Button(`Switch light type (${this.lgt.lightType === LightType.DIRECTIONAL ? 'DIRECTIONAL' : 'SPOT'})`).onClick(() => {if (this.lgt) {this.lgt.enabled = false;if (this.lgt.lightType === LightType.DIRECTIONAL) {this.lgt = this.spotLight;} else if (this.directionalLight) {this.lgt = this.directionalLight;}}if (this.lgt) {this.lgt.enabled = true;this.UpdateLights();}}).width(Constants.FULL_PERCENT)Button(this.lgt.enabled ? $r('app.string.disabled') : $r('app.string.enabled')).onClick(() => {if (!this.scene || !this.lgt) {return;}this.lgt.enabled = !this.lgt.enabled;}).width(Constants.FULL_PERCENT)}Button($r('app.string.back')).onClick(() => {router.back();}).width(Constants.FULL_PERCENT)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left')).justifyContent(FlexAlign.SpaceBetween)}
}

• 对背景进行操作的功能接口考：SceneEnvironment.ets

  • 同时修改backgroundType和environmentImage可以设置背景图片，backgroundType为BACKGROUND_IMAGE或BACKGROUND_EQUIRECTANGULAR时对应png或者jpeg格式的图片；类型为BACKGROUND_CUBEMAP时对应ktx格式的图片；类型为BACKGROUND_NONE时不设置背景图片，需要同时将camera的clearColor的a通道设置为0以获得透明背景；
  • 修改environmentMapFactor属性改变背景图的相应参数。
  • 修改radianceImage属性改变PBR中的环境贴图；
  • 修改indirectDiffuseFactor属性改变PBR中的相应参数；
  • 修改indirectSpecularFactor属性改变PBR中的相应参数；
  • 修改irradianceCoefficients属性改变PBR中的相应参数；

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { Animation, Scene, Camera, EnvironmentBackgroundType } from '@kit.ArkGraphics3D';
import { Animator, router, AnimatorResult } from '@kit.ArkUI';
import Logger from '../utils/Logger';
import { Constants } from '../constants/Constants';@Entry
@Component
struct SceneAnimation {@State sceneOpt: SceneOptions | null = null;@State progressValue: number = 0;@State animationEnabled: Boolean = false;@State animationDuration: number = 0;@State animationIsRunning: Boolean = false;@State animationCallbackInvoked: string = Constants.STRING_NO;@State enable: boolean = true;scene: Scene | null = null;cam: Camera | null = null;backAnimator: AnimatorResult | undefined = undefined;onPageShow(): void {this.init();}onPageHide(): void {if (this.scene) {this.scene.destroy();}this.cam = null;this.scene = null;}init(): void {this.backAnimator = Animator.create(Constants.ANIMATION_OPTION);this.backAnimator.onFrame = () => {if (this.scene?.animations[0]) {this.animationEnabled = this.scene.animations[0].enabled;this.animationDuration = this.scene.animations[0].duration;this.animationIsRunning = this.scene.animations[0].running;this.progressValue = this.scene.animations[0].progress;}}if (this.scene === null) {Scene.load($rawfile('gltf/BrainStem/glTF/BrainStem.gltf')).then(async (result: Scene) => {this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;let rf = this.scene.getResourceFactory();this.cam = await rf.createCamera({ 'name': 'Camera1' });this.cam.enabled = true;this.cam.position.z = Constants.CAMERA_POSITION_Z_INDEX;this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;}).catch((error: string) => {Logger.error(`init error: ${error}`);});}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent')).backgroundColor(Color.Transparent).onAppear(() => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];anim.onStarted(() => {this.animationCallbackInvoked = Constants.STRING_START;});anim.onFinished(() => {this.animationCallbackInvoked = Constants.STRING_FINISH;});this.backAnimator?.play();})} else {Text($r('app.string.loading'))}}.width(Constants.FULL_PERCENT).backgroundColor(Color.White).height(Constants.TWENTY_FIVE_PERCENT).borderRadius($r('app.float.board_radius_normal'))Column() {Text($r('app.string.progress', (this.progressValue * 100).toFixed(2).toString())).fontSize($r('app.float.text_font_size'))Text($r('app.string.duration', this.animationDuration.toFixed(2).toString())).fontSize($r('app.float.text_font_size'))Text($r('app.string.running', this.animationIsRunning)).fontSize($r('app.float.text_font_size'))Text($r('app.string.animation_enabled', this.animationEnabled)).fontSize($r('app.float.text_font_size'))Text($r('app.string.animation_invoked_callback', this.animationCallbackInvoked)).fontSize($r('app.float.text_font_size'))}.alignItems(HorizontalAlign.Start).width(Constants.FULL_PERCENT).backgroundColor(Color.White).borderRadius($r('app.float.board_radius_normal')).padding($r('app.float.text_area_padding'))Column({ space: Constants.LIST_SPACE }) {Button(this.enable ? 'disable animation' : 'enable animation').onClick(() => {if (!this.scene || !this.scene.animations[0]) {return;}this.enable = !this.enable;this.scene.animations[0].enabled = this.enable;}).width(Constants.FULL_PERCENT)Button($r('app.string.start')).onClick(async () => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];anim.start();}).width(Constants.FULL_PERCENT)Button($r('app.string.pause')).onClick(async () => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];anim.pause();}).width(Constants.FULL_PERCENT)Button($r('app.string.stop')).onClick(async () => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];anim.stop();}).width(Constants.FULL_PERCENT)Button($r('app.string.finish')).onClick(async () => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];anim.finish();}).width(Constants.FULL_PERCENT)Button($r('app.string.restart')).onClick(async () => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];anim.restart();}).width(Constants.FULL_PERCENT)Button($r('app.string.seek')).onClick(async () => {if (!this.scene || !this.scene.animations[0]) {return;}let anim: Animation = this.scene.animations[0];// Seek to 30%.anim.seek(0.3);}).width(Constants.FULL_PERCENT)Button($r('app.string.back')).onClick(() => {router.back();}).width(Constants.FULL_PERCENT)}.layoutWeight(1).justifyContent(FlexAlign.End)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left')).justifyContent(FlexAlign.SpaceBetween)}
}

• 对动画的播放、暂停等进行操作的功能接口参考：SceneAnimation.ets

  • 修改enabled属性改变动画是否启用；
  • 只读属性duration、running、progress为动画的时长、进行状态、已经进行的比例；
  • 调用start方法控制动画开启；
  • 调用pause方法控制动画暂停；
  • 调用stop方法控制动画停止，并将动画状态设置为开头；
  • 调用finish方法控制动画结束，并将动画状态设置为结尾；
  • 调用restart方法控制动画从头开始；
  • 调用seek方法控制动画设置到指定状态；
  • onStarted方法在动画开始时执行传入的回调；
  • onFinished方法在动画结束时执行传入的回调。

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import {Scene,Camera,Image,SceneResourceFactory,EnvironmentBackgroundType,
} from '@kit.ArkGraphics3D';
import { router } from '@kit.ArkUI';
import { Constants } from '../constants/Constants';
import { CalcUtils } from '../utils/CalcUtils';
import Logger from '../utils/Logger';let typeFlag: number = 0;
let radianceImageFlag: boolean = true;
let factorIndex: number = 0;@Entry
@Component
struct sceneEnvironment {@State sceneOpt: SceneOptions | null = null;scene: Scene | null = null;cam: Camera | null = null;env: Environment | null = null;envImg1: Image | null = null;envImg2: Image | null = null;envImg3: Image | null = null;radianceImg1: Image | null = null;onPageShow(): void {this.init();}onPageHide(): void {if (this.scene) {this.scene.destroy();}this.cam = null;this.scene = null;}init(): void {if (this.scene === null) {Scene.load($rawfile('gltf/DamagedHelmet/glTF/DamagedHelmet.gltf')).then(async (result: Scene) => {this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;let rf: SceneResourceFactory = this.scene.getResourceFactory();this.cam = await rf.createCamera({ 'name': 'Camera1' });this.cam.enabled = true;this.cam.position.z = 5;this.env = await rf.createEnvironment({ 'name': 'Env' });this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;this.envImg1 = await rf.createImage({ name: 'envImg1', uri: $rawfile('gltf/Cube/glTF/Cube_BaseColor.png') });this.envImg2 = await rf.createImage({name: 'envImg2',uri: $rawfile('gltf/Environment/glTF/images/quarry_02_2k_skybox.ktx')});this.envImg3 = await rf.createImage({name: 'envImg3',uri: $rawfile('gltf/DamagedHelmet/glTF/Default_albedo.jpg')});this.radianceImg1 = await rf.createImage({name: 'radianceImg1',uri: $rawfile('gltf/Environment/glTF/images/quarry_02_2k_radiance.ktx')});}).catch((error: string) => {Logger.error(`init error: ${error}`);});}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent')).backgroundColor(Color.Transparent).width(Constants.NINETY_PERCENT).height(Constants.FULL_PERCENT)} else {Text($r('app.string.loading'))}}.height(Constants.THIRTY_PERCENT).width(Constants.FULL_PERCENT).backgroundColor(Color.White).borderRadius($r('app.float.board_radius_normal'))Column({ space: Constants.LIST_SPACE }) {Button($r('app.string.change_env_img_type')).onClick(() => {if (!this.scene || !this.env || !this.cam) {return;}const ENV_TYPE_COUNT: number = 4;const ENV_TYPE_0: number = 0;const ENV_TYPE_1: number = 1;const ENV_TYPE_2: number = 2;typeFlag = ++typeFlag % ENV_TYPE_COUNT;if (typeFlag === ENV_TYPE_0) {this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;this.cam.clearColor = Constants.CLEAR_COLOR;} else if (this.envImg1 && typeFlag === ENV_TYPE_1) {this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_IMAGE;this.scene.environment.environmentImage = this.envImg1;} else if (this.envImg2 && typeFlag === ENV_TYPE_2) {this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_CUBEMAP;this.scene.environment.environmentImage = this.envImg2;} else {this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_EQUIRECTANGULAR;this.scene.environment.environmentImage = this.envImg3;}}).width(Constants.FULL_PERCENT)Button($r('app.string.change_environment_map_factor')).onClick(() => {if (!this.scene || !this.env) {return;}this.scene.environment.environmentMapFactor =Constants.ENVIRONMENT_FACTOR[++factorIndex % Constants.ENVIRONMENT_FACTOR.length];}).width(Constants.FULL_PERCENT)Button($r('app.string.change_radiance_mg')).onClick(() => {if (!this.scene || !this.env) {return;}radianceImageFlag = !radianceImageFlag;if (radianceImageFlag) {this.scene.environment.radianceImage = null;}if (this.radianceImg1 && !radianceImageFlag) {this.scene.environment.radianceImage = this.radianceImg1;}}).width(Constants.FULL_PERCENT)Button($r('app.string.change_indirect_diffuse_factor')).onClick(() => {if (!this.scene || !this.env) {return;}this.scene.environment.indirectDiffuseFactor =Constants.ENVIRONMENT_FACTOR[++factorIndex % Constants.ENVIRONMENT_FACTOR.length];}).width(Constants.FULL_PERCENT)Button($r('app.string.change_indirect_specular_factor')).onClick(() => {if (!this.scene || !this.env) {return;}this.scene.environment.indirectSpecularFactor =Constants.ENVIRONMENT_FACTOR[++factorIndex % Constants.ENVIRONMENT_FACTOR.length];}).width(Constants.FULL_PERCENT)Button($r('app.string.change_irradiance_coefficients')).onClick(() => {if (!this.scene || !this.env) {return;}this.scene.environment.irradianceCoefficients = [{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() },{ x: CalcUtils.genRandom(), y: CalcUtils.genRandom(), z: CalcUtils.genRandom() }];}).width(Constants.FULL_PERCENT)Button($r('app.string.back')).onClick(() => {router.back();}).width(Constants.FULL_PERCENT)}.layoutWeight(1).justifyContent(FlexAlign.End)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left')).justifyContent(FlexAlign.SpaceBetween)}
}

• 对纹理材质进行操作的功能接口参考：SceneShader.ets

  • 首先创建一个shader作为ShaderMaterial的colorShader，再创建一个material作为纹理的ShaderMaterial；
  • 使用Geometry获取相应的带有Material的Mesh节点；
  • 修改shader的input参数；
  • 修改subMesh的material属性，将其变为自定义的ShaderMaterial；
  • 修改materialOverride属性，将纹理覆盖为自定义的ShaderMaterial。

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import {Aabb,Vec4,Scene,Camera,Shader,ShaderMaterial,Geometry,Material,Node,Image,Container,SceneResourceFactory,EnvironmentBackgroundType,MaterialType
} from '@kit.ArkGraphics3D';
import { Animator, AnimatorResult, router } from '@kit.ArkUI';
import Logger from '../utils/Logger';
import { Constants } from '../constants/Constants';@Entry
@Component
struct sceneShader {@State sceneOpt: SceneOptions | null = null;@State hierarchy: string = '';@State meshInfo: string = '';scene: Scene | null = null;rf: SceneResourceFactory | null = null;cam: Camera | null = null;shader: Shader | null = null;material: ShaderMaterial | null = null;geom: Geometry | null = null;image: Image | null = null;materialOrg: Material | null = null;backAnimator: AnimatorResult | undefined = undefined;step: number = 0;traversal(node: Node | null): void {if (!node) {return;}this.hierarchy += node.path + '/' + node.name + '\n';let container: Container<Node> = node.children;let count: number = container.count();this.hierarchy += '  ';for (let i = 0; i < count; i++) {this.traversal(container.get(i));}}onPageShow(): void {this.init();}printAabb(aabb: Aabb, append: string): string {let info: string = '';info += append + ' max aabb [ ' + aabb.aabbMax.x + ' ' + aabb.aabbMax.y + ' ' + aabb.aabbMax.z + ' ]';info += '\n' + append + ' min aabb [ ' + aabb.aabbMin.x + ' ' + aabb.aabbMin.y + ' ' + aabb.aabbMin.z + ' ]';return info;}onPageHide(): void {if (this.scene) {this.scene.destroy();}this.cam = null;this.scene = null;}init(): void {this.backAnimator = Animator.create(Constants.ANIMATION_OPTION);this.backAnimator.onFrame = () => {this.step++;if (this.material && this.material.colorShader) {// Just give a random effect.(this.material.colorShader.inputs['vec_1'] as Vec4) = {x: Math.abs(Math.sin(this.step) + 0.5),y: Math.abs(Math.sin(this.step * 0.86) + 0.5),z: Math.abs(Math.sin(this.step * 0.91) + 0.5),w: 1.0};(this.material.colorShader.inputs['time'] as number) = this.step;}};if (this.scene === null) {Scene.load($rawfile('gltf/Cube/glTF/Cube.gltf')).then(async (result: Scene) => {this.scene = result;this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;this.rf = this.scene.getResourceFactory();this.cam = await this.rf.createCamera({ 'name': 'Camera1' });this.cam.enabled = true;this.cam.position.z = Constants.CAMERA_POSITION_Z_INDEX;this.scene.environment.backgroundType = EnvironmentBackgroundType.BACKGROUND_NONE;this.image =await this.rf.createImage({ name: 'envImg3', uri: $rawfile('gltf/DamagedHelmet/glTF/Default_AO.jpg') });this.traversal(this.scene?.root);if (!this.geom) {this.geom = this.scene.getNodeByPath(Constants.CUBE_PATH) as Geometry;this.meshInfo += this.printAabb(this.geom.mesh.aabb, 'Mesh ');for (let i = 0; i < this.geom.mesh.subMeshes.length; i++) {this.meshInfo += '\n';this.meshInfo += this.printAabb(this.geom.mesh.aabb, 'Submesh[' + i + ']');}}this.materialOrg = this.geom.mesh.subMeshes[0].material;}).catch((error: string) => {Logger.error(`init error: ${error}`);});}}async createShader(): Promise<void> {if (!this.scene || !this.rf) {return;}if (!this.material) {this.material = await this.rf.createMaterial({ name: 'CustomMaterial' }, MaterialType.SHADER);}if (!this.shader) {this.shader = await this.rf.createShader({name: 'CustomShader',uri: $rawfile('shaders/custom_shader/custom_material_sample.shader')});}if (this.material) {this.material.colorShader = this.shader;}if (!this.geom) {this.geom = this.scene.getNodeByPath(Constants.CUBE_PATH) as Geometry;}this.geom.mesh.materialOverride = undefined;this.geom.mesh.subMeshes[0].material = this.material;if (this.material && this.material.colorShader && this.image) {(this.material.colorShader.inputs['BASE_COLOR_Image'] as Image) = this.image;}}build() {Column({ space: Constants.LIST_SPACE }) {Column() {if (this.sceneOpt) {Component3D(this.sceneOpt).renderWidth($r('app.string.sixty_percent')).renderHeight($r('app.string.sixty_percent')).onAppear(() => {this.backAnimator?.play()})} else {Text($r('app.string.loading'))}}.height(Constants.THIRTY_PERCENT).width(Constants.FULL_PERCENT).backgroundColor(Color.White).borderRadius($r('app.float.board_radius_normal'))Column() {Text(this.meshInfo).fontSize($r('app.float.text_font_size'))Text(this.hierarchy).fontSize($r('app.float.text_font_size'))}.borderRadius($r('app.float.board_radius_normal')).backgroundColor(Color.White).width(Constants.FULL_PERCENT).padding($r('app.float.text_area_padding')).alignItems(HorizontalAlign.Start)Blank().layoutWeight(1)Button($r('app.string.create_shader')).onClick(() => {this.createShader();}).width(Constants.FULL_PERCENT)Button($r('app.string.recovery_original_material')).onClick(async () => {if (this.geom) {this.geom.mesh.materialOverride = undefined;this.geom.mesh.subMeshes[0].material = this.materialOrg as ShaderMaterial;}}).width(Constants.FULL_PERCENT)Button($r('app.string.material_override')).onClick(async () => {if (this.geom) {this.geom.mesh.subMeshes[0].material = this.materialOrg as ShaderMaterial;}if (this.geom && this.material) {this.geom.mesh.materialOverride = this.material as ShaderMaterial;}}).width(Constants.FULL_PERCENT)Button($r('app.string.back')).onClick(() => {this.backAnimator?.cancel();router.back();}).width(Constants.FULL_PERCENT)}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).padding($r('app.float.page_padding_left')).justifyContent(FlexAlign.SpaceBetween)}
}