РИСОВАНИЕ ЛИНИЙ


Допустим, вы хотите нарисовать простую линию или окружность, а не каркасный Меш. Во-первых для этого вам понадобится создать рендерер, сцену и камеру, как это было показано ранее, в разделе «Создание сцены»

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

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

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

var scene = new THREE.Scene();
Далее мы определим материал объектов, которых будем рисовать. Для линий необходимо использовать LineBasicMaterial или LineDashedMaterial.
// создаем линию синего цвета
var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
После определения материала нужно будет создать геометрию (Geometry) или буферную геометрию (BufferGeometry) объекта, задав при этом его вершины (рекомендуется использовать BufferGeometry, поскольку она более эффективна, однако для примера мы рассмотрим тут только обычную геометрию):
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
Обратите внимание, что линии будут проведены между каждой парой вершин последовательно, кроме первой и последней веришины.

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

var line = new THREE.Line( geometry, material ); // собираем материал и геометрию
scene.add( line ); 				 // добавляем новый объект на сцену
renderer.render( scene, camera );		 // рендерим изображение
в результате вы должны увидеть направленную вверх синюю стрелку, состоящую из двух диний. renderers/WebGLRenderer.render
Яндекс.Метрика