threejs 绘制多段虚线

Posted 2021-06-25 三学子

在三维的  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 的作者 Mr.doob 提出了 javascript 代码规范，按照这个规范书写代码时，要做到能使用空格的就要使用，用空行来分隔代码块的不同部分，整体感觉代码比较松散，缩放之后还能看得清楚。具体内容大致如下：

命名要尽可能有语义，只有循环中的变量可以使用单个字母，从  i   开始的字母。变量名、函数名用小驼峰，类名、常量名用大驼峰，对象的私有属性和方法的名称开头加 _ ；

创建对象字面量时，左右花括号之间留一个空格，属性名最好不加引号，冒号、逗号前面不要留空格，后面留一个空格，最后一个属性值不要加逗号；

创建数组时， 左右中 括号之间留一个空格，逗号前面不留空格，后面留一个空格，最后的元素后面不加逗号；

书写代码块时，开头花括号后面留一个空行，结尾花括号前面留一个空行，开头花括号前面留一个空格，不要另起一行；

If 表达式的要求， if 、条件判断、圆括号和花括号之间要有空格，必须包含代码块，else 和前后的括号之间要有空格；

Switch 语句的要求，除了上面提到的之外，还有 case 、常量判断和冒号之间要有空格，应该有 break 语句，除了 default 或者有返回值；

For 循环的要求，同理可得，每个部分和圆括号花括号之间要有空格；

等号必须使用严格的操作符，如 === 和 !== 。

可以参考上面的代码，好好感受一下吧！