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

爱桥代码的程序媛2024-08-06 17:04

介绍

本实例主要介绍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)

      }
      }

相关推荐
智慧化智能化数字化方案3 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY20034 小时前
华为VER系统及CLI命令熟悉
华为
SameX4 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX4 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index12 小时前
#Uniapp篇：支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室15 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu718 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩18 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
岳不谢20 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr057520 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作