Линия — это один из примитивов в 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)
который помимо объекта линии принимает еще и значение материала. Материал, в данном случае, принимает значения цвета и ширины линии. Пример работы показан на картинке ниже, а исходный код примера можете скачать здесь.