L'épaisseur des lignes à l'aide de TROIS.LineBasicMaterial

1) Utiliser OpenGL natif

Vous pouvez obtenir le rendu des épaisseurs de ligne avec une solution de contournement en configurant votre navigateur pour utiliser OpenGL natif au lieu de l'ANGLE. Vous pouvez lire ici sur comment faire cela sur Chrome.
Gardez à l'esprit que vous ferez l'expérience de la performance des différences si vous permutez natif OpenGL.

EDIT:

Le maître MrDoob lui-même posté ici comment faire pour Chrome et Firefox.

Remarque: Cette première option n'est plus une solution valable depuis les dernières versions d'OpenGL ne supportent plus l'épaisseur de la ligne, soit. Vérifier aussi @gman sa réponse. Cela signifie que si vous voulez utiliser la ligne de l'épaisseur de la deuxième option est le chemin à parcourir.

---

2) Utiliser THREE.MeshLine classe

Il y a aussi une autre solution; ce TROIS.MeshLine de la classe sur github est une belle solution de contournement. Il est livré avec un spécial THREE.MeshLineMaterial. Selon les docs c'est aussi simple que:

• Créer et remplir une géométrie
• Créer un THREE.MeshLine et affecter la géométrie
• Créer un THREE.MeshLineMaterial
• Utilisation THREE.MeshLine et THREE.MeshLineMaterial pour créer un THREE.Mesh

Ce n'est plus une question juste dans l'ANGLE, c'est une question sur toutes les plateformes. Les navigateurs nécessaires pour passer à l'OpenGL 4+ profil de base à l'appui de WebGL2 et OpenGL 4+ profil de base ne prend pas en charge les largeurs de ligne supérieure à 1. À partir de l'OpenGL 4.0+ spec, section E. 2.1

E. 2.1 Obsolète Mais Toujours Pris En Charge Les Fonctionnalités

Les fonctionnalités suivantes sont déconseillées, mais toujours présents dans le profil de base. Ils peuvent être retirés à partir d'une future version d'OpenGL, et sont retirés vers l'avant compatible contexte de la mise en œuvre du profil de base.

• Lignes de large - largeur de raie des valeurs supérieures à 1,0 va générer un INVALID_VALUE erreur.

Pour dessiner des lignes plus épaisses vous avez besoin de générer la géométrie. Pour three.js il y a cette bibliothèque (souligné par le Flétrissement ainsi)

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

Vous pouvez obtenir le même effet en utilisant extruder-polyligne pour générer un complexe simplicial pour l'épaississement de la (poly)en ligne et trois-simplicial-complexe convertir cette three.js Mesh:

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);

Voici un exemple complet avec le source. (Il y a actuellement un question sur requirebin qui l'empêche de faire le rendu de la source de l'exemple).

Si vous voulez la texture de la polyligne, les choses deviennent un peu plus compliqué.