Как программно построить 3D‑меш в TypeScript

Шаг 1: Установите @aspose/3d

npm install @aspose/3d

Не требуются нативные аддоны или системные библиотеки. Пакет включает определения типов TypeScript.

Минимум tsconfig.json:

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

Шаг 2: Создать сцену и узел

Scene — это контейнер верхнего уровня. Вся геометрия должна быть прикреплена к Node внутри дерева сцены:

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

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

createChildNode(name) создает именованный узел и привязывает его как дочерний к текущему узлу. Возвращаемый объект Node — это место, где вы прикрепите сетку на Шаге 7.

Шаг 3: Создать объект Mesh

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 (число с одинарной точностью) для данных нормалей, а не 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: Присоединить сетку и сохранить в 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.