1 tóm tắt

Ở một ít mua sắm hoặc là trò chơi ứng dụng khai phá trung bình dùng đến 3D mô hình, lập thể hiệu quả cấp người dùng càng trực quan thể nghiệm. HarmonyOS NEXT duy trì 3D mô hình nhuộm đẫm, bổn thiên đem giới thiệu như thế nào sử dụng HarmonyOS NEXT cung cấp ArkGraphics 3D ( thuyền cứu nạn 3D đồ hình phục vụ ) nhuộm đẫm một cái 3D Ngộ Không mô hình. Thông qua bổn thiên văn chương ngươi đem học được:

• Như thế nào sử dụng Component3D lắp ráp.
• Như thế nào đối 3D cảnh tượng tiến hành thao tác:
  • Thêm tái mô hình, trước mắt chỉ duy trì glft cách thức, 7 hành số hiệu có thể thêm tái một cái 3D mô hình!
  • Sáng tạo nguồn sáng, nhưng thu hoạch hoặc định nghĩa nguồn sáng
  • Sáng tạo camera, nhưng thu hoạch hoặc tự định nghĩa người quan sát thị giác ( camera )
  • Thay đổi nguồn sáng vị trí, mô hình tọa độ cùng chuyển động
  • Động họa khống chế, mô hình có động họa khi nhưng khống chế này truyền phát tin, đình chỉ

Sử dụng ArkGraphics 3D nhuộm đẫm 3D Ngộ Không mô hình hiệu quả như sau:

2 hoàn cảnh dựng

Chúng ta đầu tiên yêu cầu hoàn thành HarmonyOS khai phá hoàn cảnh dựng, nhưng tham khảo (Khai phá một cái BLE thấp công hao Bluetooth điều chỉnh thử trợ thủ ( một ) liên tiếp Bluetooth phục vụ thiết bị - hoa vì khai phá giả diễn đàn) trung chương 2 tiến hành thao tác.

3 số hiệu kết cấu giải đọc

Bổn thiên hồ sơ chỉ đốiTrung tâm số hiệuTiến hành giảng giải, toàn bộ số hiệu nhưng xem kho hàng địa chỉHelloKun - Gitee.

.entry/src
|-- common // thường dùng công cụ kho
| |-- CommonConstants.ets
| |-- Logger.ets
| `-- PermissionUtil.ets
|-- entryability
| `-- EntryAbility.ets // nhập khẩu, thiết trí toàn bình
`-- pages
|-- Index.ets // trang đầu
|-- NodeBase.ets // mô hình thao tác giao diện
`-- Render3D.ets // 7 hành số hiệu thực hiện nhuộm đẫm 3D mô hình

4 xây dựng ứng dụng chủ giao diện

Kế tiếp kế hoạch đem 3D mô hình cùng truyền cảm khí kết hợp lên, thực hiện trong trò chơi con quay nghi thao tác nhân vật mô hình hiệu quả, cho nên trang đầu mặt sử dụng Navigation lắp ráp thực hiện bố cục, trước đem yêu cầu triển lãm 3D nhuộm đẫm giao diện đơn độc gửi ở một cái giao diện trung. Navigation lắp ráp ở # thể nghiệm quan hệ liệt giáo trình # trung nhiều lần sử dụng, cụ thể thực hiện bước đi tổng kết như sau 1-5 điểm:

