How to dynamically update Line2 in three.js

write in front

In three.js, you want to create a line model. If you use Line and the line width property lineWidth of the corresponding material LineBasicMaterial, it is invalid and you cannot get a line with width.

To implement a line with width in three.js, it is recommended to use Line2. as follows:

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)

---

How to dynamically update this line?

After using Line2 to implement a line with width, how to dynamically modify or update the line?

There are two situations here: 1. Modify only the color or width; 2. Modify the length or shape of the line.

Modify only the color or width

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

Modify line length or shape

This situation is a little more complicated and cannot be achieved by directly modifying the geometry attribute.

Method 1: Dynamically modify the starting point and end point of a certain segment in Line2

Multiple points can be passed in when creating Line2, but the implementation of Line2 is to form a small line segment between two adjacent points, so the first method is as follows:

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;

Method 2: Pass in a new point array and update the entire Line2

However, the length of the newly passed in point array must be consistent with the length of the point array passed in when creating Line2. It is useless to pass in more.

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

Method 3: Customize and update Line2 at will

In this way, the originally created line2 can be modified and updated in any shape and point position.

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)

—————————— [End of text] ——————————

Front-end learning exchange group. If you want to come in for face-to-face interviews, you can join the group: 832485817 , 685486827 ;

Written at the end: Convention is better than configuration - the simplicity principle of software development

---------- 【over】 ----------

My:
Personal website: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
WeChat: miracle421354532

For more learning resources, please follow my WeChat... okay?