3D моделирование в Three.js: геометрия и координаты

Урок посвящен работе с геометрическими примитивами и созданию объектов в Three.js.

Работа с координатами объектов

Переместим куб, находящийся по умолчанию в центре сцены. Для этого, перед добавлением на сцену, используем cube.position.set(). Функция принимает три аргумента: координаты X, Y и Z. Например, cube.position.set(1, 0, 0) смещает куб на одну единицу вдоль оси X. cube.position.set(-3, 0, 0) смещает его на -3 единицы вдоль оси X.

Создание сферы

Создадим сферу с помощью классов Three.js.

Геометрия:

const sphereGeometry = new THREE.SphereGeometry(0.5, 3, 3);

0.5 — радиус, 3 и 3 — количество сегментов по ширине и высоте. Малое количество сегментов делает сферу многогранником.

Материал:

const sphereMaterial = new THREE.MeshPhongMaterial({
  color: 0x0000ff, // синий цвет
  emissive: 0xffffff, // белый цвет свечения
  shininess: 100 // блеск
});

Создание и добавление на сцену:

const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(2, 0, 0);
scene.add(sphere);

Для более гладкой сферы увеличьте количество сегментов:

const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);

Создание тора

Создадим тор (пончик):

const torus = new THREE.Mesh(new THREE.TorusGeometry(1, 0.3, 16, 100), new THREE.MeshBasicMaterial({ color: 0x0000ff }));
torus.position.set(2, 0, 2);
scene.add(torus);

Параметры:

1 — радиус тора от центра до края.
0.3 — радиус трубы.
16 и 100 — количество сегментов по высоте и ширине.

Добавление текстур

Добавим текстуру к объектам. Загрузим изображение (gr_pack.jpg) и создадим текстуру:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('img/gr_pack.jpg');
const textureMaterial = new THREE.MeshBasicMaterial({ map: texture });

Применим текстуру к плоскости:

const plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), textureMaterial);
plane.position.set(-2, 2, 0);
scene.add(plane);

textureMaterial можно применить и к другим объектам, Three.js автоматически масштабирует текстуру.

Урок рассмотрел создание и позиционирование основных геометрических примитивов в Three.js, а также добавление текстур. Для большинства объектов принцип аналогичен: указываем геометрию, материал, позицию, вращение и добавляем на сцену.