记录threejs曲线宽度linewidth问题LineBasicMaterial

默认使用LineBasicMaterial,可以画出1px宽度线条,使用threejs,QuadraticBezierCurve3,创造曲线点位,使用BufferGeometry配置点位位置。使用LineBasicMaterial,配置linewidth windows系统下webgl渲染无效。
解决思路1:使用set scale放大线条。
new THREE.Line(geometry, material).scale.set(5,5,5);
结果:失败,只放大了线条的占用位置,没有影响线条本身长度,宽度。
解决思路2:使用LineMaterial,LineGeometry,line2
结果:成功,但是导致了另一问题法生,使用onclick event camera raycaster.intersectObjects捕捉点击线条事件,无法触发,遂怀疑由于line2生成线路material2.resolution.set(window.innerWidth,window.innerHeight)此代码改变线路原有分辨率位置,导致点击触发事件失效。
解决思路3:故更换方式github搜索threejs画线路插件,使用插件MeshLineMaterial解决问题。

结果:使用MeshLineMaterial,install最新版本@1.3项目直接报错
image.png
,引用threejs,shadermaterial,方法前需要new。重新[email protected]版本,
image.png

同样显示复现该问题。重新install使用@1.1版本报另外错误
image.png
webGl overload?超载?看源码没有解决思路,由于项目工时安排,暂时使用1px,目前记录到这里,搜索其他解决方法,暂无。
解决思路4:自己使用别的方法重新构造曲线,待验证。

你可能感兴趣的:(记录threejs曲线宽度linewidth问题LineBasicMaterial)