Толщина линий с использованием THREE.LineBasicMaterial

Ответ 1

Используете ли вы Windows?
Я помню, что это не работает на Windows, потому что оно не было реализовано в ANGLE.

Ответ 2

1) Использовать собственный OpenGL

Вы можете добиться рендеринга толщины линий с помощью обходного пути, настроив браузер использовать собственный OpenGL вместо ANGLE. Вы можете прочитать здесь, как это сделать в Chrome. Имейте в виду, что вы столкнетесь с различиями в производительности, если вы перейдете на собственный OpenGL.

РЕДАКТИРОВАТЬ:

Мастер MrDoob сам написал здесь, как это сделать как для Chrome, так и для Firefox.

Примечание. Этот первый вариант больше не является допустимым решением, так как последние версии OpenGL больше не поддерживают толщину линии. Проверьте также @gman его ответ. Это означает, что если вы хотите использовать толщину линии, второй вариант - это путь.

2) Используйте класс THREE.MeshLine

Существует и другое решение; этот класс THREE.MeshLine на github является хорошим обходным THREE.MeshLine. Он поставляется со специальным материалом THREE.MeshLineMaterial. Согласно документам это так просто:

• Создание и заполнение геометрии
• Создайте THREE.MeshLine и назначьте геометрию
• Создайте материал THREE.MeshLineMaterial
• Используйте THREE.MeshLine и THREE.MeshLineMaterial для создания THREE.Mesh

Ответ 3

Это происходит в Windows Chrome и Firefox, используя ANGLE (WebGL для оболочки DirectX).

Проблема все еще не решена проектом ANGLE. Вы можете запустить эту проблему, чтобы получить более высокий приоритет и получить уведомление, если оно будет реализовано:

https://code.google.com/p/angleproject/issues/detail?id=119

Ответ 4

Это уже не проблема, только в ANGLE это проблема на всех платформах. Браузеры должны были перейти на основной профиль OpenGL 4+ для поддержки WebGL2, а основной профиль OpenGL 4+ не поддерживает ширину линии больше 1. Из спецификации OpenGL 4.0+, раздел E.2.1

E.2.1 Устаревшие, но все еще поддерживаемые функции

Следующие функции устарели, но все еще присутствуют в основном профиле. Они могут быть удалены из будущей версии OpenGL и удалены в прямом контексте, реализующем основной профиль.

• Широкие линии - значения LineWidth, превышающие 1.0, будут генерировать ошибку INVALID_VALUE.

Чтобы нарисовать более толстые линии, вам нужно создать геометрию. Для three.js есть эта библиотека (также указана Уилтом)

https://github.com/spite/THREE.MeshLine

Ответ 5

Вы можете использовать CanvasRenderer вместо Webglrenderer. Ознакомьтесь с официальной документацией здесь, где каждая форма имеет границу ширины линии = 10;

Ответ 6

Вы можете добиться такого же эффекта, используя extrude-polyline для создания симплициальный комплекс для утолщенной (поли) линии и three-simplicial-complex, чтобы преобразовать это в трёхмерную сетку:

const THREE = require('three');
const extrudePolyline = require('extrude-polyline');
const Complex = require('three-simplicial-complex')(THREE);

function thickPolyline(points, lineWidth) {
  const simplicialComplex = extrudePolyline({
    // Adjust to taste!
    thickness: lineWidth,
    cap: 'square',  // or 'butt'
    join: 'bevel',  // or 'miter',
    miterLimit: 10,
  }).build(points);

  // Add a z-coordinate.
  for (const position of simplicialComplex.positions) {
    position[2] = 0;
  }

  return Complex(simplicialComplex);
}

const vertices = [[0, 0], [10, 0], [10, 10], [20, 10], [30, 00]];
const geometry = thickPolyline(vertices, 10);

const material = new THREE.MeshBasicMaterial({
  color: 0x009900,
  side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Здесь полный пример вместе с source. (В настоящее время существует проблема на requirebin, которая мешает ему отображать исходный пример).

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

Ответ 7

Я использую TubeGeometry для создания толстой линии между двумя точками:

Смотрите Зеленые линии в Helix

// line material
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });


let startVector = new THREE.Vector3(
    RADI * Math.cos(t),
    RADI * Math.sin(t),
    3 * t
  );
  let endVector = new THREE.Vector3(
    RADI * Math.cos(t + 10),
    RADI * Math.sin(t + 10),
    3 * t
  );

  let linePoints = [];
  linePoints.push(startVector, endVector);

  // Create Tube Geometry
  var tubeGeometry = new THREE.TubeGeometry(
    new THREE.CatmullRomCurve3(linePoints),
    512,// path segments
    0.5,// THICKNESS
    8, //Roundness of Tube
    false //closed
  );

  //add buffer geometry
  let tubeBufferGeomtry = new THREE.BufferGeometry().fromGeometry(
    tubeGeometry
  );

  let line = new THREE.Line(tubeGeometry, lineMaterial);
  scene.add(line);