Como atualizar dinamicamente Line2 em three.js

escreva na frente

Em three.js, você deseja criar um modelo de linha. Se você usar Line e a propriedade de largura de linha lineWidth do material correspondente LineBasicMaterial, ele será inválido e você não poderá obter uma linha com largura.

Para implementar uma linha com largura em three.js, é recomendado usar Line2. do seguinte modo:

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)

---

Como atualizar dinamicamente esta linha?

Depois de usar Line2 para implementar uma linha com largura, como modificar ou atualizar dinamicamente a linha?

Existem duas situações aqui: 1. Modifique apenas a cor ou largura; 2. Modifique o comprimento ou formato da linha.

Modifique apenas a cor ou largura

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

Modificar o comprimento ou a forma da linha

Esta situação é um pouco mais complicada e não pode ser alcançada modificando diretamente o atributo de geometria.

Método 1: modificar dinamicamente o ponto inicial e final de um determinado segmento na Linha2

Vários pontos podem ser passados ​​ao criar a Linha2, mas a implementação da Linha2 é formar um pequeno segmento de linha entre dois pontos adjacentes, então o primeiro método é o seguinte:

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;

Método 2: passe uma nova matriz de pontos e atualize toda a Linha2

No entanto, o comprimento do array de pontos recém-passado deve ser consistente com o comprimento do array de pontos passado ao criar a Linha 2. É inútil passar mais.

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

Método 3: Personalize e atualize Line2 à vontade

Desta forma, a linha2 originalmente criada pode ser modificada e atualizada em qualquer forma e posição de ponto.

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)

————————— [Fim do texto] —————————

Grupo de intercâmbio de aprendizagem front-end. Se quiser participar de entrevistas presenciais, você pode ingressar no grupo: 832485817 , 685486827 ;

Escrito no final: Convenção é melhor que configuração - o princípio da simplicidade do desenvolvimento de software

---------- 【sobre】 ----------

Meu:
Site pessoal: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
WeChat: Miracle421354532

Para mais recursos de aprendizagem, siga meu WeChat... ok?