Component3D

Child Components

Not supported

APIs

Component3D((sceneOptions?: SceneOptions))

Parameters

SceneOptions

Provides the 3D scene configuration options.

ModelType

Attributes

In addition to the universal attributes, the following attributes are supported.

[h2]environment

environment(uri: Resource)

Sets the 3D environment resource. Currently, only GLTF files are supported. Model resources cannot be dynamically modified after the component is created.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

[h2]customRender

customRender(uri: Resource, selfRenderUpdate: boolean)

Sets the custom 3D scene rendering pipeline. uri and selfRenderUpdate cannot be dynamically modified after the component is created.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

[h2]shader

shader(uri: Resource)

Sets the shader file for custom rendering. The shader file cannot be dynamically modified after the component is created.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

[h2]shaderImageTexture

shaderImageTexture(uri: Resource)

Sets the texture resource used for custom rendering. To use multiple texture resources for custom rendering, call this API multiple times. The sequence in which the resources are used is the same as the call sequence. The texture resource cannot be dynamically modified after the component is created.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

[h2]shaderInputBuffer

shaderInputBuffer(buffer: Array<number>)

Set the animation parameters used for custom rendering.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

[h2]renderWidth

renderWidth(value: Dimension)

Sets the width of the 3D rendering resolution. The width and height of the rendering resolution may be different from those of the component. If this is the case, they are upsampled or downsampled to the component width and height.

If this attribute is not specified, the default width of the rendering resolution is used.

The rendering resolution cannot be dynamically changed after the component is created.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

[h2]renderHeight

renderHeight(value: Dimension)

Sets the height of the 3D rendering resolution. The width and height of the rendering resolution may be different from those of the component. If this is the case, they are upsampled or downsampled to the component width and height.

If this attribute is not specified, the default width of the rendering resolution is used.

The rendering resolution cannot be dynamically changed after the component is created.

System capability: SystemCapability.ArkUi.Graphics3D

Parameters

Events

The universal events are supported.

Example

You can preview how this component looks on a real device, but not in DevEco Studio Previewer.

Example of loading a GLTF model:

// xxx.ets
@Entry
@Component
struct Index {
  scene: SceneOptions = { scene: $rawfile('gltf/DamageHemlt/glTF/DamagedHelmet.gltf'), modelType: ModelType.SURFACE};
  build() {
    Row() {
      Column() {
        Text('GLTF Example')
        Component3D( this.scene )
          .environment($rawfile('gltf/Environment/glTF/Environment.gltf'))
          .renderWidth('90%').renderHeight('90%')
      }.width('100%')
    }
    .height('100%')
  }
}

Example of custom rendering:

import animator, { AnimatorResult } from '@ohos.animator';
class EngineTime {
  totalTimeUs = 0;
  deltaTimeUs = 0;
};

let engineTime = new EngineTime();
let frameCount: number = 0;

function TickFrame() {
  if (frameCount == 10) {
    engineTime.totalTimeUs += 1.0;
    engineTime.deltaTimeUs += 1.0;
    frameCount = 0;
  } else {
    frameCount++;
  }
}

@Entry
@Component
struct Index {
  scene: SceneOptions = { scene: $rawfile('gltf/DamageHemlt/glTF/DamagedHelmet.gltf'), modelType: ModelType.SURFACE};
  backAnimator: AnimatorResult = animator.create({
    duration: 2000,
    easing: "ease",
    delay: 0,
    fill: "none",
    direction: "normal",
    iterations: -1,
    begin: 100,
    end: 200,
  });
  @State timeDelta: number[] = [1.0, 2.0];
  create() {
    this.backAnimator.onfinish = () => {
      console.log('backAnimator onfinish');
    }
    this.backAnimator.onframe = value => {
      TickFrame();
      this.timeDelta[0] = engineTime.deltaTimeUs;
    }

  }
  build() {
    Row() {
      Column() {
        Text('custom rendering')
        Component3D()
          .shader($rawfile('assets/app/shaders/shader/London.shader'))
          .shaderImageTexture($rawfile('assets/London.jpg'))
          .shaderInputBuffer(this.timeDelta)
          .customRender($rawfile('assets/app/rendernodegraphs/London.rng'), true)
          .renderWidth('90%').renderHeight('90%')
          .onAppear(() => {
            this.create();
            this.backAnimator.play();
          }).width('50%').height('50%')
      }.width('100%')
    }
    .height('100%')
  }
}