关于 ThreeJS 线宽 lineWidth 无法正常显示 太大 需要缩小 窗口缩放会影响线粗细 等问题

最新推荐文章于 2023-10-11 09:58:43 发布
最新推荐文章于 2023-10-11 09:58:43 发布
阅读量4k 收藏 3
点赞数
分类专栏： JavaScript 文章标签： threejs 线宽 threejs linewidth
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljason1993/article/details/102942314
版权

首先 默认threejs的线宽是无法调节的  这个大家应该都知道

官方可调节案例:

https://threejs.org/examples/?q=line#webgl_lines_fat

代码样例(就在右下角 还是贴个防呆链接吧)

https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html

 

很多人可能会出现我徒弟第一次的情况,照着下面一顿写(官方示例代码)

然后就发现屏幕白花花的根本用不了....

发现线缩小几千倍就可以用...

这是因为还少东西

一定要在 update里面 (animate) 维护线的材质.....注意红线那句话,对就是这句话

然后你就发现线就正常粗细了...

但是你会发现如果你写了窗口自适应的代码,窗口产生变化的时候...你的线可能就会出问题

注意注意 是可能

你可以参考官方代码 来进行调整 如下

因为我找到问题后直接给我徒弟了...具体没测,各位见谅

LJason 祝各位顺利

 

