Comment mettre à jour dynamiquement Line2 dans three.js

écrire devant

Dans three.js, vous souhaitez créer un modèle de ligne. Si vous utilisez Line et la propriété de largeur de ligne lineWidth du matériau correspondant LineBasicMaterial, il n'est pas valide et vous ne pouvez pas obtenir une ligne avec une largeur.

Pour implémenter une ligne avec une largeur dans three.js, il est recommandé d'utiliser Line2. comme suit:

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)

---

Comment mettre à jour dynamiquement cette ligne ?

Après avoir utilisé Line2 pour implémenter une ligne avec de la largeur, comment modifier ou mettre à jour dynamiquement la ligne ?

Il y a deux situations ici : 1. Modifier uniquement la couleur ou la largeur ; 2. Modifier la longueur ou la forme de la ligne.

Modifier uniquement la couleur ou la largeur

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

Modifier la longueur ou la forme d'une ligne

Cette situation est un peu plus compliquée et ne peut pas être obtenue en modifiant directement l'attribut de géométrie.

Méthode 1 : modifier dynamiquement le point de départ et le point final d'un certain segment dans Line2

Plusieurs points peuvent être transmis lors de la création de Line2, mais l'implémentation de Line2 consiste à former un petit segment de ligne entre deux points adjacents, donc la première méthode est la suivante :

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éthode 2 : transmettre un nouveau tableau de points et mettre à jour l'intégralité de Line2

Cependant, la longueur du tableau de points nouvellement transmis doit être cohérente avec la longueur du tableau de points transmis lors de la création de Line2. Il est inutile d'en transmettre davantage.

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

Méthode 3 : Personnalisez et mettez à jour Line2 à volonté

De cette façon, la ligne2 créée à l'origine peut être modifiée et mise à jour dans n'importe quelle forme et position de point.

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)

—————————— [Fin du texte] ——————————

Groupe d'échange d'apprentissage front-end. Si vous souhaitez participer à des entretiens en face à face, vous pouvez rejoindre le groupe : 832485817 , 685486827 ;

Écrit à la fin :  La convention vaut mieux que la configuration - le principe de simplicité du développement logiciel

---------- 【sur】 ----------

Mon :
Site personnel : https://neveryu.github.io/neveryu/
Github : https://github.com/Neveryu
WeChat : miracle421354532

Pour plus de ressources d'apprentissage, veuillez suivre mon WeChat... d'accord ?