Встроенные примитивы: CylinderGeometry и ConeGeometry

Three.js предоставляет широкий набор встроенных геометрий для быстрого создания 3D-объектов. Среди них особое место занимают CylinderGeometry и ConeGeometry, позволяющие создавать цилиндры и конусы с высокой степенью настройки параметров.

CylinderGeometry

CylinderGeometry используется для построения цилиндров и усечённых конусов. Основной синтаксис:

const geometry = new THREE.CylinderGeometry(
    radiusTop,     // радиус верхнего основания
    radiusBottom,  // радиус нижнего основания
    height,        // высота цилиндра
    radialSegments = 8,  // количество сегментов по окружности
    heightSegments = 1,  // количество сегментов по высоте
    openEnded = false    // флаг, открыты основания или нет
);

Ключевые параметры:

  • radiusTop и radiusBottom задают форму цилиндра: если radiusTop равен нулю, верх превращается в вершину конуса.
  • height определяет вертикальный размер объекта.
  • radialSegments влияет на сглаженность окружности; чем больше сегментов, тем плавнее будет цилиндр.
  • heightSegments позволяет разбить цилиндр по высоте на части, что удобно для деформаций или анимации.
  • openEnded управляет наличием верхнего и нижнего основания: true создаёт пустую трубку без крышек.

Пример создания обычного цилиндра с крышками:

const cylinder = new THREE.Mesh(
    new THREE.CylinderGeometry(2, 2, 5, 32, 1, false),
    new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cylinder);

Особенности использования:

  • Для анимации вращения или деформации полезно увеличивать heightSegments.
  • Цилиндры хорошо комбинируются с MeshStandardMaterial и MeshPhongMaterial, особенно при работе с освещением, так как их боковые грани корректно отражают свет.
  • Можно создавать усечённые конусы, изменяя radiusTop или radiusBottom.

ConeGeometry

ConeGeometry является частным случаем цилиндра, где верхнее основание всегда имеет радиус 0. Синтаксис аналогичен:

const geometry = new THREE.ConeGeometry(
    radius,          // радиус основания конуса
    height,          // высота конуса
    radialSegments = 8,  // количество сегментов по окружности
    heightSegments = 1,  // количество сегментов по высоте
    openEnded = false    // открытое основание или нет
);

Ключевые моменты:

  • radius определяет размер основания.
  • height задаёт высоту от основания до вершины.
  • radialSegments и heightSegments аналогичны цилиндру, определяют плавность поверхности и возможность сегментации для анимации.
  • openEnded = true позволяет создать пустой конус без основания, что используется для трубок или декоративных эффектов.

Пример создания конуса:

const cone = new THREE.Mesh(
    new THREE.ConeGeometry(3, 6, 32),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(cone);

Особенности использования:

  • Для моделирования деревьев, колпаков, шляп или декоративных элементов конус является оптимальной геометрией.
  • Можно комбинировать несколько конусов с цилиндрами для сложных моделей, например, архитектурных башен.
  • Увеличение radialSegments делает конус более гладким, но повышает нагрузку на рендеринг.

Визуальные эффекты и оптимизация

  • Сглаживание нормалей: добавление geometry.computeVertexNormals() позволяет улучшить визуальное качество, особенно при использовании MeshStandardMaterial.
  • Лоуполи vs. хайтполи: для интерактивных приложений часто достаточно 8–16 сегментов по радиусу; для анимации и близкого обзора лучше 32–64.
  • Комбинирование геометрий: цилиндры и конусы удобно объединять с Group или Object3D, создавая сложные конструкции без дополнительного импорта моделей.

Практическое использование

  • Создание труб, колонн, баллонов, ракетных форм и архитектурных элементов.
  • Основываясь на цилиндрах и конусах, можно моделировать органические формы при анимации вершин.
  • Использование openEnded помогает экономить полигоны, оставляя объёмные объекты пустыми внутри.

CylinderGeometry и ConeGeometry предоставляют базовые, но мощные инструменты для построения 3D-моделей в Three.js, обеспечивая гибкость, точность и лёгкость интеграции с остальными компонентами сцены. Они остаются ключевыми элементами при работе с примитивами и создании как простых, так и сложных форм.

Оглавление