懵懵爸爸
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
THREE.js开荒小记（二）：无效宽度linewidth的Line 和 无效阔threshold的Line2
SunnySnow0527的博客
11-04 3298
前两天遇到一个问题，使用THREE.Line画出来的线通过属性调整宽度无效。 首先简单介绍一下THREE.Line这个类； 这个是在场景中画出线所使用的类，构造函数由2个参数组成：THREE.LineBasicMaterial（材质）、THREE.Geometry（几何体） 简单的说，材质主要控制线的颜色，宽度等；几何体主要控制线段断点的位置等； line的使用方式： let geometry = new THREE.Geometry(); geometry.vertices.push(...
threejs设置宽度线例子
06-10
threejs 生成 带宽度线，动态连续的箭头线
做设计时线宽、线距规则设置多大比较好.rar-综合文档
05-14
做设计时线宽、线距规则设置多大比较好.rar
three-fatline:宽度可变的ThreeJS Line对象
05-13
三脂肪 的模块化版本。 参见（） 用法示例： import { Line2, LineGeometry, LineMaterial } from 'three-fatline'; const geometry = new LineGeometry(); geometry.setPositions([-160, 200, 0, 0, -200, 0, 160, 200, 0]); // [ x1, y1, z1, x2, y2, z2, ... ] format const material = new LineMaterial({ color: 'red', linewidth: 10, // px resolution: new THREE.Vector2(640, 480) // resolution of the viewport // dashed, das
04.ThreeJs开发指南-第四章-材质
KingW
09-02 9779
第四章 材质材质种类： MeshBasicMaterial：为几何体赋予一种简单的颜色，或者显示几何体的线框 MeshDepthMaterial：根据网格到相机的距离，该材质决定如何给网格染色 MeshNormalMaterial：根据物体表面的法向量计算颜色 MeshFaceMaterial：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色 MeshLambertMater
threejs 三面体_three.js初探，立体几何入手（一）
weixin_39608748的博客
12-20 694
前言：首先先推荐一篇博客，关于webgl原理，讲的非常之通俗易懂了图解WebGL&Three.js工作原理webGL可以理解为openGL ES2.0(webGL2.0 - openGL ES3.0)的javascript绑定。所以实现的语言是javascript和opengl(最常用的跨平台图形库)着色语言，webgl是HTML5中提出的新技术，是一种3D绘图标准。three.js...
three.js中绘制宽线的两种方式
凡事有果必有因
08-09 8679
webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制，有两种做法： 1.纯CPU计算 在线地址 2.GPU着色器计算
Threejs 设置线条宽度(lineWidth) 无效问题
popstarqq的博客
12-07 4813
在编写Three.js的时候，设置线模型Line对应线材质LineBasicMaterial的线宽属性lineWidth，是无效的。官方解释 Due to limitations of theOpenGL Core Profilewith theWebGLrenderer on most platforms linewidth will always be 1 regardless of the set value. 即由于opengl核心库文件的限制，webgl渲染器在大部分平台上linewi...
Threejs绘制有宽度的线（Line2）
最新发布
weixin_44761091的博客
10-11 1304
在 API 中提供了三类线相关的物体,和两类材质，主要控制线的颜色，宽度等（线宽linewidth不生效）由于底层OpenGL渲染的限制性，线宽的最大和最小值都只能为 1，线宽无法设置，那么线段之间的连接形状设置也就没有意义了，因此这三个设置项都是无法生效的。
threejs-生成带宽度的线-MeshLine的使用
whl0071的专栏
01-30 3026
threejs-生成带宽度的线-MeshLine的使用
THREE.BlurredLine:在THREE.js中用柔和的模糊边缘绘制不同宽度的线
05-19
模糊线 在柔和的模糊边缘绘制不同宽度的线 该库将线条绘制为网格，并在内部创建BufferGeometry。 它不仅对绘制较宽的柔线很有用，而且对整洁地绘制极细的线也很有用。 例子 ：展示大多数功能 ：简单示例 ：使用...
linewidth_measure.rar_dfb matlab_linewidth_拍频法测线宽_激光外差_激光线宽
07-13
基于光学外差法测量超窄线宽激光器的拍频计算DFB激光器的线宽，包括Gaussian线型与Lorentzation线型两种。
pads布线线宽怎么设置
07-19
本文主要讲了下pads布线线宽怎么设置，希望对你的学习有所帮助。
threejs 给外部模型添加线框，可改粗细
weixin_45815569的博客
03-22 3335
详细可以去看看threejs的案例：three.js examples案例库 (webgl3d.cn)http://www.webgl3d.cn/threejs/examples/#webgl_lines_fat_wireframe
three.js线条line宽度问题
qq_39966730的博客
10-19 1018
three.js线条line宽度问题
three.js项目从vue2升级成vue3、vue-router3升级成vue-router4后续遇到的问题
大英雄不该去雪山打滚
08-03 450
关于把对象声明在data()还是mounted() 按照网上的说法，非数字的放在mounted()，数字的放在data()，比如container,camera,mesh,orbitControl,gridHelper,socket,datGui,fbx,gltf那这些的就声明到mounted()里了，全部都是this.XXX=null;,这样的好处也有一个就是最后在beforeUnmount()里可以直接把这一些复制进去，当然还需要关闭socket、清除监听事件、cancelAnimationFrame等
Three.js开发：粗线的画法
地理信息技术杂谈 博客，欢迎技术交流
06-28 1622
Three.js的开发中，画线时，使用THREE.Line或者THREE.LineSegments进行画线时，发现在材质中设置线的宽度并不起作用，在查阅Three.js的文档发现，以上方式，对应的是webgl中gl.LINE_STRIP 或者 gl.LINES，这在一些浏览器渲染时，并不起作用，所以，Three.js扩展了一个画粗线的方法，具体的使用方法如下： 相关的类库放在Three.js包的example中，首先引用相应的js文件 实现效果如下： 引用内容： https://github.com/mr
threejs 生成加宽度线和动态箭头线
weixin_39481659的博客
06-10 5274
threejs 生成加宽度线和动态箭头线
关于 threejs 加载fbx 材质是黑色 没有贴图 的问题
热门推荐
ljason1993的博客
06-04 1万+
材质是黑色的原因不是丢贴图,也不是颜色错了,而是发光通道的问题,默认用的材质MeshPhongMaterial 或者fbx自己有指定 MeshLambertMaterial 这时候我也不知道为什么如果不开发光通道你的材质就会黑.... 把发光颜色 强度 贴图 都换掉 直接贴代码 function _ChangeMaterialEmissive(parent) { ...
qgraphicsitem 线宽 缩放
07-04
### 回答1： QGraphicsItem是Qt中的一个类，用于在图形场景中绘制2D图形对象。线宽是QGraphicsItem中一个可调整的属性，用于定义绘制线条的宽度。缩放是另一个属性，用于调整绘制对象的大小。 在QGraphicsItem中，可以通过设置线宽属性来改变绘制线条的粗细。可以使用setPen方法来设置线条的颜色和宽度。例如，可以通过以下代码将线条宽度设置为2个像素： QPen pen; pen.setWidth(2); item->setPen(pen); 通过设置线宽，可以调整绘制对象的外观，以便更好地满足设计需求。 缩放是另一个重要的操作，可以通过设置QGraphicsItem的缩放属性来调整绘制对象的大小。可以使用setScale方法来设置缩放因子，该因子指定了对象在水平和垂直方向上的缩放倍数。例如，可以使用以下代码将对象在水平和垂直方向上都缩放为原来的一半： item->setScale(0.5); 通过缩放功能，可以实现图形对象的放大和缩小效果，以及实现不同尺寸的图形对象的显示。 QGraphicsItem的线宽和缩放属性是灵活的，可以根据具体需求进行调整。通过设置线宽和缩放属性，我们可以实现绘制具有不同外观和大小的图形对象，以满足不同的图形设计要求。 ### 回答2： QGraphicsItem中的线宽缩放是指在对图形项进行缩放操作时，其边界线的宽度是否也会相应地进行缩放。 QGraphicsItem是Qt中用于绘制2D图形的基类，它提供了丰富的绘图功能。在进行缩放操作时，QGraphicsItem会根据其当前的缩放因子对图形进行相应的缩放，包括图形的位置、大小和旋转角度等。 在默认情况下，QGraphicsItem的线宽不会随着缩放而改变，也就是说，在缩放过程中，图形项的线宽保持不变。这是为了保持图形的清晰度和边界的一致性。 然而，如果我们希望在缩放过程中同时改变线宽，我们可以通过以下步骤实现： 1. 在创建QGraphicsItem的时候，设置其属性QGraphicsItem::ItemIgnoresTransformations，这样它就会忽略缩放操作对其的影响。 2. 重写QGraphicsItem的paint()函数，在函数中根据当前的缩放因子和线宽比例绘制图形。可以通过调用pen()方法获取当前的画笔对象，并设置其线宽。 这样，在进行缩放操作时，图形项的线宽也会相应地进行缩放，保证了图形的比例和线宽的一致性。 总而言之，QGraphicsItem中的线宽缩放是可以实现的，只需要通过设置属性和重写绘制函数的方式来实现。这样可以根据实际需求来调整图形项在缩放时线宽的变化。 ### 回答3： QGraphicsItem 的线宽是指在绘制图形元素时所使用的线条的宽度。默认情况下，线宽为0，即不可见。 在QGraphicsItem 中，可以通过 setPen() 函数来设置线宽。可以传入一个 QPen 对象，通过设置其线宽属性来修改线宽的大小。例如，可以使用 setWidth() 函数来设置线宽的大小。较大的线宽将会生成更宽的线条，而较小的线宽则会生成更细的线条。 线宽的缩放可以通过 setScale() 函数来实现。该函数可以对图形元素进行缩放操作。通过设置缩放因子，可以将图形元素的大小进行相应的缩放。当缩放因子为1时，图形元素保持原始大小。当缩放因子大于1时，图形元素放大；当缩放因子小于1时，图形元素缩小。 需要注意的是，QGraphicsItem 会维护一个绘制的轮廓区域，而不是实际的几何形状。当进行缩放操作时，线宽也会相应地进行缩放。因此，线宽的缩放是相对于图形元素的轮廓区域而言的，而不是相对于实际几何形状。 总之，QGraphicsItem 的线宽可以通过设置 QPen 的宽度属性来修改，较大的线宽将会生成更宽的线条，而较小的线宽则会生成更细的线条。线宽的缩放可以通过设置缩放因子来实现，相应地缩放线宽和图形元素的大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懵懵爸爸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值