// Index.ets
@Entry
@Component
struct Index {

// 1. Hướng dẫn giao diện danh sách
@Builder
PageMap(name: string) {
...
else if (name === "Render3D" ) {
Render3D();
}
...
}
// 2. Hướng dẫn giao diện sạn tin tức
@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
build() {
Navigation(this.pageInfos) {
// 3.List biểu hiện yêu cầu hướng dẫn giao diện danh sách
List({ space: 10 }) {
ForEach(SensorSources, (data: IconItem, index: number) => {
ListItem() {
Column()
{
...
}.justifyContent(FlexAlign.Start)
.width('95%')
.onClick(() => { // điểm đánh đối ứng thiết bị, thu hoạch tử giao diện title
this.clickNum = index;
this.LingDongName = data.title
if(this.clickNum === 1)
{ // 4. Điểm đánh sau hướng dẫn đến chỉ định giao diện
this.pageInfos.pushPath({ name: "Render3D" })
}
...
})
Divider()
...
}
.title( "Linh động truyền cảm" )
.mode(NavigationMode.Auto)
.navDestination(this.PageMap) // 5. Trói định giao diện danh sách
}
}

5 Graphic3D nhuộm đẫm mô hình

5.1 cái gì là Graphic3D?

ArkGraphics 3D ( thuyền cứu nạn 3D đồ hình phục vụ ) căn cứ vào nhẹ lượng cấp 3D động cơ cùng với nhuộm đẫm tuyến ống vì khai phá giả cung cấp cơ sở 3D cảnh tượng vẽ năng lực, cung khai phá giả nhanh và tiện, hiệu suất cao mà xây dựng 3D cảnh tượng cũng hoàn thành nhuộm đẫm. Càng nhiều thỉnh tham khảoArkGraphics 3D tóm tắt - hoa vì HarmonyOS khai phá giả

Đơn giản tới nói, thuyền cứu nạn đồ hình phục vụ duy trì 3D cảnh tượng vẽ trung mô hình, nguồn sáng, camera ba cái mấu chốt tạo thành bộ phận thêm tái cùng quản lý.

• Mô hình: Thêm tái yêu cầu nhuộm đẫm 3D mô hình đến văn ứng dụng kiện hộp cát trung, tỷ như bổn trường hợp trung 3D Ngộ Không, trước mắt ArkGraphics 3D duy trì mô hình miêu tả cách thức vì glTF.

• Nguồn sáng: Nhưng tự định nghĩa toàn bộ 3D cảnh tượng chiếu sáng, khiến cho 3D cảnh tượng trung mô hình trở nên có thể thấy được. Không có nguồn sáng được đến nhuộm đẫm kết quả cũng chính là toàn màu đen.

• Camera: Người dùng nhìn đến 3D cảnh tượng hình ảnh kỳ thật là camera cung cấp một cái người quan sát thị giác. 3D nhuộm đẫm bản chất là từ một cái góc độ quan sát 3D cảnh tượng cũng hình chiếu đến một trương 2D hình ảnh thượng.

• Cảnh tượng quản lý: Cung cấp tự định nghĩa ánh đèn ( Light ), camera ( Camera ) tiết điểm cùng với thông dụng tiết điểm ( Node ) năng lực, chống đỡ khai phá giả tự định nghĩa cảnh tượng ánh đèn, nhuộm đẫm thị giác chờ tin tức. Người dùng có thể động thái mà điều chỉnh cảnh tượng thụ kết cấu cùng với tiết điểm thuộc tính tiến tới điều chỉnh 3D cảnh tượng. Tỷ như thông qua động thái sửa chữa Node, có thể thực hiện xoay tròn, kéo động, súc phóng mô hình hiệu quả. Cụ thể có thể thấy đượcScene ( cảnh tượng quản lý )Cùng vớiSceneNode ( tiết điểm quản lý ).

• 3D tài nguyên quản lý: Cung cấp sáng tạo hình ảnh ( Image ), tài chất ( Material ), hoàn cảnh ( Environment ) cùng với tự định nghĩa tô màu khí (Shader) năng lực, cụ thể thấySceneResource ( tài nguyên quản lý ).

• Động họa khống chế: Có thể khống chế động họa bắt đầu, tạm dừng, kết thúc, truyền phát tin đến chỉ định vị trí chờ khống chế 3D cảnh tượng động họa trạng thái, cụ thể có thể thấy đượcSceneResource ( tài nguyên quản lý ).

5.2 như thế nào sử dụng Component3D lắp ráp

Ở HarmonyOS NEXT ( API 12+ ) trung, thông qua Component3D lắp ráp có thể sử dụng thuyền cứu nạn 3D đồ hình phục vụ, cơ bản sử dụng bước đi như sau:

• Dẫn vào @kit.ArkGraphics3D, bao gồm camera, nguồn sáng, tiết điểm, động họa chờ.

import {
Animation,
Environment,
LayerMask,
NodeType,
Node,
Geometry,
LightType,
Light,
Camera,
Scene } from '@kit.ArkGraphics3D';

• Định nghĩa cảnh tượng, hai cái tham số:

  • scene mô hình đường nhỏ ( 3D mô hình có thể tự hành ở các glft mô hình trang web trung download )

  • modelType nhuộm đẫm loại hình ( TEXTURE nhuộm đẫm đến hoa văn, nhuộm đẫm đến mặt ngoài ( yêu cầu phần cứng duy trì ) )

scene: SceneOptions = { scene: $rawfile('scene_wukong_big.gltf'), modelType: ModelType.TEXTURE};

• Phối trí nhuộm đẫm tham số, thêm tái cảnh tượng. 7 hành mấu chốt số hiệu, có thể nhuộm đẫm ra 3D mô hình!
  • Lắp ráp yêu cầu truyền vào cảnh tượng tham số scene
  • Thiết trí nhuộm đẫm cao khoan
  • Thiết trí mô hình vị trí hoàn cảnh

// ở Index.ets trung trực tiếp sử dụng cái này tử lắp ráp có thể biểu hiện 3D mô hình
@Component
export struct WuKong {
scene: SceneOptions = { scene: $rawfile('scene_wukong_big.gltf'), modelType: ModelType.TEXTURE};
build() {
Column() {
Component3D(this.scene)
.environment($rawfile('scene_wukong_big.gltf'))
.renderWidth('100%').renderHeight('100%')
}.width('100%')
.height('100%')
}
}

Nhuộm đẫm hiệu quả như sau:

5.3 như thế nào xây dựng 3D cảnh tượng

5.1-5.2 tiết giới thiệu Graphic3D cùng với Component3D lắp ráp cơ bản sử dụng phương pháp. Phía dưới giới thiệu như thế nào tinh tế hóa quản lý chúng ta 3D cảnh tượng. Tỷ như thu hoạch cũng tự định nghĩa mô hình trung camera, nguồn sáng, bối cảnh chờ.

5.3.1 dị bước thêm tái mô hình

Quản lý 3D cảnh tượng phía trước trước yêu cầu thêm tái mô hình. 3D mô hình thông thường trọng đại, sử dụng dị bước phương thức thêm tái mô hình, thêm tái thành công sau có thể ở trong đó thu hoạch 3D cảnh tượng nguyên tố. Thêm tái phương thức như sau:

scene: Scene | null = null;
@State sceneOpt: SceneOptions | null = null;
IinitModle(): void {
if (this.scene === null) {
Scene.load($rawfile('scene_wukong_big.gltf'))
.then(async (result: Scene) => {
if (!result) {
return;
}
this.scene = result;
// mô hình nhuộm đẫm lựa chọn
this.sceneOpt = { scene: this.scene, modelType: ModelType.TEXTURE} as SceneOptions;
...
}).catch((reason: string) => {
Logger.error(TAG, `init error: ${reason}`);
});
}
}

5.3.2 phối trí camera

Một cái glTF mô hình có thể bao hàm camera yếu tố. Thành công thêm tái mô hình sau, nếu một cái glTF mô hình trung bao hàm camera, có thể sử dụng ArkGraphics 3D cung cấp tiếp lời thu hoạch camera, tự định nghĩa camera tham số sau thêm tái cảnh tượng, cũng có thể trực tiếp hoàn thành nên camera thị giác hạ 3D cảnh tượng nhuộm đẫm. Nếu không bao hàm camera, cũng có thể lợi dụng ArkGraphics 3D sáng tạo một cái camera hoàn thành nhuộm đẫm. Dưới số hiệu triển lãm như thế nào từ mô hình trung thu hoạch cũng phối trí camera:

cam: Camera | null = null;
IinitModle(): void {
if (this.scene === null) {
Scene.load($rawfile('scene_wukong.gltf.glb'))
.then(async (result: Scene) => {
if (!result) {
return;
}
this.scene = result;
let sceneFactory: SceneResourceFactory = this.scene.getResourceFactory();
// từ thêm tái mô hình trung thu hoạch camera
this.cam = await sceneFactory.createCamera({ 'name': 'Camera1' });
// phối trí tinh tế
this.cam.enabled = true;
this.cam.position.z = 10;
this.cam.clearColor ={r:10,g:10,b:20,a:1};
...
}).catch((reason: string) => {
Logger.error(TAG, `init error: ${reason}`);
});
}
}

5.3.3 nguồn sáng quản lý

Thành công thêm tái mô hình sau, nếu một cái glTF mô hình trung bao hàm nguồn sáng, có thể sử dụng ArkGraphics 3D cung cấp tiếp lời thu hoạch nguồn sáng, tự định nghĩa nguồn sáng tham số sau lại nhuộm đẫm cảnh tượng. Nếu không bao hàm nguồn sáng, cũng có thể lợi dụng ArkGraphics 3D sáng tạo nguồn sáng.

Nguồn sáng thuộc tính tham số có:

• Quang loại hình: Song song quang ( DIRECTIONAL ), điểm nguồn sáng ( SPOT )
• Quang nhan sắc: RGBA tham số
• Cường độ: intensity
• Bóng ma: shadowEnabled
• Nguồn sáng chốt mở: enabled, đóng cửa nguồn sáng hậu trường cảnh một mảnh đen nhánh

light: Light | null = null;
IinitModle(): void {
if (this.scene === null) {
Scene.load($rawfile('scene_wukong.gltf.glb'))
.then(async (result: Scene) => {
if (!result) {
return;
}
this.scene = result;
...
// sáng tạo song song quang
this.light = await sceneFactory.createLight( { name: "light" },LightType.DIRECTIONAL);
// thiết trí song song quang thuộc tính
this.light.color = { r: 0.8, g: 0.1, b: 0.2, a: 1.0 };
this.light.intensity = 100000;
...
}).catch((reason: string) => {
Logger.error(TAG, `init error: ${reason}`);
});
}
}

5.3.4 thu hoạch tiết điểm

Thêm tái mô hình sau có thể thông qua đường nhỏ thu hoạch giao điểm, có thể tự định nghĩa tiết điểm thuộc tính:

• Tiết điểm lớn nhỏ scale. Khống chế mô hình biểu hiện lớn nhỏ
• Tiết điểm vị trí position, khống chế mô hình bày biện góc độ
• Tiết điểm phương hướng rotation, khống chế mô hình xoay tròn phương hướng
• Tiết điểm có thể thấy được tính, hay không biểu hiện nên tiết điểm ( mô hình có thể thấy được tính )

Dưới thí dụ mẫu số hiệu triển lãm thu hoạch tiết điểm sau, bắt được này z tọa độ ( thay đổi này lớn nhỏ nhưng làm mô hình ở đây cảnh trung di động ):

node: Node | null | undefined = null;
@State zAxis: number = 0;
IinitModle(): void {
if (this.scene === null) {
Scene.load($rawfile('scene_wukong.gltf.glb'))
.then(async (result: Scene) => {
if (!result) {
return;
}
this.scene = result;
...
// thu hoạch tiết điểm, tiết điểm danh căn cứ cụ thể glft mô hình xác định
this.node = this.scene.getNodeByPath('rootNode_');
if (this.node) {
this.zAxis = this.node.position.z; // thu hoạch tiết điểm z tọa độ
console.info(TAG,'this.node.position.z',this.node.position.z.toString())
}else{
console.info(TAG,'this.node is NULL')
}
...
}).catch((reason: string) => {
Logger.error(TAG, `init error: ${reason}`);
});
}
}

5.3.5 thêm tái cảnh tượng

Có nguồn sáng, camera chờ yếu tố, chúng ta có thể trực tiếp nhuộm đẫm tự định nghĩa sau mô hình.

build() {
Column({ space:20 }) {
Column() {
if (this.sceneOpt) {
Component3D(this.sceneOpt)
.renderWidth('60%')
.renderHeight('60%')
} else {
Text('loading');
}
// có thể sử dụng cơ sở khống kiện thao tác mô hình cảnh tượng tham số, như thay đổi mô hình vị trí:
Slider({
value: this.value,
min: this.value - 100,
max: this.value + 100,
step: 10,
style: SliderStyle.OutSet
})
.showTips(false)
.onChange((value: number, mode: SliderChangeMode) => {
this.zAxis = value;
if (mode === SliderChangeMode.End) {
if (!this.node) {
return;
}
this.node.position.z = this.zAxis;
console.info(TAG,'this.node.position.z'+this.node.position.z.toString())
}
})
.width('100%')
.height(20)
}
}
}