Three.js: Рисование линий

Допустим, вы хотите нарисовать линию или круг, а не каркасную сетку (wireframe Mesh). Сначала нам нужно настроить рендерер, сцену и камеру (см. страницу «Создание сцены»).

Вот код, который мы будем использовать:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();

Определение материала

Следующим шагом мы определим материал. Для линий мы должны использовать LineBasicMaterial или LineDashedMaterial.

// Создаем синий LineBasicMaterial
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

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

После материала нам понадобится геометрия с некоторыми вершинами:

const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));

const geometry = new THREE.BufferGeometry().setFromPoints(points);

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

Создание линии

Теперь, когда у нас есть точки для двух линий и материал, мы можем объединить их, чтобы сформировать линию.

const line = new THREE.Line(geometry, material);

Добавление линии на сцену и рендеринг

Осталось только добавить линию на сцену и вызвать рендеринг.

scene.add(line);
renderer.render(scene, camera);

Теперь вы должны увидеть стрелку, направленную вверх, состоящую из двух синих линий.