threejs绘制线并且可以设置线的宽度

points格式:
在这里插入图片描述

import {LineGeometry} from 'three/examples/jsm/lines/LineGeometry';
import {LineMaterial} from 'three/examples/jsm/lines/LineMaterial';
import {Line2} from 'three/examples/jsm/lines/Line2';


drawLine(points, index) {
       const coordinates = points.map(item => {
           return [item.x, item.y, item.z];
       });
       const pts = [];
       if (coordinates && coordinates.length) {
           coordinates.forEach(v => {
               const coord = this.customCoords.lngLatToCoord(v);
               pts.push(...coord, 0);
           });
           const geometry = new LineGeometry();
           geometry.setPositions(pts);
           const material = new LineMaterial({
               linewidth: 5
           });
           // 改变颜色
           material.color.setStyle(_color);
           // 透明度
           material.opacity=0.5;
           material.transparent=true;
           material.resolution.set(window.innerWidth, window.innerHeight);
           this[`line${index}`] = new Line2(geometry, material);
           this[`line${index}`].computeLineDistances();
           this[`line${index}`].position.setZ(0.2);
           // 更新颜色
           // this[`line${index}`].material.color.setStyle(_color);
           this.scene.add(this[`line${index}`]);
       }
   }

v的格式:在这里插入图片描述

coordinates.forEach(v => {
	    pts.push(new THREE.Vector2(v[0],v[1]));
	  });
	 const basicLine = new THREE.LineBasicMaterial( {
	    color: 0xff8900,
	    linewidth: 1
  });
  const shape = new THREE.Shape(pts);
  const spacedPoints = shape.getSpacedPoints( 100 );
  const geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );
  this.line = new THREE.Line( geometrySpacedPoints, basicLine);
  this.line.computeLineDistances();
  this.line.position.setZ(1);
  this.scene.add(this.line);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值