threejs 绘制多段虚线

ゝ一纸荒年。 2022-03-10 15:38 478阅读 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 条评论，478人围观）

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

相关阅读

相关 php虚线园的代码,canvas画虚线圆

本文要实现的图形 ![bVFVJg?w=121&h=122][bVFVJg_w_121_h_122] 一个简单的占比统计。。实现的方案是html js合成首先是简单

本是古典何须时尚/ 2023年01月17日 04:55/ 0 赞/ 195 阅读

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

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

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

相关 html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便

ゝ一世哀愁。/ 2022年10月05日 12:46/ 0 赞/ 161 阅读

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

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

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

相关超链接 a标签虚线框虚线去除虚线框

当一个链接得到焦点时，默认会有个虚线框。如图： ![链接虚线框][hide-link-outline.gif] 在 Firefox 里可以用 -moz-outline:no

短命女/ 2022年09月30日 03:54/ 0 赞/ 159 阅读

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

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

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

相关 Android 中实现绘制虚线

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

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

相关 threejs 绘制多段虚线

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

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

相关 canvas 绘制虚线

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

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

相关 canvas绘制虚线setLineDash

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

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