Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
Современные веб-технологии позволяют реализовывать сложные трёхмерные сцены непосредственно в браузере без использования специализированного программного обеспечения. Одной из наиболее популярных библиотек для работы с WebGL является three.js, предоставляющая удобный интерфейс для создания и визуализации трёхмерных объектов.
Одним из распространённых способов моделирования тел вращения является использование кривых Безье для задания двумерного профиля с последующим вращением вокруг оси. Данный метод широко применяется в компьютерной графике при создании сосудов, ваз и других симметричных объектов.
Целью данной работы является разработка и описание алгоритма построения трёхмерной модели кувшина на основе кубической кривой Безье в среде three.js.
Теоретические основы. Кривые Безье представляют собой параметрические кривые, широко применяемые в компьютерной графике и системах автоматизированного проектирования. Кубическая кривая Безье определяется четырьмя контрольными точками и описывается параметрическим уравнением:
где P0, P1, P2, P3, - контрольные точки кривой.
Метод вращения профиля. Для получения трёхмерного объекта профиль, заданный набором точек в двумерном пространстве, вращается вокруг оси симметрии. В three.js данный метод реализован с помощью класса LatheGeometry, который автоматически формирует сетку вершин на основе массива точек и количества сегментов вращения.
Описание реализации. Программная реализация выполнена на языке JavaScript с использованием библиотеки three.js. На первом этапе создаётся сцена, камера и рендерер. Камера типа PerspectiveCamera обеспечивает перспективное отображение объекта. Для формирования профиля кувшина используется кубическая кривая Безье (THREE.CubicBezierCurve), контрольные точки которой масштабируются для получения требуемых размеров объекта. На основе вычисленных точек кривой создаётся геометрия вращения (THREE.LatheGeometry).
Для повышения реалистичности визуализации применяются два источника света: рассеянный (AmbientLight) и направленный (DirectionalLight). Также используются два материала — для внешней и внутренней поверхностей объекта, что позволяет корректно отображать модель при вращении камеры.
Интерактивное управление сценой реализовано с помощью модуля OrbitControls, обеспечивающего вращение, масштабирование и плавное перемещение камеры.
Ниже приведен HTML код программы:
<!DOCTYPE html>
<html lang=”ru”>
<head>
<title>three.js — Кувшин, созданный с помощью кривой Безье</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<div id=”info”>Кувшин, созданный с помощью кривой Безье</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js”></script>
<script>
var camera, scene, renderer;
var controls;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 100);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
createVase();
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
window.addEventListener(‘resize’, onWindowResize, false);
}
function createVase() {
var group = new THREE.Group();
const scale = 10;
const curve = new THREE.CubicBezierCurve(
new THREE.Vector2(3, 0).multiplyScalar(scale),
new THREE.Vector2(12, 6).multiplyScalar(scale),
new THREE.Vector2(-3, 12).multiplyScalar(scale),
new THREE.Vector2(7, 15).multiplyScalar(scale)
);
const points = curve.getPoints(36);
var geometry = new THREE.LatheGeometry(points, 64);
var material1 = new THREE.MeshPhongMaterial({color: 0xfff000});
var material2 = new THREE.MeshPhongMaterial({color: 0xfff080, side: THREE.BackSide});
var object1 = new THREE.Mesh(geometry, material1);
var object2 = new THREE.Mesh(geometry, material2);
group.add(object1);
group.add(object2);
scene.add(group);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
В результате выполнения программы формируется интерактивная трёхмерная модель кувшина, корректно отображаемая в браузере. Пользователь имеет возможность вращать объект, изменять масштаб и рассматривать его под различными углами. Применение кривых Безье позволяет гибко управлять формой модели, изменяя лишь положение контрольных точек.
Рисунок 1. Интерактивная трёхмерная модель вазы
Заключение
В работе был рассмотрен метод построения трёхмерного объекта вращения на основе кубической кривой Безье с использованием библиотеки three.js. Показано, что данный подход является наглядным, универсальным и удобным для веб-разработки. Разработанное решение может быть расширено за счёт добавления текстур, анимации и более сложных кривых профиля.
Библиографический список
- Фоли Дж., ван Дам А., Фейнер С., Хьюз Дж. Компьютерная графика: принципы и практика : пер. с англ. — 3-е изд. — М. : Вильямс, 2015. — 1168 с.
- Фарин Дж. Кривые и поверхности для автоматизированного геометрического проектирования : пер. с англ. — М. : Мир, 2001. — 456 с.
- Cabello R. Three.js : библиотека для создания 3D-графики в WebGL [Электронный ресурс]. — Режим доступа: https://threejs.org (дата обращения: 28.12.2025).
- Khronos Group. WebGL Specification [Электронный ресурс]. — Режим доступа: https://www.khronos.org/webgl (дата обращения: 28.12.2025).
- Angel E., Shreiner D. Interactive Computer Graphics: A Top-Down Approach with WebGL. — 7th ed. — Boston : Pearson Education, 2015. — 768 p.