【3D】threejs 画有粗细的线
发布于 1 个月前 作者 qjzd 310 次浏览 来自 码农

划线效果

line2 (1).gif

threejs官方的demo

https://threejs.org/examples/#webgl_lines_fat

核心代码

	  import { Line2 } from 'three/examples/jsm/lines/Line2'
	  import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
	  import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
	  
	  const lineGeometry = new LineGeometry();
      const line2 = new Line2(
        lineGeometry,
        new LineMaterial({ color: 0x00ffff, linewidth: 0.002 }),
      );
	  line2.geometry.setPositions(linePosition) // 设置点坐标数组
      scope.scene.add(line2);

动态改变线的长度

下面的写法在three.js 111的版本是支持,升级到117之后版本就不支持了

scope.line2.geometry.maxInstancedCount = scope.line2.geometry.attributes.instanceStart.data.count; // 弃用

还有一种解决方案,每次点列表更新,都删除原来的线,重新画一条线

const line2 = new Line2() // 省略写法
scope.scene.remove(scope.line2);
scope.scene.add(line2);
scope.line2 = line2
3 回复

楼主你好,请问那个圆的扩散动画是通过什么做的啊

@guodong 画个球面,在requestAnimation中控制球的大小缩放,实现动画效果

@guodong 球面的效果画了三个,嵌套的效果

回到顶部