Как динамически обновлять Line2 в Three.js

напиши впереди

В Three.js вы хотите создать модель линии. Если вы используете Line и свойство ширины линии lineWidth соответствующего материала LineBasicMaterial, это недопустимо, и вы не можете получить линию с шириной.

Чтобы реализовать линию шириной в 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. Измените длину или форму линии.

Измените только цвет или ширину

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

Изменение длины или формы линии

Эта ситуация немного сложнее, и ее нельзя достичь путем прямого изменения атрибута геометрии.

Способ 1: динамически изменить начальную и конечную точку определенного сегмента в Line2.

При создании Line2 можно передать несколько точек, но реализация Line2 заключается в формировании небольшого сегмента линии между двумя соседними точками, поэтому первый метод выглядит следующим образом:

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 по своему усмотрению.

Таким образом, первоначально созданную линию 2 можно изменить и обновить в любой форме и положении точки.

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: чудо421354532

Чтобы получить дополнительные учебные ресурсы, подпишитесь на мой WeChat... хорошо?