threejs 绘制多段虚线

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 文档—虚线材质

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