Рисование Линий

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

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


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

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

var scene = new v3d.Scene();

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


//create a blue LineBasicMaterial
var material = new v3d.LineBasicMaterial({ color: 0x0000ff });

После материала нам понадобится Geometry или BufferGeometry с некоторыми вершинами (рекомендуется использовать BufferGeometry, так как он более производителен, однако для простоты мы будем использовать Geometry):


var geometry = new v3d.Geometry();
geometry.vertices.push(new v3d.Vector3(-10, 0, 0));
geometry.vertices.push(new v3d.Vector3(0, 10, 0));
geometry.vertices.push(new v3d.Vector3(10, 0, 0));

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

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


var line = new v3d.Line(geometry, material);

Остается только добавить ее в сцену и вызвать render.


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

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