three.js中绘制宽线的两种方式

原创 已于 2023-07-11 22:55:14 修改 · 9.1k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#three.js

于 2019-08-09 20:20:17 首次发布
本文探讨了WebGL中线宽实现的两种方法：纯CPU计算和GPU着色器计算。详细介绍了每种方法的优缺点，以及如何通过偏移顶点数据来创建宽线效果。参考THREE.js的MeshLine类，提供了一个宽线符号动画类的实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制，有两种做法：

1.纯CPU计算

这种方式的优点是在处理端头、拐点时更加灵活，缺点是对CPU算力有很大消耗，每次缩放地图都需要根据地图分辨率重新计算宽线坐标。

2.GPU着色器计算

组织两份线顶点数据，其中一份向当前拐点的法向量正方向偏移，另一份向当前拐点的法向量反方向偏移，偏移距离为当前地图分辨率下，像素长度为半个线宽的距离。

关于数据处理和计算过程，可以参考THREE.js的MeshLine

同时，我参考了THREE.js的MeshLine类，写了一个宽线符号动画类，有兴趣的可以关注一下。

在线预览地址

优快云资源下载地址https://download.youkuaiyun.com/download/u014529917/85210149

ThreeJS之画线（Drawing lines）
BinParker的博客
03-14 1792
线是画在每一对连续的顶点之间的，而不是在第一个顶点和最后一个顶点之间绘制线条（线条并未闭合）
03-threejs画线
jiuliangliang的博客
01-04 1752
3、这个时候可以看到项目中有条蓝色的线条，但是背景颜色是黑色的，我们可以在Base.js中设置一下颜色。新建Base.js文件，用来编写three.js文件，抛出一个类，这个类是用来挂载dom节点的。1、命令窗口输入以下代码，我的项目名字是drawline,大家可自行填写名称。6、创建线条对象，并将几何体和材质传递到构造函数中。5、在Base.js中写一个方法，用来添加线条。在Base.js中引入场景、相机和渲染器，2、抛出一个线条数组，并将创建一个线条数组。7、将线条添加到线条数组中去。
threejs设置宽度线例子
06-10
threejs 生成 带宽度线，动态连续的箭头线
Threejs绘制有宽度的线（Line2）
weixin_44761091的博客
10-11 3112
在 API 中提供了三类线相关的物体,和两类材质，主要控制线的颜色，宽度等（线宽linewidth不生效）由于底层OpenGL渲染的限制性，线宽的最大和最小值都只能为 1，线宽无法设置，那么线段之间的连接形状设置也就没有意义了，因此这三个设置项都是无法生效的。
【前端】threeJS学习(长期更新)
最新发布
sinat_39394862的博客
06-18 996
前端，threeJS学习，制作3D的一些模型场景可用，长期更新
three.js 创建可以设置宽度和纹理的线条
收集、分享
02-21 771
three.js 创建可以设置宽度和纹理的线条
threejs绘制线并且可以设置线的宽度
bidepanm的博客
08-24 1850
threejs绘制线
Threejs中设置Line的宽
Baker的博客
10-25 770
既然Line不行了，那就换一种方式，接下来用Line2来实现线条的宽度调整，Line2的使用需要单独引入，且有自己对应的geometryh和material，它是对Line的一个扩展和优化，可以绘制出更平滑的线条，因此先要在头部引入。渲染器的限制，无论如何设置该值，线宽始终为1。那么说明多数平台上这个参数都是不生效的，但是查找了官方文档后确实是有这个属性的。但是紧接着下一行，由于。其次修改代码为Line2的方式。
Three.js实现简单3D房间布局
10-17
【Three.js实现简单3D房间布局】是使用JavaScript库Three.js进行三维场景构建的一个实例，主要涉及到了在网页中创建一个3D房间模型的技术。Three.js是一个强大的WebGL库，它简化了在浏览器中创建复杂的3D图形的过程...
JavaScript 的 Three.js 实现虚拟现实场景绘制：创建虚拟展厅
数字魔方操控师的博客
05-06 1325
在当今数字化时代，虚拟现实（VR）技术以其沉浸式体验吸引了众多领域的关注。从游戏娱乐到商业展示，VR 为用户带来了前所未有的交互体验。而在 Web 端实现虚拟现实场景，Three.js 库成为了开发者的得力工具。Three.js 是一个基于 JavaScript 的 3D 库，它简化了在浏览器中创建和渲染 3D 场景的过程，让开发者无需深入了解复杂的图形学原理，就能轻松构建出逼真的 3D 世界。
mixamo-three.js:使用Mixamo模型和动画进行Three.js测试
04-06
在本文中，我们将深入探讨如何使用Mixamo模型和动画与Three.js进行集成，这是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。Mixamo是Adobe提供的一个在线服务，它提供了大量的预设3D人物模型和动画，...
three.js线条line宽度问题
qq_39966730的博客
10-19 1246
three.js线条line宽度问题
study-threeJS1:使用three.js进行线条绘制
04-08
Study-ThreeJS 测试
threejs-生成带宽度的线-MeshLine的使用
whl0071的专栏
01-30 4040
threejs-生成带宽度的线-MeshLine的使用
ThreeJS-3D教学十-有宽度的line
weixin_44384273的博客
10-16 1063
Line2 有宽度的线 linewidth
three.js 简单画线
风起未来
08-04 4161
最近需要用到three.js 开始接触 但是在简单得画线都一直报错，基本得引入都没问题； 最后才发现 new THREE.Geometry()；125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry 代码如下 <!DOCTYPE html> <html> <head> <title>Line</title> <style type="text/css"> body.
ThreeJs绘制线
Baker的博客
08-05 695
Threejs提供了绘制线的功能，先设定多个点数据，threeJs提供方法将多个点按照顺序连接起来，并提供线的材料颜色等，在上一篇中有讲到拖拽物体的功能，如果把线加入到可拖拽数组中，也可以实现拖拽线的功能，画线功能柜常用于地图编辑等，具体源码如下： <!DOCTYPE html> <html lang="...
three.js第三篇【简单画线】
热门推荐
印心石屋
12-29 1万+
今天简单给大家演示一下，如何绘制线条： 代码示意：                                                  // 老三样 场景scene，相机camera，渲染器render         var scene=new THREE.Scene();         // 相机         var camera
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

evomap

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

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

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

打赏作者

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

抵扣说明：

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

余额充值