Руководство по Three.js Primitives: фундаментальные геометрические примитивы

Three.js является мощным JavaScript-фреймворком для создания интерактивных 3D-графиков в веб-браузере. В этой статье мы рассмотрим фундаментальные геометрические примитивы, такие как SphereGeometry (сфера), CylinderGeometry (цилиндр), ConeGeometry (конус) и PlaneGeometry (Плоскость), и покажем, как их использовать в three.js. Мы также рассмотрим функции и параметры, которые помогут вам создать желаемые 3D-формы и визуализации. Эта статья будет полезна для разработчиков, которые ищут способы улучшения своих навыков в разработке 3D-визуализаций веб-приложений.

Чтобы использовать Three.js Primitives, вы должны сначала подключить three.js в ваш проект. Затем вы можете создать объект Primitive, используя один из доступных конструкторов, таких как SphereGeometry, CylinderGeometry или ConeGeometry.

Например:

const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
const sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
scene.add( sphere );

После создания геометрии ее можно использовать для создания объектов в сцене с помощью Mesh или Line классов. Вы можете установить материал для объекта и настроить его внешний вид с помощью свойств материала, таких как цвет, интенсивность освещения и т.д.

Пример использования:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const sphereGeometry = new THREE.SphereGeometry(2, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

scene.add(sphere);

camera.position.z = 5;

const animate = function () {
    requestAnimationFrame(animate);

    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;

    renderer.render(scene, camera);
};

animate();

Основные параметры, которые вы можете использовать при создании Primitives, включают радиус, высоту, ширину и пр. Вы можете также настроить внешний вид объекта, используя различные материалы и текстуры.

Ниже приведены некоторые из доступных функций и параметров, которые вы можете использовать с Three.js Primitives:

SphereGeometry

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) – создает сферу. Параметры:

• radius – радиус сферы.
• widthSegments – количество сегментов по горизонтали.
• heightSegments – количество сегментов по вертикали.
• phiStart – начальный угол по горизонтали.
• phiLength – длина угла по горизонтали.
• thetaStart – начальный угол по вертикали.
• thetaLength – длина угла по вертикали.

const sphereGeometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );

CylinderGeometry

CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded) – создает цилиндр. Параметры:

• radiusTop – радиус верхней части цилиндра.
• radiusBottom – радиус нижней части цилиндра.
• height – высота цилиндра.
• radialSegments – количество сегментов по периметру.
• heightSegments – количество сегментов по высоте.
• openEnded – указывает, должны ли быть открытыми верхняя и нижняя части цилиндра.

const cylinderGeometry = new THREE.CylinderGeometry( 
    radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded 
);

ConeGeometry

ConeGeometry(radius, height, radialSegments, heightSegments, openEnded) – создает конус. Параметры:

• radius – радиус основания конуса.
• height – высота конуса.
• radialSegments – количество сегментов по периметру.
• heightSegments – количество сегментов по высоте.
• openEnded – указывает, должен ли быть открытым верхний конец конуса.

const coneGeometry = new THREE.ConeGeometry( 
    radius, height, radialSegments, heightSegments, openEnded 
);

BoxGeometry

• BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) – создает параллелепипед. Параметры:
  • width – ширина параллелепипеда.
  • height – высота параллелепипеда.
  • depth – глубина параллелепипеда.
  • widthSegments – количество сегментов по ширине.
  • heightSegments – количество сегментов по высоте.
  • depthSegments – количество сегментов по глубине.

const planeGeometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );

PlaneGeometry

• PlaneGeometry(width, height, widthSegments, heightSegments) – создает плоскость. Параметры:
  • width – ширина плоскости.
  • height – высота плоскости.
  • widthSegments – количество сегментов по ширине.
  • heightSegments – количество сегментов по высоте.

const planeGeometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );

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