Электронный научно-практический журнал «Современные научные исследования и инновации» » Давлетзянов Демид Владимирович https://web.snauka.ru Fri, 17 Apr 2026 07:29:22 +0000 ru hourly 1 http://wordpress.org/?v=3.2.1 Применение библиотеки Three.js для визуализации простых трёхмерных геометрических объектов в веб-среде https://web.snauka.ru/issues/2025/12/104046 https://web.snauka.ru/issues/2025/12/104046#comments Fri, 05 Dec 2025 14:41:01 +0000 Давлетзянов Демид Владимирович https://web.snauka.ru/issues/2025/12/104046 Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

Введение. Развитие веб-технологий привело к возможности использования трёхмерной графики непосредственно в интернет-браузерах. Стандарт WebGL обеспечивает доступ к аппаратному ускорению графики, однако его использование требует глубоких знаний в области компьютерной графики. В связи с этим широкое распространение получили высокоуровневые библиотеки, упрощающие процесс создания 3D-сцен.
Одной из наиболее популярных библиотек является Three.js, предоставляющая удобные средства для создания и визуализации трёхмерных объектов. Целью данной работы является демонстрация применения библиотеки Three.js для визуализации простого геометрического объекта и анализа основных этапов построения трёхмерной сцены.
Для реализации трёхмерной визуализации были использованы следующие технологии:

  1. Язык гипертекстовой разметки HTML5;
  2. Язык программирования JavaScript;
  3. Библиотека Three.js версии r128;
  4. Графический API WebGL;
  5. Модуль OrbitControls для управления камерой.

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

Приложение построено по классической архитектуре Three.js и включает следующие основные элементы:

  1. Сцену (THREE.Scene), содержащую все объекты визуализации;
  2. Перспективную камеру (THREE.PerspectiveCamera);
  3. Рендерер (THREE.WebGLRenderer), осуществляющий вывод изображения;
  4. Источники освещения;
  5. Трёхмерную модель объекта;
  6. Средства пользовательского управления камерой.

Подобная структура обеспечивает модульность и возможность дальнейшего расширения функциональности.

Построение трёхмерной модели. Модель креста формируется из двух параллелепипедов, созданных с использованием класса BoxGeometry. Вертикальный элемент имеет размеры 6×60×3, горизонтальный — 40×6×3 и смещён относительно центра по оси Y.
Для объединения элементов используется объект THREE.Group, позволяющий рассматривать модель как единое целое. В качестве материала применяется MeshPhongMaterial, обеспечивающий корректное освещение и визуальное восприятие формы объекта.

Освещение сцены реализовано с помощью двух источников света: рассеянного (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);

        createSimpleCross();

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        controls.enableDamping = true;

        controls.dampingFactor = 0.05;

        window.addEventListener(‘resize’, onWindowResize, false);

    }

    function createSimpleCross() {

        var group = new THREE.Group();

        var verticalGeometry = new THREE.BoxGeometry(6, 60, 3);

        var verticalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });

        var vertical = new THREE.Mesh(verticalGeometry, verticalMaterial);

        group.add(vertical);

        var horizontalGeometry = new THREE.BoxGeometry(40, 6, 3);

        var horizontalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });

        var horizontal = new THREE.Mesh(horizontalGeometry, horizontalMaterial);

        horizontal.position.y = 8;

        group.add(horizontal);

        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 является эффективным инструментом для визуализации простых и сложных трёхмерных объектов в веб-приложениях, включая образовательные и демонстрационные системы.

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

]]> https://web.snauka.ru/issues/2025/12/104046/feed 0 Моделирование вазы с использованием кривых Безье в среде Three.js https://web.snauka.ru/issues/2025/12/104047 https://web.snauka.ru/issues/2025/12/104047#comments Tue, 30 Dec 2025 12:07:35 +0000 Давлетзянов Демид Владимирович https://web.snauka.ru/issues/2025/12/104047 Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

Современные веб-технологии позволяют реализовывать сложные трёхмерные сцены непосредственно в браузере без использования специализированного программного обеспечения. Одной из наиболее популярных библиотек для работы с 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. Показано, что данный подход является наглядным, универсальным и удобным для веб-разработки. Разработанное решение может быть расширено за счёт добавления текстур, анимации и более сложных кривых профиля.

]]> https://web.snauka.ru/issues/2025/12/104047/feed 0