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

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

const geometry = new THREE.SphereGeometry(
    radius = 1,        // радиус сферы
    widthSegments = 32, // сегменты по горизонтали
    heightSegments = 16 // сегменты по вертикали
);
  • radius — число, определяющее радиус сферы.
  • widthSegments — количество сегментов вдоль широты. Чем больше значение, тем более гладкой будет поверхность.
  • heightSegments — количество сегментов вдоль долготы. Увеличение этого параметра повышает детализацию, но увеличивает нагрузку на рендеринг.

Основные свойства SphereGeometry

SphereGeometry наследует свойства BufferGeometry, что позволяет управлять вершинами, индексами и атрибутами:

  • attributes.position — массив координат вершин. Каждая вершина представлена тройкой чисел [x, y, z].
  • attributes.normal — нормали к поверхности для корректного освещения.
  • attributes.uv — координаты текстуры, используемые для наложения материалов.

Изменяя эти атрибуты напрямую, можно создавать кастомные эффекты деформации сфер. Например, реализация волн на поверхности планеты или эффект «пульсации» шара.

Применение материалов

Сфера без материала будет невидимой, поэтому важно назначать Material. Наиболее распространенные:

  • MeshBasicMaterial — материал без учета освещения, подходит для плоских визуализаций.
  • MeshStandardMaterial — физически корректный материал, взаимодействующий с источниками света.
  • MeshPhongMaterial — устаревший, но удобный для быстрого рендеринга с отражениями.

Пример с физически корректным материалом и текстурой:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/earth.jpg');

const material = new THREE.MeshStandardMaterial({
    map: texture,
    metalness: 0,
    roughness: 1
});

const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

Деформация сферы

SphereGeometry позволяет манипулировать вершинами для создания нестандартных форм. Основные методы:

  • Использование geometry.attributes.position.array для прямого редактирования координат.
  • Применение BufferGeometry.computeVertexNormals() после деформации для корректного освещения.

Пример эффекта «вспучивания»:

const positions = geometry.attributes.position.array;
for (let i = 0; i < positions.length; i += 3) {
    const x = positions[i];
    const y = positions[i + 1];
    const z = positions[i + 2];
    const offset = Math.sin(x * 5) * 0.1;
    positions[i] += offset;
    positions[i + 1] += offset;
    positions[i + 2] += offset;
}
geometry.attributes.position.needsUpdate = true;
geometry.computeVertexNormals();

Текстурирование и UV-координаты

Сфера имеет стандартную сферическую UV-развертку. Координата u соответствует долготе, v — широте. Это позволяет равномерно накладывать текстуры:

  • Полярные зоны могут иметь растяжение при низком количестве сегментов.
  • Для планет с высоким разрешением рекомендуется widthSegments ≥ 64, heightSegments ≥ 32.

Можно использовать карты нормалей и карты высот для дополнительного объема:

const normalMap = textureLoader.load('textures/earth_normal.jpg');
material.normalMap = normalMap;
material.normalScale.set(1, 1);

Анимация и взаимодействие

Сферы часто анимируют для вращения или пульсации. В Three.js это реализуется через изменение rotation объекта или деформацию вершин:

function animate() {
    requestAnimationFrame(animate);
    sphere.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

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

Варианты оптимизации

  • Снижение количества сегментов для дальних объектов (LOD) уменьшает нагрузку на GPU.
  • Использование InstancedMesh при множественных одинаковых сферах позволяет рендерить тысячи объектов с минимальной затратой ресурсов.
  • При динамических текстурах или анимациях вершин рекомендуется ограничить частоту вызова computeVertexNormals().

SphereGeometry и физика

Сфера идеально подходит для симуляций:

  • Физические движки, такие как Cannon.js или Ammo.js, используют радиус сферы для вычисления столкновений.
  • Простая геометрия позволяет реализовать реалистичное поведение без сложных вычислений.

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

Оглавление