在three.js中，如何动态的更新 Line2

写在前面

在 three.js 中，你想创建一个线模型，如果你使用 Line 以及对应材质 LineBasicMaterial 的线宽属性 lineWidth，是无效的，无法得到一个有宽度的线条。

在 three.js 中要实现一个有宽度的线条，推荐使用 Line2。如下：

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


const geometry = new LineGeometry()
geometry.setPositions([0, 0, 0, 10, 10, 10, 20, 20, 10])
const material = new LineMaterial({
    
    
  // 设置分辨率
  resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
  // 颜色
  color: 0xff0000,
  // 线宽度
  linewidth: 2
})

let line2 = new Line2(geometry, material)

scene.add(line2)

---

如何动态的更新这条线呢？

使用 Line2 实现一条有宽度的线条后，如何动态的修改或者更新这条线呢？

这里分两种情况：1、仅修改颜色，或者宽度；2、修改线条长度或者形状

仅修改颜色，或者宽度

line2.material.linewidth = 5
line2.material.color.set(0xffff00)
line2.material.needsUpdate = true

修改线条长度或者形状

这种情况稍微复杂一点，不能通过直接修改 geometry 属性来实现。

方法一、动态修改Line2中的某一段的起点和终点

创建 Line2 时可以传入多个点位，但 Line2 的实现方式是相邻两个点之间组成一个小线段，所以方法一如下：

line2.geometry.attributes.instanceStart.setY(0, 50); // 修改第1个小线段的起点点位的Y值
line2.geometry.attributes.instanceEnd.setY(0, 50); // 修改第1个小线段的终点点位的Y值
line2.geometry.attributes.instanceStart.needsUpdate = true;
line2.geometry.attributes.instanceEnd.needsUpdate = true;

方法二、传入新的点位数组，更新整个Line2

但是新传入的点位数组要与创建 Line2 传入的点位数组长度保持一致，传多了也没用。

// 传多了也没用
let points2 = [ // 创建line2时，传入的是3个点，所以这里也传入3个点
  -10,10,0,
  -10,0,0,
  0,10,0
]
line2.geometry.setPositions(points2);

方法三、自定义，随意更新Line2

这种方式可以对原来创建的 line2 进行任意的形状和点位的修改并更新。

line2.geometry.dispose() // 销毁原来的集合体
let newPositions = [
  -10,10,0,
  -10,0,0,
  0,10,0,
  10,0,0,
  10,10,0,
  15,0,0,
  20,0,0
]

// 创建新的几何体替换原来的，实现任意更新
line2.geometry = new LineGeometry().setPositions(newPositions)

—————————— 【正文完】——————————

前端学习交流群，想进来面基的，可以加群： 832485817，685486827；

写在最后： 约定优于配置 —— 软件开发的简约原则

——————————【完】——————————

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
微信： miracle421354532

更多学习资源请关注我的微信…好吗