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

35 阅读 0 评论 0 点赞

介绍

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

效果预览

使用说明

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

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » 鸿蒙图形开发【3D引擎接口示例】

点赞(0) 打赏

本文分类：文章资讯
本文标签：鸿蒙图形开发【3D引擎接口示例】
浏览次数：35 次浏览
本文链接：https://freeymw.com/article/20999.html

上一篇 > 【Rabbitmq的消息模型】
下一篇 > 使用Python+moviepy做音频的淡入淡出效果

评论列表共有 0 条评论

暂无评论

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

介绍

效果预览

具体实现

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复