2. WEB — графика с Three.js. Рисование линий

Линия — это один из примитивов в Three.js, наверное как и в любой графической библиотеке, на основе которой можно построить составные объекты. После предыдущей статьи нам будет легче ориентироваться в методологии рисовании на Three.js. Рисовать линию действительно просто, надо только знать базовые основы математики такие как декартовы координаты и векторы. Давайте возьмем код из первой статьи, а именно файл script.js, остальное будет прежним,  и перепишем так, чтобы Three.js нам вывел обычную линию

window.onload = init;
function init(){
	//--------------Создаем в дереве DOM элемент для вывода на экран-------
	container = document.createElement("div");
	document.body.appendChild(container);
	
	//--------------Общие переменные--------------
	var scene, camera, render;
	
	//--------------Инициализация общих переменных---------
	scene = new THREE.Scene();//Сцена
	camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight, 0.1, 2000);//Перспективная проекция камеры. Принимает 3 параметра(масштаб, пропорция, точка 0 вблизи, точка 0 в дали
    camera.position.x = 150;//Позиция камеры по x
	camera.position.z = 600;//Позиция камеры по y
	render = new THREE.WebGLRenderer();//Рендеринг
	render.setSize(window.innerWidth, window.innerHeight);//Инициализация рендерера
	
	//--------------Создаем объект-------------------
	var lineGeometry = new THREE.Geometry();//Производная фигура
	lineGeometry.vertices.push(new THREE.Vector3(0, 0, 0));//Указываем вектор первой точки
	lineGeometry.vertices.push(new THREE.Vector3(0, 200, 0));//Указываем вектор второй точки
	var lineMaterial = new THREE.LineBasicMaterial({color:0xFFFFFF, linewidth:500});
	var line = new THREE.Line(lineGeometry, lineMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(line);//Добавляем объект на сцену
	render.render(scene, camera);//Добавляем сцену и камеру в рендер
	container.appendChild(render.domElement);//Добавляем рендер в DOM для вывода на экран
}

Как видим все просто. Как видим из примера в Three.js существует понятие вектор и специальный объект для этого и при создании объекта будущей фигуры мы должны, передав вектору значения по координатным осям, передать нашему объекту в виде параметра метода вершин vertices() и он послужит для нас точкой, для определения второй точки поступаем тем же образом, а для того, чтобы указать Three.js, что мы хотим вывести именно линии, а не чисто 2 точки, то существует для этого специальный объект

THREE.Line(lineGeometry, lineMaterial)

который помимо объекта линии принимает еще и значение материала. Материал, в данном случае, принимает значения цвета и ширины линии. Пример работы показан на картинке ниже, а исходный код примера можете скачать здесь.
ThreejsLine-post-2

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...