javascript - Espesor de líneas usando THREE.LineBasicMaterial




webgl three.js (4)

Estoy usando el siguiente código para crear cientos de líneas en mi escena three.js

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

Funciona muy bien, pero cuando cambio el valor de "linewidth" a un valor más grande O más pequeño, no veo ninguna diferencia en la escena.
¿Cómo debo cambiar el grosor de las líneas? ¿Algunas ideas?
Gracias, Dimitris


1) Utilice OpenGL nativo

Puede lograr la representación del grosor de línea con una solución al configurar su navegador para usar OpenGL nativo en lugar de ANGLE. Puedes leer aquí sobre cómo hacer esto en Chrome . Tenga en cuenta que experimentará diferencias de rendimiento si cambia a OpenGL nativo.

EDITAR:

El maestro MrDoob mismo publicó aquí cómo hacer esto tanto para Chrome como para Firefox .

Nota: Esta primera opción ya no es una solución válida, ya que las últimas versiones de OpenGL ya no admiten el grosor de línea. Verifique también @gman su respuesta . Esto significa que si quieres usar el grosor de la línea, la segunda opción es el camino a seguir.

2) Utiliza la clase THREE.MeshLine

También hay otra solución; esta clase THREE.MeshLine en github es una buena solución. Viene con un THREE.MeshLineMaterial especial. De acuerdo con los documentos, es tan simple como:

  • Crear y poblar una geometría
  • Crea un THREE.MeshLine y asigna la geometría
  • Crear un THREE.MeshLineMaterial
  • Utilice THREE.MeshLine y THREE.MeshLineMaterial para crear un THREE.Mesh

¿Estás usando Windows?
Recuerdo que esto no funciona en Windows porque no se implementó en ANGLE .


Esto ya no es un problema solo en ANGLE, es un problema en todas las plataformas. Los navegadores deben cambiar al perfil central de OpenGL 4+ para admitir WebGL2 y el perfil de núcleo OpenGL 4+ no admite anchos de línea superiores a 1. De la especificación de OpenGL 4.0+, sección E.2.1

E.2.1 Características obsoletas pero aún compatibles

Las siguientes características están en desuso, pero aún están presentes en el perfil central. Se pueden eliminar de una versión futura de OpenGL y se eliminan en un contexto compatible con versiones posteriores que implementa el perfil central.

  • Líneas anchas: valores de LineWidth superiores a 1.0 generarán un error INVALID_VALUE.

Para dibujar líneas más gruesas, necesitas generar geometría. Para three.js hay esta biblioteca (señalada por Wilt también)

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


Puede lograr el mismo efecto utilizando extrude-polyline para generar un complejo simplicial para la línea engrosada (poly) y three-simplicial-complex para convertir esto a una malla de tres.js:

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

Aquí hay un ejemplo completo junto con la source . (Actualmente hay un problema en requirebin que impide que represente el ejemplo de origen).

Si desea texturar el mapa de la polilínea, las cosas se complican un poco.





three.js