Параметрические поверхности

Параметрические поверхности позволяют описывать сложные 3D-объекты с помощью функций, задающих координаты точек через два параметра (u) и (v). В Three.js для их создания используется класс THREE.ParametricGeometry (или THREE.ParametricBufferGeometry в современных версиях), который принимает функцию параметризации и количество сегментов по параметрам.

Синтаксис создания

const geometry = new THREE.ParametricBufferGeometry(func, slices, stacks);

  • func(u, v, target) — функция, задающая координаты точки на поверхности.

    • u и v — значения параметров в диапазоне [0, 1].
    • target — объект типа THREE.Vector3, в который записываются координаты точки.

  • slices — количество сегментов по оси u.

  • stacks — количество сегментов по оси v.

Пример функции для плоскости:

function plane(u, v, target) {
    const width = 10;
    const height = 10;
    target.set((u - 0.5) * width, (v - 0.5) * height, 0);
}

const geometry = new THREE.ParametricBufferGeometry(plane, 20, 20);

Важные аспекты параметризации

  • Параметры u и v нормализованы. Любое преобразование к нужному диапазону выполняется внутри функции.
  • Функция должна возвращать координаты в объект target, а не через return. Это повышает производительность за счет прямой работы с буферами.
  • Количество сегментов влияет на детализацию поверхности и производительность. Высокие значения дают плавные кривые, но увеличивают нагрузку на GPU.

Создание сложных форм

Параметрические поверхности позволяют строить различные формы: цилиндры, сферы, тора, Möbius-полосы и произвольные математические поверхности.

Сфера

function sphere(u, v, target) {
    const radius = 5;
    const theta = u * Math.PI * 2;
    const phi = v * Math.PI;
    const x = radius * Math.sin(phi) * Math.cos(theta);
    const y = radius * Math.sin(phi) * Math.sin(theta);
    const z = radius * Math.cos(phi);
    target.set(x, y, z);
}

const sphereGeometry = new THREE.ParametricBufferGeometry(sphere, 32, 16);

Тор

function torus(u, v, target) {
    const R = 5; // радиус тора
    const r = 2; // радиус трубки
    const theta = u * Math.PI * 2;
    const phi = v * Math.PI * 2;
    const x = (R + r * Math.cos(phi)) * Math.cos(theta);
    const y = (R + r * Math.cos(phi)) * Math.sin(theta);
    const z = r * Math.sin(phi);
    target.set(x, y, z);
}

const torusGeometry = new THREE.ParametricBufferGeometry(torus, 64, 32);

Работа с материалами и отображением

Параметрические геометрии можно использовать с любыми материалами Three.js:

const material = new THREE.MeshStandardMaterial({
    color: 0x3399ff,
    side: THREE.DoubleSide,
    wireframe: false
});

const mesh = new THREE.Mesh(sphereGeometry, material);
scene.add(mesh);

Для визуализации сетки параметрической поверхности удобно использовать THREE.WireframeGeometry:

const wireframe = new THREE.WireframeGeometry(sphereGeometry);
const line = new THREE.LineSegments(wireframe, new THREE.LineBasicMaterial({ color: 0xffffff }));
scene.add(line);

Динамическая анимация поверхностей

Параметрические поверхности легко анимировать, изменяя параметры функции в каждом кадре. Например, можно создавать “волны” на плоскости:

function wave(u, v, target, time) {
    const x = (u - 0.5) * 10;
    const y = (v - 0.5) * 10;
    const z = Math.sin((u + time) * 5) * Math.cos((v + time) * 5);
    target.set(x, y, z);
}

// Обновление геометрии в анимационном цикле
geometry.attributes.position.needsUpdate = true;

Для этого потребуется обновлять буферы позиции и вызывать geometry.computeVertexNormals() при необходимости пересчета нормалей для корректного освещения.

Оптимизация и производительность

  • BufferGeometry предпочтительнее обычного Geometry, так как хранит данные в GPU-буферах.
  • Для больших поверхностей важно не увеличивать slices и stacks сверх необходимого, иначе производительность падает.
  • Использование InstancedMesh позволяет рендерить множество копий параметрических объектов без дополнительной нагрузки на CPU.

Использование параметрических функций с библиотеками визуализации

Параметрические поверхности можно интегрировать с Three.js helperами, такими как OrbitControls для управления камерой, dat.GUI для изменения параметров времени или радиусов в реальном времени. Это позволяет создавать интерактивные учебные и визуализационные приложения.

Понимание принципов параметрических поверхностей обеспечивает гибкость при создании любых форм: от простых плоскостей и сфер до сложных научных моделей и анимаций.

Оглавление