כיצד לבנות רשת תלת‑ממדית באופן תכנותי ב‑TypeScript

שלב 1: התקן @aspose/3d

npm install @aspose/3d

אין צורך בתוספים מקומיים או בספריות מערכת. החבילה כוללת הגדרות סוגים של TypeScript.

מינימום tsconfig.json:

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

שלב 2: צור סצנה וצומת

A Scene הוא המכולה ברמת העליון. כל הגאומטריה חייבת להיות מצורפת ל-Node בתוך עץ הסצנה:

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

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

createChildNode(name) יוצר צומת בעל שם ומחבר אותו כצאצא של הצומת הנוכחי. האובייקט Node המוחזר הוא המקום שבו תצמיד את הרשת בשלב 7.

שלב 3: צור Mesh Object

Mesh מחזיק מיקומי קודקודים והגדרות פוליגון. צור אחד עם שם אופציונלי:

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

const mesh = new Mesh('triangle');

הרשת מתחילה ריקה: אין קודקודים ואין פאות. אתה מוסיף אותם בשלבים הבאים.

שלב 4: הוסף נקודות שליטה (קודקודים)

נקודות הבקרה הן מיקומי הקודקוד במרחב המקומי.
הדחף ערכי Vector4 אל mesh.controlPoints.
הרכיב הרביעי (w) הוא 1 עבור מיקומים:

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

אתה מתייחס למיקומים אלה לפי האינדקס שמתחיל מאפס כאשר מגדיר פאות פוליגון.

שלב 5: יצירת פאות פוליגון

createPolygon() מגדיר פנים על‑ידי רשימת אינדקסי הקודקודים בסדר. שלושה אינדקסים יוצרים משולש:

mesh.createPolygon(0, 1, 2);

אתה יכול גם להגדיר קוודרנטים (ארבע אינדקסים) או פוליגונים שרירותיים עבור פורמטים שתומכים בהם. עבור glTF, הספרייה תבצע טריאנגולציה אוטומטית של קוודרנטים ו‑n‑גונים ביצוא.

שלב 6: הוסף נורמות קודקוד

נורמליות משפרות את איכות הרינדור. השתמש בmesh.createElement() כדי ליצור VertexElementNormal, אסוף וקטורי נורמל למערך, ואז קרא לsetData() כדי לאחסן אותם. המקבל data מחזיר עותק מגן — הוספה אליו לא משפיעה. השתמש בFVector3 (float ברמת דיוק יחיד) לנתוני נורמל, ולא ב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 משמעותו נורמל אחד לכל קודקוד. ReferenceMode.DIRECT משמעותו שמערך הנתונים מאונדקס ישירות לפי אינדקס קודקוד הפוליגון.

שלב 7: צרף את ה‑Mesh ושמור ל‑glTF

הקצה את הרשת לצומת דרך node.entity, ואז שמור את הסצנה:

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

כדי ליצור קובץ .glb יחיד וכולל את כל המרכיבים, הגדר saveOpts.binaryMode = true ושנה את סיומת קובץ הפלט ל.glb.