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. 線の長さまたは形状を変更する場合の 2 つの状況があります。

色または幅のみを変更する

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

線の長さや形状を変更する

この状況はもう少し複雑で、ジオメトリ属性を直接変更することでは実現できません。

方法 1: Line2 の特定のセグメントの始点と終点を動的に変更する

Line2 を作成するときに複数の点を渡すことができますが、Line2 の実装では、隣接する 2 つの点の間に小さな線分を形成するため、最初の方法は次のようになります。

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;

方法 2: 新しい点配列を渡し、Line2 全体を更新します。

ただし、新しく渡されるポイント配列の長さは、Line2 の作成時に渡されるポイント配列の長さと一致している必要があります。それ以上渡しても無駄です。

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

方法 3: 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
WeChat： miracle421354532

さらに学習リソースが必要な場合は、私の WeChat をフォローしてください...いいですか?