So aktualisieren Sie Line2 in three.js dynamisch

schreibe vorne

In three.js möchten Sie ein Linienmodell erstellen. Wenn Sie Line und die Linienbreiteneigenschaft lineWidth des entsprechenden Materials LineBasicMaterial verwenden, ist diese ungültig und Sie können keine Linie mit Breite erhalten.

Um eine Linie mit Breite in three.js zu implementieren, wird empfohlen, Line2 zu verwenden. wie folgt:

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)

---

Wie aktualisiere ich diese Zeile dynamisch?

Wie kann ich die Linie dynamisch ändern oder aktualisieren, nachdem ich Line2 zum Implementieren einer Linie mit Breite verwendet habe?

Hier gibt es zwei Situationen: 1. Ändern Sie nur die Farbe oder Breite; 2. Ändern Sie die Länge oder Form der Linie.

Ändern Sie nur die Farbe oder Breite

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

Ändern Sie die Linienlänge oder -form

Diese Situation ist etwas komplizierter und kann nicht durch direktes Ändern des Geometrieattributs erreicht werden.

Methode 1: Ändern Sie den Startpunkt und den Endpunkt eines bestimmten Segments in Zeile2 dynamisch

Beim Erstellen von Linie2 können mehrere Punkte übergeben werden. Die Implementierung von Linie2 besteht jedoch darin, ein kleines Liniensegment zwischen zwei benachbarten Punkten zu bilden. Daher lautet die erste Methode wie folgt:

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;

Methode 2: Übergeben Sie ein neues Punktarray und aktualisieren Sie die gesamte Linie2

Die Länge des neu übergebenen Punktarrays muss jedoch mit der Länge des Punktarrays übereinstimmen, das beim Erstellen von Linie2 übergeben wurde. Es ist sinnlos, mehr zu übergeben.

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

Methode 3: Line2 nach Belieben anpassen und aktualisieren

Auf diese Weise kann die ursprünglich erstellte Linie2 in jeder Form und Punktposition geändert und aktualisiert werden.

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)

—————————— [Ende des Textes] ——————————

Front-End-Lernaustauschgruppe. Wenn Sie an persönlichen Vorstellungsgesprächen teilnehmen möchten, können Sie der Gruppe beitreten: 832485817 , 685486827 ;

Zum Schluss geschrieben: Konvention ist besser als Konfiguration – das Einfachheitsprinzip der Softwareentwicklung

---------- 【über】 ----------

Meine:
Persönliche Website: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
WeChat: Miracle421354532

Für weitere Lernressourcen folgen Sie bitte meinem WeChat... okay?