Kā programmatiski izveidot 3D režģi TypeScript

1. solis: Instalējiet @aspose/3d

npm install @aspose/3d

Nav vajadzīgi vietējie papildinājumi vai sistēmas bibliotēkas. Pakotnē ir iekļautas TypeScript tipa definīcijas.

Minimums tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true
  }
}

2. solis: Izveidojiet ainu un mezglu

Scene ir augstākā līmeņa konteineris. Visa ģeometrija jāpiestiprina Node ainas koka iekšienē:

import { Scene } from '@aspose/3d';

const scene = new Scene();
const node = scene.rootNode.createChildNode('triangle');

createChildNode(name) izveido nosauktu mezglu un pieslēdz to kā pašreizējā mezgla bērnu. Atgrieztais Node objekts ir vieta, kur pievienosiet mesh 7. solī.

3. solis: Izveidot režģa objektu

Mesh satur virsotņu pozīcijas un daudzstūru definīcijas. Izveidojiet vienu ar izvēles nosaukumu:

import { Mesh } from '@aspose/3d/entities';

const mesh = new Mesh('triangle');

Tīkls sākas tukšs: nav virsotņu un nav seju. Jūs tos pievienojat nākamajos soļos.

Solis 4: Pievienot kontroles punktus (virsotnes)

Kontroles punkti ir virsotnes pozīcijas lokālajā telpā. Ievietojiet Vector4 vērtības mesh.controlPoints. Ceturtais komponents (w) ir 1 pozīcijām:

import { Vector4 } from '@aspose/3d/utilities';

mesh.controlPoints.push(new Vector4(0.0, 0.0, 0.0, 1.0)); // index 0
mesh.controlPoints.push(new Vector4(1.0, 0.0, 0.0, 1.0)); // index 1
mesh.controlPoints.push(new Vector4(0.5, 1.0, 0.0, 1.0)); // index 2

Jūs atsaucaties uz šīm pozīcijām, izmantojot to nulles bāzes indeksu, definējot daudzstūra sejas.

5. solis: Izveidot daudzstūra sejas

createPolygon() definē seju, uzskaitot virsotnes indeksus secībā. Trīs indeksi veido trīsstūri:

mesh.createPolygon(0, 1, 2);

Jūs varat arī definēt kvadrātus (četras indeksus) vai patvaļīgus daudzstūrus formātiem, kas tos atbalsta. glTF gadījumā bibliotēka automātiski trīsstūruveidos kvadrātus un n‑daudzstūrus eksportēšanas laikā.

6. solis: Pievienot virsotnes normāles

Normālie vektori uzlabo renderēšanas kvalitāti. Izmantojiet mesh.createElement(), lai izveidotu VertexElementNormal, savāciet normālos vektorus masīvā, pēc tam izsauciet setData(), lai tos saglabātu. data piekļuves metode (getter) atgriež aizsargājošu kopiju — pievienošana tai nav ietekmes. Izmantojiet FVector3 (vienkāršā precizitātes peldošais punkts) normālo datu glabāšanai, nevis Vector4.

import { VertexElementNormal } from '@aspose/3d/entities';
import { VertexElementType, MappingMode, ReferenceMode } from '@aspose/3d/entities';
import { FVector3 } from '@aspose/3d/utilities';

const normals = mesh.createElement(
    VertexElementType.NORMAL,
    MappingMode.CONTROL_POINT,
    ReferenceMode.DIRECT
) as VertexElementNormal;

// Build the normal array, then call setData() — do NOT push to normals.data
normals.setData([
    new FVector3(0, 0, 1), // normal for vertex 0 (pointing +Z)
    new FVector3(0, 0, 1), // normal for vertex 1
    new FVector3(0, 0, 1), // normal for vertex 2
]);

MappingMode.CONTROL_POINT nozīmē vienu normālu uz virsotnes. ReferenceMode.DIRECT nozīmē, ka datu masīvs tiek indeksēts tieši pēc daudzstūra virsotnes indeksa.

Solis 7: Pievienot režģi un saglabāt kā glTF

Piešķiriet režģi mezglam, izmantojot node.entity, pēc tam saglabājiet ainu:

import { GltfSaveOptions, GltfFormat } from '@aspose/3d/formats/gltf';

node.entity = mesh;

const saveOpts = new GltfSaveOptions();
scene.save('triangle.gltf', GltfFormat.getInstance(), saveOpts);
console.log('Triangle mesh saved to triangle.gltf');

Lai izveidotu vienu pašpietiekamu .glb failu, iestatiet saveOpts.binaryMode = true un mainiet izvades faila paplašinājumu uz .glb.