diff --git a/README.en.md b/README.en.md index 89f3d7d7b6edc94bce5c53e08d7029103f3faf92..906dff650664c056f5004dbd2d60eb8b7ecb9d3d 100644 --- a/README.en.md +++ b/README.en.md @@ -7,12 +7,12 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. ### Preview -| Home page | container | node_base | node_camera | -|-------------------------------------|------------------------------------------|-------------------------------------|----------------------------| +| Home page | container | node_base | node_camera | +| ------------------------------ | ----------------------------------- | ------------------------------ | -------------------------------- | | ![](screenshots/main_page.jpg) | ![](screenshots/node_container.jpg) | ![](screenshots/node_base.jpg) | ![](screenshots/node_camera.jpg) | -| node_light | scene_environment | scene_animation | scene_shader | -|--------------------------------------|---------------------------------------------|-------------------------------------------|----------------------------------------| +| node_light | scene_environment | scene_animation | scene_shader | +| ------------------------------- | -------------------------------------- | ------------------------------------ | --------------------------------- | | ![](screenshots/node_light.jpg) | ![](screenshots/scene_environment.jpg) | ![](screenshots/scene_animation.jpg) | ![](screenshots/scene_shader.jpg) | ### How to Use @@ -53,20 +53,25 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. ``` ### How to Implement + * For details about the APIs for adding, deleting, and traversing nodes, see **ContainerPage.ets**. - * During initialization, depth-first search is used to traverse and print information about each node in the scenario, starting from the root node. - * **remove node**: Call the **remove** method to delete a node. Repeated deletion is not allowed. In this sample, the helmet node is deleted. - * **append node**: Call the **append** method to add a node to the end of the node list. Repeated addition is not allowed. In this sample, a helmet node is added. - * **insert node**: Call the **insertAfter** method to add a node to the specified position in the node list. Repeated addition is not allowed. In this sample, a helmet node is added. - * **clear**: Call the **clear** method to clear all nodes in the node list. In this sample, the nodes under the root node are cleared. + + * During initialization, depth-first search is used to traverse and print information about each node in the scenario, starting from the root node. + * **remove node**: Call the **remove** method to delete a node. Repeated deletion is not allowed. In this sample, the helmet node is deleted. + * **append node**: Call the **append** method to add a node to the end of the node list. Repeated addition is not allowed. In this sample, a helmet node is added. + * **insert node**: Call the **insertAfter** method to add a node to the specified position in the node list. Repeated addition is not allowed. In this sample, a helmet node is added. + * **clear**: Call the **clear** method to clear all nodes in the node list. In this sample, the nodes under the root node are cleared. + * For details about operations on basic node attributes such as position, rotation, and size, see **NodeBase.ets**. - * Use the **scale** attribute to change the size of the node. In this sample, the helmet size is changed. - * Use the **position** attribute to change the position of the node. In this sample, the X coordinate of the helmet is changed. - * Use the **rotation** attribute to change the rotation direction of the node. Changing the rotation of the parent node also changes that of its child nodes (similar to **position**). In this sample, the rotation direction of the helmet is changed. - * Use the **visible** attribute to change the node visibility. In this sample, the visibility of the helmet is changed. - * Call the **getEnabled** and **setEnabled** methods to operate the layer mask of the node. In this sample, the layer mask information is displayed. - + + * Use the **scale** attribute to change the size of the node. In this sample, the helmet size is changed. + * Use the **position** attribute to change the position of the node. In this sample, the X coordinate of the helmet is changed. + * Use the **rotation** attribute to change the rotation direction of the node. Changing the rotation of the parent node also changes that of its child nodes (similar to **position**). In this sample, the rotation direction of the helmet is changed. + * Use the **visible** attribute to change the node visibility. In this sample, the visibility of the helmet is changed. + * Call the **getEnabled** and **setEnabled** methods to operate the layer mask of the node. In this sample, the layer mask information is displayed. + * For details about the APIs for operating camera attributes such as projection and post-processing, see **NodeCamera.ets**. + * Use the **fov** attribute to change the Field of View (FOV) of the projection. In this sample, the FOV can be set to 45, 60, or 90. * Use the **nearPlane** and **farPlane** attributes to change the near and far planes. * Use the **enabled** attribute to enable or disable the camera. If the attribute is set to **false**, the image in the component will no longer be refreshed. @@ -75,6 +80,7 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. * Use the **clearColor** attribute to set the refresh background color of each frame. If this attribute is set to **0** for the alpha channel, a transparent background is obtained. If it is set to **null**, not all background pixels are refreshed. * For details about the APIs for operating the light type, color, intensity, and shadow, see **NodeLight.ets**. + * Use the read-only attribute **lightType** to indicate the light type, which can be set to **DIRECTIONAL** or **SPOT**. * Use the **enabled** attribute to enable or disable the light. * Use the **color** attribute to change the light color. In this sample, three light colors are provided. @@ -82,6 +88,7 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. * Use the **shadowEnabled** attribute to set whether shadows are generated. * For details about the APIs for performing operations on the background, see **SceneEnvironment.ets**. + * Use the **backgroundType** and **environmentImage** attributes to set the background image. The types **BACKGROUND_IMAGE**, **BACKGROUND_EQUIRECTANGULAR**, and **BACKGROUND_CUBEMAP** indicate images in PNG, JPEG, and KTX format, respectively; the type **BACKGROUND_NONE** indicates that no background is set. In this case, you need to set **clearColor** of the alpha channel to **0** to obtain a transparent background. * Use the **environmentMapFactor** attribute to change the parameters of the background image. * Use the **radianceImage** attribute to change the environment mapping in the Physically Based Rendering (PBR) process. @@ -90,6 +97,7 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. * Use the **irradianceCoefficients** attribute to change the corresponding parameter in the PBR process. * For details about the APIs for playing and pausing animations, see **SceneAnimation.ets**. + * Use the **enabled** attribute to enable or disable the animation. * Use the read-only attributes **duration**, **running**, and **progress** to indicate the animation's duration, its running state, and the proportion completed, respectively. * Call the **start** method to start the animation. @@ -102,6 +110,7 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. * Call the **onFinished** method to execute the passed-in callback when the animation ends. * For details about the APIs for operating textures, see **SceneShader.ets**. + * Create a color shader for a shader material, and then create a shader material of the texture. * Use **Geometry** to obtain mesh nodes with materials. * Modify the **input** parameters of the shader. @@ -109,13 +118,15 @@ Images rendered by the 3D engine are displayed in the **Component3D** component. * Change the **materialOverride** attribute to overwrite the texture with the custom shader material. ### Required Permissions + N/A ### Constraints -1. The sample app is supported only on Huawei phones running the standard system. -2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later. +1. The sample is only supported on Huawei phones with standard systems. + +2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later. -3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later. +3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later. -4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later. +4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later.