Kaip programiškai sukurti 3D tinklelį TypeScript

Žingsnis 1: Įdiekite @aspose/3d

npm install @aspose/3d

Nereikia jokių natūralių papildinių ar sistemos bibliotekų. Paketas apima TypeScript tipų apibrėžimus.

Minimumas tsconfig.json:

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

Žingsnis 2: Sukurkite sceną ir mazgą

Scene yra aukščiausio lygio konteineris. Visa geometrija turi būti prijungta prie Node scenos medyje:

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

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

createChildNode(name) sukuria pavadintą mazgą ir prijungia jį kaip esamo mazgo vaiką. Grąžintas Node objektas yra vieta, kurioje 7 žingsnyje prijungsite tinklą.

3 žingsnis: sukurti tinklelio objektą

Mesh saugo viršūnių pozicijas ir daugiakampių apibrėžimus. Sukurkite vieną su pasirenkamu pavadinimu:

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

const mesh = new Mesh('triangle');

Tinklas pradžioje tuščias: nėra viršūnių ir nėra veidų. Jūs juos pridėsite tolesniuose žingsniuose.

Žingsnis 4: Pridėti kontrolinius taškus (viršūnes)

Kontroliniai taškai yra viršūnių pozicijos vietinėje erdvėje. Įdėkite Vector4 reikšmes į mesh.controlPoints. Ketvirta komponentė (w) yra 1 pozicijoms:

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 šias pozicijas nurodote pagal jų nulio pagrindo indeksą, kai apibrėžiate daugiakampio veidus.

Žingsnis 5: Sukurti daugiakampio paviršius

createPolygon() apibrėžia veidą išvardindama viršūnių indeksus tvarka. Trys indeksai sudaro trikampį:

mesh.createPolygon(0, 1, 2);

Taip pat galite apibrėžti kvadratus (keturis indeksus) arba bet kokius daugiakampius formatams, kurie juos palaiko. glTF atveju biblioteka automatiškai sueksportuodama suskaidys kvadratus ir n‑kampus į trikampius.

Žingsnis 6: Pridėti viršūnių normalės

Normalės pagerina atvaizdavimo kokybę. Naudokite mesh.createElement(), kad sukurtumėte VertexElementNormal, surinktumėte normalės vektorius į masyvą, tada iškvieskite setData(), kad juos išsaugotumėte. data gaunamasis metodas grąžina apsauginę kopiją — į ją įdėti (push) neturi jokio poveikio. Naudokite FVector3 (viengubo tikslumo slankiojo kablelio) normalės duomenims, o ne 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 reiškia vieną normalią per viršūnę. ReferenceMode.DIRECT reiškia, kad duomenų masyvas indeksuojamas tiesiogiai pagal daugiakampio viršūnės indeksą.

Žingsnis 7: Prisegti tinklelį ir išsaugoti į glTF

Priskirkite tinklelį mazgui per node.entity, tada išsaugokite sceną:

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');

Norėdami vietoj to sukurti vieną savarankišką .glb failą, nustatykite saveOpts.binaryMode = true ir pakeiskite išvesties failo plėtinį į .glb.