threejs 绘制多段虚线

ゝ一纸荒年。 2022-03-10 15:38 584阅读 0赞

# threejs 绘制多段虚线 #

在三维的webgl类库threejs下，绘制多段实线没有问题；使用同样的方式绘制多段虚线却出现了问题。简单说明一下，虚线绘制时，类库的方法是计算相邻两个端点的距离，然后生成虚线段，所以在绘制多段虚线时，需要重复端点一次。下面是参考的代码：

var getDashedLine = function ( points, opt ) { 
            if ( !points || points.length < 2 ) return null;
        
            var lineOpt = { 
                color: 0xffffff,
                linewidth: 1,
                scale: 1,
                dashSize: 1,
                gapSize: 1,
            };
            if ( opt ) $.extend( lineOpt, opt );  // 使用 jq 类库的方法
        
            var geometry = new THREE.BufferGeometry();
            var material = new THREE.LineDashedMaterial( lineOpt );
        
            var dots = [];
            for (var i = 0, il = points.length; i < il; i++) { 
                dots.push( points[i] );
                if ( i > 0 && i < il-1) dots.push( points[i] );  // 这里重复了端点
            }
            geometry.setFromPoints( dots );
        
            var line = new THREE.LineSegments(geometry, material);
            line.computeLineDistances();
            
            return line;
        }

[threejs 文档—虚线材质][threejs]

关联的公众号：`三学子`，满足您不一样的阅读需求。

[threejs]: https://threejs.org/docs/index.html#api/en/materials/LineDashedMaterial

发表评论取消回复

表情：

评论列表（有 0 条评论，584人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet绘制具有虚线框的多边形（125）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第125个 [点击查看专栏目录][Link 1]

矫情吗；*/ 2024年03月24日 10:14/ 0 赞/ 78 阅读

相关 threejs

Three.js是一个基于WebGL技术的JavaScript库，它可以简化3D图形的创建和展示。使用Three.js，你可以在网页上创建复杂的3D场景、模型和动画。 Thr

偏执的太偏执、/ 2024年02月20日 13:09/ 0 赞/ 76 阅读

相关 threejs绘制风羽

threejs绘制风羽 1. 引言 2. 什么是风羽 3. threejs绘制 3.1 threejs渲染流程概述 3.2 构

分手后的思念是犯贱/ 2023年10月11日 17:12/ 0 赞/ 61 阅读

相关百度地图绘制多段驾车路线

百度地图绘制多段驾车路线直接上代码： <!DOCTYPE html> <html> <head> <meta http-

比眉伴天荒/ 2022年10月18日 00:50/ 0 赞/ 272 阅读

相关 Canvas学习：绘制虚线和圆点线

[上一节中][Link 1]，使用`moveTo()`、`lineTo()`和`stroke()`可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。

阳光穿透心脏的1/2处/ 2022年09月30日 04:59/ 0 赞/ 1230 阅读

相关【python中级】使用matplotlib绘制虚线段

【python中级】使用matplotlib绘制虚线段 1、背景 2、使用matplotlib绘制 3、运行结果 1、背景 opencv有绘制

骑猪看日落/ 2022年09月14日 11:08/ 0 赞/ 493 阅读

相关 Android 中实现绘制虚线

在Android 开发中，有时我们需要绘制虚线如下图： ![这里写图片描述][70] drawable里面创建bg\_dotted\_line.xml <?x

落日映苍穹つ/ 2022年05月31日 13:26/ 0 赞/ 542 阅读

相关 threejs 绘制多段虚线

threejs 绘制多段虚线在三维的webgl类库threejs下，绘制多段实线没有问题；使用同样的方式绘制多段虚线却出现了问题。简单说明一下，虚线绘制时，类库的方法是

ゝ一纸荒年。/ 2022年03月10日 15:38/ 0 赞/ 585 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 673 阅读

相关 canvas绘制虚线setLineDash

window.onload=function(){ ctx.beginPath(); ctx.setLineDash(

ゞ浴缸里的玫瑰/ 2021年07月24日 16:06/ 0 赞/ 591 阅读