Встроенные примитивы: PlaneGeometry и CircleGeometry

В Three.js примитивы являются фундаментальными строительными блоками для создания 3D-сцен. Среди них особое место занимают PlaneGeometry и CircleGeometry, используемые для построения плоских поверхностей и окружностей. Эти геометрии применяются как в качестве самостоятельных объектов, так и в составе более сложных моделей, например для создания пола, стен, круглых платформ или интерфейсных элементов.

PlaneGeometry

PlaneGeometry представляет собой плоскую прямоугольную поверхность, определяемую шириной и высотой. Основные параметры конструктора:

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
  • width — ширина плоскости по оси X.
  • height — высота плоскости по оси Y.
  • widthSegments — число сегментов по ширине (по умолчанию 1).
  • heightSegments — число сегментов по высоте (по умолчанию 1).

Сегменты делят плоскость на сетку, что важно для применения деформаций, текстурирования и анимаций вершин. Чем больше сегментов, тем плавнее будут эффекты и сглаживание при искажениях.

Пример создания плоскости

const geometry = new THREE.PlaneGeometry(5, 5, 10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

Особенности:

  • По умолчанию плоскость создается в XY-плоскости с центром в начале координат. Для размещения в горизонтальной плоскости XZ необходимо использовать поворот: plane.rotation.x = -Math.PI / 2.
  • THREE.DoubleSide позволяет отображать обе стороны плоскости, что особенно важно при работе с прозрачными или текстурированными поверхностями.
  • Плоскость легко комбинируется с текстурами, картами нормалей и шейдерами.

CircleGeometry

CircleGeometry используется для создания окружностей и дисков. Конструктор:

new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
  • radius — радиус круга.
  • segments — число сегментов, определяющее гладкость окружности (чем больше сегментов, тем круглее фигура).
  • thetaStart — угол начала сектора (по умолчанию 0).
  • thetaLength — угол сектора в радианах (по умолчанию 2π, полный круг).

С помощью thetaStart и thetaLength можно создавать сектора круга или вычурные сегменты без необходимости модифицировать вершины вручную.

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

const geometry = new THREE.CircleGeometry(3, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
const circle = new THREE.Mesh(geometry, material);
scene.add(circle);

Особенности:

  • Центр круга всегда в начале координат.
  • По умолчанию создается в XY-плоскости. Для горизонтальной ориентации необходимо повернуть объект по X: circle.rotation.x = -Math.PI / 2.
  • Круг можно использовать для создания платформ, дисков, колец или в качестве масок для текстур.
  • С большим количеством сегментов создаются гладкие кривые, подходящие для визуализаций, где виден контур.

Советы по использованию примитивов

  1. Оптимизация сегментов: излишне большое количество сегментов замедляет рендеринг. Для статичных объектов достаточно минимального числа.
  2. Материалы: сочетание MeshBasicMaterial для простых визуальных элементов и MeshStandardMaterial для динамического освещения позволяет гибко управлять сценой.
  3. Трансформации: обе геометрии удобно масштабировать (scale.set) и вращать (rotation.set) без изменения самих вершин.
  4. Текстуры и UV-карты: Plane и Circle имеют корректно вычисленные UV-координаты, что упрощает наложение текстур и шейдерных эффектов.
  5. Комбинирование с другими геометриями: PlaneGeometry часто используется как основание для сложных моделей, CircleGeometry — для создания колец, тарелок, колпаков и индикаторов.

Практические сценарии применения

  • PlaneGeometry: полы, стены, экраны, спрайтовые поверхности для видео или анимации, уровни в 2.5D играх.
  • CircleGeometry: круглые платформы, индикаторы здоровья или прогресса, декоративные элементы, тарелки, колеса.

Эти геометрии являются базовыми инструментами для построения сцен любой сложности, обеспечивая простоту в управлении вершинами, сегментацией и текстурами, а также гибкость в трансформациях и анимациях. Их грамотное использование позволяет создавать реалистичные поверхности и визуально привлекательные объекты без необходимости строить сложные меши вручную.

Оглавление