企业官网建设流程全解析

最近很火的Remy大家有没有体验，平面的2D图片已经不能满足用户，未来可能会更多的相机支持拍摄3D照片。今天来了解一下鸿蒙的3D图形展示。我找了个汽车的3D模型资源，看一下展示效果。由于能力有限，本文只实现修改相机旋转角度。

ArkGraphics 3D（方舟3D图形）基于轻量级的3D引擎以及渲染管线为开发者提供基础3D场景绘制能力，供开发者便捷、高效地构建3D场景并完成渲染。

一个3D场景通常由光源、相机、模型三个关键部分组成。

光源：为整个3D场景提供光照，使得3D场景中的模型变得可见。与真实物理场景一致，没有光源场景将变得一片漆黑，得到的渲染结果也就是全黑色。
相机：为3D场景提供一个观察者。3D渲染本质上是从一个角度观察3D场景并投影到2D图片上。没有相机就没有3D场景的观察者，也就不会得到渲染结果。
模型：3D场景中的模型用于描述对象的形状、结构和外观，一般具有网格、材质、纹理、动画等属性。一些常见的3D模型格式有OBJ、FBX、glTF等。
模型加载后，可以通过ArkUI的Component3D渲染组件呈现给用户。

Component3D(sceneOptions?: SceneOptions)

Component3D组件配置选项 SceneOptions

设置场景 Scene

属性

方法

创建3D场景资源 SceneResourceFactory

相机类型，Camera继承自Node

Node属性

Camera属性

3D空间中旋转的数学结构 Quaternion（四元数）

用于表示3D空间中旋转的数学结构。与传统的欧拉角相比，四元数在数值稳定性和避免万向节锁方面具有优势。
四元数的形式是 (x, y, z, w)，由1 个实部（w）+ 3 个虚部（x/y/z） 组成，核心对应 3D 旋转的两个关键信息：
x/y/z：表示旋转轴的方向（比如绕 Y 轴旋转时，x=0、z=0，y≠0）；
w：表示绕这个轴旋转的角度（具体是 w = cos(θ/2)，θ 是旋转的总角度，单位弧度）
旋转 = 绕 (x,y,z) 这个方向的轴，旋转 2×arccos(w) 度

实现源码

import { Scene, Camera, Node, SceneResourceFactory, Quaternion } from '@kit.ArkGraphics3D'; @Entry @ComponentV2 struct GSNodeTest { @Local sceneOpt: SceneOptions | null = null; @Local scene: Scene | null = null; @Local cam: Camera | null = null; @Local node: Node | null | undefined = null; @Local cameraZ: number = 10 @Local rotationX: number = 0 @Local rotationY: number = 0 @Local rotationZ: number = 0 aboutToAppear(): void { this.init(); } init(): void { if (this.scene == null) { // 加载场景资源，支持.gltf和.glb格式，路径和文件名可根据项目实际资源自定义 Scene.load($rawfile("glbs/car.glb")) .then(async (result: Scene) => { this.scene = result; let rf: SceneResourceFactory = this.scene.getResourceFactory(); // 创建相机 this.cam = await rf.createCamera({ "name": "Camera" }); // 设置合适的相机参数 this.cam.enabled = true; // 设置相机的位置 this.cam.position.z = this.cameraZ; this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions; this.node = this.scene.root!.children.get(0) }).catch((error: Error) => { console.error('Scene load failed:', error); }); } } eulerToQuaternion(xDeg:number, yDeg:number, zDeg:number):Quaternion { // 步骤1：角度转弧度（Math.cos/sin要求弧度制） const xRad = xDeg * Math.PI / 180; // 绕X轴旋转弧度 const yRad = yDeg * Math.PI / 180; // 绕Y轴旋转弧度 const zRad = zDeg * Math.PI / 180; // 绕Z轴旋转弧度 // 步骤2：计算半角的正弦/余弦（简化公式） const cx = Math.cos(xRad / 2); const sx = Math.sin(xRad / 2); const cy = Math.cos(yRad / 2); const sy = Math.sin(yRad / 2); const cz = Math.cos(zRad / 2); const sz = Math.sin(zRad / 2); // 步骤3：按XYZ旋转顺序计算四元数（标准欧拉角转四元数公式） const w = cx * cy * cz + sx * sy * sz; const x = sx * cy * cz - cx * sy * sz; const y = cx * sy * cz + sx * cy * sz; const z = cx * cy * sz - sx * sy * cz; return { x, y, z, w }; } build() { Column() { Row() { Column() { if (this.sceneOpt) { // 通过Component3D呈现3D场景 Component3D(this.sceneOpt) } else { Text("Loading···") } }.width('100%') }.height('60%') Column() { Row({ space: 10 }) { Text('相机高度:' + this.cameraZ) Slider({ value: this.cameraZ, min: 1, max: 30, style: SliderStyle.OutSet }).width('50%') .onChange((value: number) => { this.cameraZ = value; this.cam!.position.z = value }) } Row({ space: 10 }) { Text('X轴旋转:' + this.rotationX) Slider({ value: this.rotationX, min: 0, max: 360, style: SliderStyle.OutSet }).width('50%') .onChange((value: number) => { this.rotationX = value; this.node!.rotation = this.eulerToQuaternion(this.rotationX,this.rotationY,this.rotationZ) }) } Row({ space: 10 }) { Text('Y轴旋转:' + this.rotationY) Slider({ value: this.rotationY, min: 0, max: 360, style: SliderStyle.OutSet }).width('50%') .onChange((value: number) => { this.rotationY = value; this.node!.rotation = this.eulerToQuaternion(this.rotationX,this.rotationY,this.rotationZ) }) } Row({ space: 10 }) { Text('Z轴旋转:' + this.rotationZ) Slider({ value: this.rotationZ, min: 0, max: 360, style: SliderStyle.OutSet }).width('50%') .onChange((value: number) => { this.rotationZ = value; this.node!.rotation = this.eulerToQuaternion(this.rotationX,this.rotationY,this.rotationZ) }) } } } } }