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

В Three.js TorusGeometry представляет собой геометрию тороидальной формы, часто называемой бубликом. Тор можно рассматривать как круг, вращённый вокруг центральной оси, образуя замкнутую поверхность.

Конструктор:

const geometry = new THREE.TorusGeometry(
  radius,       // радиус центрального кольца
  tube,         // радиус трубки
  radialSegments = 8, // количество сегментов по радиусу трубы
  tubularSegments = 6 // количество сегментов вдоль кольца
);
  • radius — определяет размер основного кольца.
  • tube — радиус «трубки», формирующей тор.
  • radialSegments — отвечает за детализацию поперечного сечения трубы; увеличение числа сегментов делает тор более гладким.
  • tubularSegments — количество сегментов вдоль кольца, влияет на плавность изгиба тора.

Тор можно визуализировать с помощью стандартного материала:

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.5, roughness: 0.5 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

Особенности работы:

  • TorusGeometry отлично подходит для создания декоративных колец, обручей, колёсных элементов.
  • Высокие значения radialSegments и tubularSegments обеспечивают гладкость, но увеличивают нагрузку на GPU.
  • Для анимации часто используют вращение объекта вокруг центральной оси.

TorusKnotGeometry: сложная тороидальная кривая

TorusKnotGeometry создаёт более сложную форму — тороидальный узел. Геометрия задаётся параметрами, определяющими количество витков и спиралей.

Конструктор:

const geometry = new THREE.TorusKnotGeometry(
  radius,           // радиус основного тора
  tube,             // радиус трубки
  tubularSegments,  // количество сегментов вдоль трубы
  radialSegments,   // количество сегментов по радиусу
  p = 2,            // число витков по основной оси
  q = 3             // число витков по трубке
);

  • p и q определяют тип узла:

    • p — количество витков вдоль центрального кольца,
    • q — количество витков вокруг трубы. Например, (p=2, q=3) создаёт двухвитковый тороидальный узел с трёхкратным закручиванием трубки.

  • tubularSegments и radialSegments работают аналогично TorusGeometry, влияя на плавность и детализацию.

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.7, roughness: 0.3 });
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

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

  • Используется для визуализации сложных узлов и декоративных структур.
  • Увеличение p и q создаёт более запутанные формы, что может значительно увеличить количество полигонов.
  • При анимации часто применяют как вращение, так и трансформацию по оси для динамического эффекта.

Настройка материалов и визуальных эффектов

Для тороидов особенно важен выбор материала, так как их криволинейная поверхность активно отражает свет:

  • MeshStandardMaterial и MeshPhysicalMaterial подходят для реалистичного освещения.
  • wireframe: true позволяет визуализировать каркас геометрии, удобно для отладки сегментации.
  • Добавление envMap создаёт отражения на металлических поверхностях.

Пример с текстурой:

const texture = new THREE.TextureLoader().load('textures/metal.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture, metalness: 1, roughness: 0.4 });
const torus = new THREE.Mesh(new THREE.TorusGeometry(10, 3, 16, 100), material);
scene.add(torus);

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

  • Использование большого числа сегментов обеспечивает гладкость, но увеличивает нагрузку. Для анимации в реальном времени рекомендуется подбирать radialSegments и tubularSegments в диапазоне 8–64.
  • При необходимости высокого качества для статичных объектов можно использовать значения до 128–256.
  • Для сложных сцен рекомендуется применять InstancedMesh, если создаются многочисленные копии тора или узлов.

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

Простейшая анимация вращения:

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

Для TorusKnotGeometry возможны более сложные эффекты:

  • изменение радиуса трубки во времени,
  • масштабирование отдельных витков с помощью vertex displacement через шейдеры,
  • комбинация с Points или LineSegments для создания динамических узловых сетей.

Взаимодействие с освещением и сценой

  • Тор и тороидальные узлы особенно эффектно смотрятся при использовании DirectionalLight или PointLight с мягкими тенями.
  • Добавление AmbientLight помогает сохранить видимость всех поверхностей при сложной геометрии.
  • Для эффекта свечения или отражений применяются ReflectionProbe и PMREMGenerator.

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

Оглавление