Épaisseur des lignes à trois.Matériellinebasique

j'utilise le code ci-dessous pour créer des centaines de lignes dans mes trois.js scène

edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
    color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);

cela fonctionne très bien, mais quand je change la valeur de "linewidth" en une valeur plus ou moins grande, Je ne vois aucune différence dans la scène.

Comment dois-je changer l'épaisseur des lignes? Des idées?

Merci, Dimitris!--2-->

24
demandé sur mrdoob 2012-07-25 00:35:15
la source

6 ответов

utilisez-vous Windows?

Je me souviens que cela ne fonctionnait pas sur Windows parce qu'il n'était pas implémenté dans ANGLE.

17
répondu mrdoob 2012-07-25 04:05:21
la source

1) utiliser L'OpenGL indigène

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

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 car les dernières versions D'OpenGL ne supportent plus non plus l'épaisseur de la ligne. Vérifier @gman sa réponse. Cela signifie que si vous voulez utiliser l'épaisseur de la ligne la deuxième option est le chemin à suivre.


2) Utiliser THREE.MeshLine classe

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

  • créer et peupler une géométrie
  • Créer un THREE.MeshLine et affecter la géométrie
  • Créer un THREE.MeshLineMaterial
  • Utiliser THREE.MeshLine et THREE.MeshLineMaterial pour créer un THREE.Mesh
17
répondu Wilt 2017-05-23 15:02:29
la source

cela se produit dans Windows Chrome et Firefox, les deux utilisant ANGLE (WebGL à DirectX wrapper).

le problème n'est toujours pas résolu par le projet ANGLE. Vous pouvez commencer la question ici pour obtenir une plus grande priorité et obtenir une notification si elle doit être mise en œuvre:

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

11
répondu user2090712 2013-05-23 17:38:14
la source

ce n'est plus un problème D'ANGLE, c'est un problème sur toutes les plateformes. Les navigateurs nécessaires pour passer au profil de base OpenGL 4+ pour prendre en charge WebGL2 et le profil de base OpenGL 4+ ne prend pas en charge les largeurs de ligne supérieures à 1. Extrait de la spécification OpenGL 4.0+, section E. 2.1

E. 2.1 Fonctions Obsolètes Mais Toujours Supportées

les caractéristiques suivantes sont dépréciées, mais toujours présentes dans le profil de base. Ils peuvent être retirés d'une version future de OpenGL, et sont supprimés dans un contexte compatible forward implémentant le profil de base.

  • Wide lines - les valeurs de LineWidth supérieures à 1.0 généreront une erreur INVALID_VALUE.

pour dessiner des lignes plus épaisses, vous devez générer de la géométrie. Pour les trois.js il y a cette bibliothèque (souligné par le Flétrissement)

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

3
répondu gman 2017-01-28 18:35:58
la source

vous pouvez utiliser CanvasRenderer au lieu de Webglrenderer. Consultez la documentation officielle!--1-->ici où chaque forme a une bordure de linewidth = 10;

1
répondu raulsi 2015-12-17 09:18:37
la source

Vous pouvez obtenir le même effet en utilisant extrude-polyline pour générer un simple complex pour la ligne épaissie (poly) et three-simplicial-complex convertir cette trois.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 et source. (Il y a actuellement un problème sur requirebin qui l'empêche de rendre l'exemple source).

si vous voulez cartographier la texture du polyligne, les choses deviennent un peu plus compliqué.

1
répondu danvk 2017-11-09 18:24:13
la source

Autres questions sur