HarmonyOS鸿蒙Next 5.1.1中api18到底要如何调用ComponentContent，'@kit.ArkGraphics3D'，'@kit.ArkUI'，实现基本的3D旋转地球仪，这在three.js中轻轻松松实现为什么鸿蒙比登天还难？

HarmonyOS鸿蒙Next 5.1.1中api18到底要如何调用ComponentContent，’@kit.ArkGraphics3D’，’@kit.ArkUI’，实现基本的3D旋转地球仪，这在three.js中轻轻松松实现为什么鸿蒙比登天还难？ 鸿蒙5.1.1,api18到底要如何调用ComponentContent，’@kit.ArkGraphics3D’，’@kit.ArkUI’，实现基本的3D旋转地球仪，这在three.js中轻轻松松实现为什么鸿蒙比登天还难？要求鸿蒙原生代码，不用webview不用c++，不用外链网址。（参考three.js轻松实现效果：

const scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([0,1,0, -1,-1,0, 1,-1,0]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 创建地球主体
function createEarth() {
    const texture = new THREE.TextureLoader().load('world4kl.jpg');
    // 地球球体
    const geometry = new THREE.SphereGeometry(HEX_RADIUS, 64, 64);
    const material = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load('world4kl.jpg'),
        bumpMap: new THREE.TextureLoader().load('earth_bump_roughness_clouds_4096.jpg'),
        bumpScale: 1.5,
        specularMap: new THREE.TextureLoader().load('earth_specular_2048.jpg'),
        specular: 0x222222
    });
    earth = new THREE.Mesh(geometry, material);
    scene.add(earth);
}
createEarth();

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    mesh.rotation.x += 0.01;
    renderer.render(scene, camera);
}
animate();

感谢高手不吝赐教。


更多关于HarmonyOS鸿蒙Next 5.1.1中api18到底要如何调用ComponentContent，'@kit.ArkGraphics3D'，'@kit.ArkUI'，实现基本的3D旋转地球仪，这在three.js中轻轻松松实现为什么鸿蒙比登天还难？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

若是需要使用ArkGraphics实现3D地球仪效果，需要先准备好地球仪模型，再参考基于3D引擎接口实现3D图形渲染功能示例中的SceneAnimation页面，通过Scene.load加载3D地球仪模型资源，再获取animations属性通过其start方法播放动画。

更多关于HarmonyOS鸿蒙Next 5.1.1中api18到底要如何调用ComponentContent，'@kit.ArkGraphics3D'，'@kit.ArkUI'，实现基本的3D旋转地球仪，这在three.js中轻轻松松实现为什么鸿蒙比登天还难？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这里面有官方的示例代码楼主可以尝试运行学习一下部署方法：
ArkGraphics 3D场景搭建以及管理-ArkGraphics 3D（方舟3D图形）-图形 - 华为HarmonyOS开发者

参考仓库：Graphics3D: 本实例主要介绍3D引擎提供的接口功能。

cke_1716.png

谢谢，这个我看过，好像没有体现出鸿蒙优势。是否可以说：鸿蒙原生实现目前远不如three.js等第三方，

希望HarmonyOS能加强与其他品牌设备的兼容性，让更多人受益。

后续版本相应的能力会有增强的，

ArkGraphics3D核心逻辑

// 导入3D图形库

import { Scene, Mesh, Geometry, Material, Camera } from '@kit.ArkGraphics3D';

import { View3D } from '@kit.ArkUI';

@Component

struct EarthComponent {

  private scene: Scene = new Scene();

  private camera: Camera = new Camera();

  

  build() {

    View3D()

      .width('100%').height('100%')

      .onFrameUpdate(() => {

        this.animate();

      })

  }

  aboutToAppear() {

    // 初始化3D场景

    this.initScene();

    this.createEarthMesh();

  }

  private initScene() {

    // 设置相机参数

    this.camera.position = [0, 0, 5];

    this.camera.setPerspective(75, 1.78, 0.1, 1000);

  }

