Threejs:为什么线框厚度不适合我? [英] Threejs: why is wireframe thickness not adjusting for me?

问题描述

我无法创建粗线框.使用以下代码:

I am unable to create thick wireframes. Using the following code:

new THREE.MeshBasicMaterial( {
    color: new THREE.Color( 'rgb(100,100,100)' ),
    emissive: new THREE.Color( 'rgb(23,23,23)' ),
    shading: THREE.FlatShading,
    wireframeLinewidth: 10,
    wireframe: true
})

我得到以下结果:

无论我使用什么数字，线条总是 1px 粗.我注意到 Threejs api 演示页面也是如此:

no matter what number I use the lines are always 1px thick. I've noticed that the same is true for threejs api demos page:

这是一个已知的错误吗?有什么解决办法吗?

is this a known bug? is there any work around?

推荐答案

WebGL1 中所需的最大线条粗细为 1，因此基本上您的浏览器或操作系统或驱动程序的线条粗细限制为 1.

The maximum required thickness of lines in WebGL1 is 1 so basically your browser or OS or driver has a limit of 1 for line thickness.

在 WebGL2 中，限制为 1 更为常见，因为它在 OpenGL 4.0+ 核心配置文件中为 1.

In WebGL2 it's even more common for the limit to be 1 because it's 1 in OpenGL 4.0+ Core Profile.

来自 OpenGL 4.+ 规范的 E.2.1 部分

From the OpenGL 4.+ specs, section E.2.1

以下功能已弃用，但仍存在于核心配置文件中.它们可能会从未来版本的 OpenGL 中删除，并在实现核心配置文件的前向兼容上下文中删除.

E.2.1 Deprecated But Still Supported Features

The following features are deprecated, but still present in the core profile. They may be removed from a future version of OpenGL, and are removed in a forward compatible context implementing the core profile.

• 宽线 - LineWidth 值大于 1.0 将产生 INVALID_VALUE 错误.

虽然 WebGL2 在台式机上基于 OpenGL ES 3.0，但它在 OpenGL 4 或 ANGLE 之上运行，两者的限制均为 1.由于昨天发布的 Firefox 51 和 Chrome 56 都在台式机上使用 ANGLE 或 OpenGL 4+这意味着即使在 WebGL1 中，现在几乎所有地方的限制都是 1

While WebGL2 is based on OpenGL ES 3.0 on desktops it runs on top of OpenGL 4 or ANGLE both of which have a limit of 1. Since Firefox 51 and Chrome 56 shipped yesterday and both are using ANGLE or OpenGL 4+ on desktops that means the limit is now 1 pretty much everywhere even in WebGL1

所有这一切的重点是，除非您只关心 1 的线，否则您不应该使用 GL 的线图来绘制线(是的，我知道，这听起来很傻).

The point of all of that is unless you only care about lines of with 1 you shouldn't use GL's line drawing to draw lines (yea, I know, sounds silly).

相反，您需要想出一些其他解决方案.

Instead you need to come up with some other solution.

一些链接，

首先是一个three.js的库

First a library for three.js

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

另外一些关于如何创建线条的文章

Otherwise some articles about how to create lines

http://labs.hyperandroid.com/efficient-webgl-stroking

https://cesiumjs.org/2013/04/22/Robust-Polyline-Rendering-with-WebGL/

https://mattdesl.svbtle.com/drawing-lines-is-hard

这篇关于Threejs:为什么线框厚度不适合我?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！