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

已于 2023-07-11 22:55:14 修改
阅读量8.7k 收藏 12
点赞数 2
分类专栏： three.js 文章标签： three.js
于 2019-08-09 20:20:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014529917/article/details/98986816
版权

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

1.纯CPU计算

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

2.GPU着色器计算

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

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

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

在线预览地址

CSDN资源下载地址https://download.csdn.net/download/u014529917/85210149

evomap
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
threejs — 9 画线三种方式
Tx457973的博客
10-08 1703
划线三种方式 基本使用 代码：https://github.com/taixinF/methreejs
three.js 两点成线的绘制
L人称的博客
11-05 1516
第一次发博客。 原文链接 https://blog.csdn.net/qq_30100043/article/details/74202841 效果图： 代码如下： <!doctype html> Document
Threejs绘制有宽度的线（Line2）
weixin_44761091的博客
10-11 1696
在 API 中提供了三类线相关的物体,和两类材质，主要控制线的颜色，宽度等（线宽linewidth不生效）由于底层OpenGL渲染的限制性，线宽的最大和最小值都只能为 1，线宽无法设置，那么线段之间的连接形状设置也就没有意义了，因此这三个设置项都是无法生效的。
three.js中Meshline库的使用
敖丙007的博客
01-23 1089
three.js中Meshline库的使用
Threejs（WebGL）绘制线段优化：Shader修改gl.LINES模式为gl.LINE_STRIP
最新发布
dabaooooq的博客
05-31 1187
场景中有大量的非连续线段，每条线段由大量的点构成（曲率较大），并且需要合并渲染，这时，一般考虑使用LineSegments画线，因为LineSegments底层是基于 gl.LINES 的WebGL标准进行绘制，v0 v1、 v1 v2、 v2 v3、 v3 v4.......但是，这种方法会有一定代价。
threejs-生成带宽度的线-MeshLine的使用
whl0071的专栏
01-30 3291
threejs-生成带宽度的线-MeshLine的使用
three.js符号线动画
04-23
three.js中实现的宽线符号动画，可以自定义符号、符号的填充模式、符号放置的像素长度和间隔、动画速度等。 动画计算基于着色器，性能高效，可以用来制作线的流光效果、导航线动画等。
Threejs-绘制可设置宽度的线
NCQuan
10-14 5377
1.设备朝向控制器(DeviceOrientationControls) 该控制器可以使得摄像机依据设备的朝向(手机陀螺仪)来进行调整。 let controls = new THREE.DeviceOrientationControls( camera ); function animate() { controls.update(); } 2.飞行控制器(FlyControls) 飞行模拟控...
threejs设置宽度线例子
06-10
threejs 生成 带宽度线，动态连续的箭头线
ThreeJS 动画之 Noisy Lines
南城
05-07 415
五一假期即将结束啦，大家也即将准备投入到工作中来了，在这假期的最后一天，给大家带来一个复杂的线条动画，效果如下所示。 gif 如果你做过一些企业站点的项目，应该会有遇到过这种需求，为了让我们的站点更具有活力及动画效果，往往会加一些类似这样的效果来丰富我们的网站，今天就来看看如何实现这种效果吧，动画效果基于threejs-toys实现，本文不讨论其底层原理，有兴趣的同学可以看看源码研究。 实现 引入依赖包 import{noisyLinesBackground}from'https:...
arcgis js 结合 three.js 实现流动的管道
05-25
"arcgis js 结合 three.js 实现流动的管道"这个主题涉及到将这两种技术融合，创建出具有动态视觉效果的地图应用。在描述中提到的具体效果是指利用ArcGIS JS API展示地图背景，然后通过Three.js在地图上添加3D管道...
Three.js的使用及绘制基础3D图形详解
10-19
通常有两种方法：一是直接在HTML中定义`<canvas>`元素，然后在JavaScript中指定该元素；二是不预先定义`<canvas>`，而是动态创建并插入到DOM中。在创建渲染器时，可以设置各种属性，如抗锯齿、透明度、渲染器尺寸等...
Three.js实现简单3D房间布局
10-17
【Three.js实现简单3D房间布局】是使用JavaScript库Three.js进行三维场景构建的一个实例，主要涉及到了在网页中创建一个3D房间模型的技术。Three.js是一个强大的WebGL库，它简化了在浏览器中创建复杂的3D图形的过程...
基于three.js 和ArcGIS JS API meshline
04-08
MeshLine是Three.js的一个扩展，允许开发者绘制自定义的3D线段。这些线段可以是简单的直线，也可以是复杂的曲线，它们能够以各种方式着色和纹理化，非常适合在地图上描绘路线、边界或高程数据。Three.js中的Mesh对象...
Three.js开发实现3D地图的实践过程总结
10-18
在本篇文章中，作者分享了使用Three.js库开发3D地图的实践经验，Three.js是一个基于WebGL的JavaScript库，旨在简化3D图形编程。以下是文章的主要知识点： 1. **Three.js简介**：Three.js是为了降低WebGL的学习曲线...
html5+three.js天空乌云密布背景动画特效
06-11
在这个项目中，“html5+three.js天空乌云密布背景动画特效”利用了这两个技术的力量，为用户提供了一种沉浸式的网页背景体验。 HTML5是超文本标记语言的最新版本，它引入了许多新特性，如canvas元素，使得在浏览器...
Three.js Line2渐变色线条序列帧动画
漫漫漫漫的博客
01-15 6676
效果 代码 1. 生成轨迹线 // 轨迹曲线线 const curve = new THREE.CatmullRomCurve3( [ new THREE.Vector3(-20, 30, 4), new THREE.Vector3(20, 30, 4), new THREE.Vector3(20, 0, 4), new THREE.Vector3(-20, 0, 4),
Three.js一学就会系列：02 画线
成茂峰
12-07 1953
最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D这篇文章给大家讲下three.js 画线官网，介绍，以及引入库，参看文章片头系列文章：01 第一个3D网站 创建一个透视摄像机 将渲染器添加到页面上 创建一个线条 渲染场景 requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。 完整代码（实例） 效果 以上就是今天要讲的内容，本文仅仅简单介绍了three.
关于 ThreeJS 线宽 lineWidth 无法正常显示 太大 需要缩小 窗口缩放会影响线粗细 等问题
ljason1993的博客
11-06 4070
首先 默认threejs的线宽是无法调节的 这个大家应该都知道 官方可调节案例: https://threejs.org/examples/?q=line#webgl_lines_fat 代码样例(就在右下角 还是贴个防呆链接吧) https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html ...
three.js绘制线
09-22
用 three.js 绘制线需要使用 THREE.Line 类。首先需要创建一条几何线，然后将其传递给 THREE.Line 类的构造函数，如下所示： ```javascript // 创建几何线 var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-10, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 10, 0)); geometry.vertices.push(new THREE.Vector3(10, 0, 0)); // 创建线条材质 var material = new THREE.LineBasicMaterial({ color: 0x0000ff }); // 创建线条对象 var line = new THREE.Line(geometry, material); // 将线条添加到场景中 scene.add(line); ``` 这段代码创建了一条由三个点组成的线，颜色为蓝色，然后将其添加到场景中。你可以根据需要修改线的颜色、宽度、端点样式等属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

evomap

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

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

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

打赏作者

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

抵扣说明：

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

余额充值