devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：从前慢现在也慢 | 2024-08-07 04:29:27

赞

踩

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

介绍

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

效果预览

1

2

使用说明

  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'))
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171

  • 对节点的基础属性如位置、旋转、大小等操作参考：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)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257

  • 对相机的属性如投影、后处理等进行操作的功能接口参考：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)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280

  • 对灯光的类型、颜色、强度、阴影等进行操作的功能接口参考：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)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209

  • 对背景进行操作的功能接口考：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)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209

  • 对动画的播放、暂停等进行操作的功能接口参考：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)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214

  • 对纹理材质进行操作的功能接口参考：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)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/940915
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号