THREE.js linewidth contradiction

2020-02-15 04:25发布

问题:

I noted that at the LineBasicMaterial THREE documentation is said that on Windows systems the linewidth is set-up automatically to 1 and cannot be changed.

On the other hand we have a very cool example from threejs.org using the same THREE version (r68) where using a Windows system the linewidth gets modified from 1 to 5 and from 5 to 1 when the mouse overs one of the lines on the scene.

So, my question is, can this parameter be modified? How to do it? I tried with simply set the material.linewidth to a different number but it had no effect.

回答1:

The example you linked uses the CanvasRenderer (not the WebGLRenderer) which does support lineWidth. WebGLRenderer however has to rely on what the WebGL implementation provides.

On Windows, both Chrome and Firefox default to using ANGLE (some layer on top of DirectX) which does not support lineWidth. Firefox on Windows can however be switched to OpenGL, and then (depending on the video card drivers) lineWidth may be supported.

(Chrome has a command line option to switch it to OpenGL mode, but that's no longer a supported or functional configuration, it just hangs on startup ... you don't need to bother trying).



回答2:

I would guess that the documentation is outdated there. Because the example that you linked does indeed set:

currentIntersected.material.linewidth = 5;

where currentIntersected instanceof THREE.Line and currentIntersected.material instanceof THREE.LineBasicMaterial

After the value is set to 5, if I try to get it, it does indeed return 5, and the line renders as thick. Even in IE on Windows.

If it doesn't work for you, can you please post your example in a jsfiddle or something?

PS: did you remember to call render?