  private createEarthMesh() {

    const geometry = new Geometry();

    // 球体顶点数据生成（需手动计算）

    geometry.setPositions(this.generateSphereVertices(1, 64, 64));

    

    const material = new Material();

    material.baseColor = { texture: this.loadTexture('world4kl.jpg') };

    

    const earth = new Mesh(geometry, material);

    this.scene.add(earth);

  }

  private animate() {

    // 更新旋转角度

    this.scene.meshes.rotation.y += 0.01;

    View3D.requestFrameUpdate();

  }

}

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

谢谢兄弟。辛苦了。麻烦你，这代码还是有点问题：我是5.1.1IDE的SDK、api是19版本。View3D引入都成大问题报错：Module ‘"@kit.ArkUI"’ has no exported member ‘View3D’. <ArkTSCheck>。 其实这也是鸿蒙开发最频繁遇到的问题。1：鸿蒙官方版本混乱难以查实。2：几乎全部AI都给出错误的引入。而且官方的智能客服都是瞎编乱造。可以说没用之前感觉鸿蒙开发语言无所不能。但实际一用它就翻白眼。哎，太难了，

他的文档确实比较混乱，也有幸参与过改进调研，但是好像没啥用，

在HarmonyOS Next 5.1.1中，使用api18调用ComponentContent需通过ArkUI声明式开发范式结合ArkGraphics3D组件实现3D渲染。通过@kit.ArkGraphics3D模块加载3D模型，利用@kit.ArkUI的Canvas组件作为渲染容器。旋转功能需通过Matrix4变换矩阵操作，结合动画API实现旋转效果。鸿蒙的3D渲染基于原生引擎，与three.js的WebGL抽象层设计理念不同，需适应其声明式开发方式。

在HarmonyOS Next 5.1.1中，使用ArkUI和ArkGraphics3D实现3D旋转地球仪需要遵循原生API的设计逻辑。以下是一个基于ArkTS的示例代码，展示如何通过@kit.ArkGraphics3D和@kit.ArkUI构建基本3D场景并实现旋转效果：

import { ComponentContent, Node, Scene, Mesh, Geometry, Material, Camera, Renderer } from '@kit.ArkGraphics3D';
import { BuilderNode, ArkComponent } from '@kit.ArkUI';

@Builder
function EarthGlobeBuilder() {
  // 创建3D场景
  Scene.create()
    .width('100%')
    .height('100%')
    .onReady((scene: Scene) => {
      // 创建相机
      const camera = new Camera();
      camera.position.set(0, 0, 5);
      scene.addChild(camera);

      // 创建地球几何体
      const geometry = new Geometry.Sphere(1, 64, 64);
      const material = new Material.Phong();
      material.diffuseMap = 'world4kl.jpg'; // 确保图片资源在项目中
      material.normalMap = 'earth_bump_roughness_clouds_4096.jpg';
      material.specularMap = 'earth_specular_2048.jpg';

      const earth = new Mesh(geometry, material);
      scene.addChild(earth);

      // 旋转动画
      setInterval(() => {
        earth.rotationY += 0.01;
        scene.render(); // 手动触发渲染
      }, 16);
    });
}

@Component
struct EarthComponent {
  build() {
    Column() {
      EarthGlobeBuilder()
    }
  }
}

关键点说明：

  1. ArkGraphics3D的API设计与three.js不同，需通过Scene、Mesh、Geometry等类逐层构建
  2. 纹理加载需使用Material的diffuseMap/normalMap等属性直接赋值
  3. 动画需通过setInterval或requestAnimationFrame模拟，并手动调用scene.render()
  4. 确保纹理图片放置在resources/base/media目录

与three.js的差异主要在于API设计理念和渲染机制，ArkGraphics3D更注重移动端性能优化和系统集成，虽然初期学习成本较高，但能获得更好的原生性能表现。

回到顶部