三.线段-geometry.needsUpdate未更新

Question

嗨，我无法使用geometry.needsUpdate更新我的THREE.LineSegments。我有一个快速动画，在每次迭代中，绘制正方形的一侧，从左侧垂直开始，然后顺时针旋转，逐个绘制每一侧。我使用tweenmax来制作它的动画，因为它是一个更大的动画的一部分，所以我删除了很多多余的脚本。在每次迭代中，边数组都会更新其值[x，y，z，x，y和z]，这样边的位置就会发生变化。我可以在控制台中看到，边数组正在更新，值也在更改，但我的THREE。线段没有，因此我得到的只是一条直线。有人能告诉我如何更新吗？这是代码：

import './style.css'
import * as THREE from 'three'

const canvas = document.querySelector('canvas.webgl')

const width = canvas.offsetWidth,
height = canvas.offsetHeight;

const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});

renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0x000000);

const scene = new THREE.Scene()
scene.background = new THREE.Color(0x21282a);

const camera = new THREE.PerspectiveCamera(75, width / height)
camera.position.z = 3
scene.add(camera)

const material = new THREE.LineBasicMaterial({
color: 0xff0000
});
//[x,y,z,x,y,z]
const side = [0, 0, 0, 0, 1, 0]

let i = 0
function moveLine(side) {

TweenMax.to(side, 4, {
onUpdate: function () {
if (i === 0){
side[0] = 0 //x
side[1] = 0 //y
side[2] = 0 //z
side[3] = 0 //x
side[4] = 1 //y
side[5] = 0 //z
i++
} else if (i === 1){
side[0] = 0 //x
side[1] = 1 //y
side[2] = 0 //z
side[3] = 1 //x
side[4] = 1 //y
side[5] = 0 //z
i++
} else if (i === 2){
side[0] = 1 //x
side[1] = 1 //y
side[2] = 0 //z
side[3] = 1 //x
side[4] = 0 //y
side[5] = 0 //z
i++
} else if (i === 3){
side[0] = 1 //x
side[1] = 0 //y
side[2] = 0 //z
side[3] = 0 //x
side[4] = 0 //y
side[5] = 0 //z
i=0
}
}
});

}
moveLine(side)

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute(side, 3) );
const segments = new THREE.LineSegments(geometry, material);
scene.add( segments );


const render = () => {
geometry.needsUpdate = true
renderer.render(scene, camera);
console.log(side)
}
TweenMax.ticker.addEventListener("tick", render);

Answer 1

geometry.needsUpdate=true

应该是：

const positionAttribute = geometry.getAttribute('position');
positionAttribute.needsUpdate = true;

更新单个缓冲区属性，而不是整个几何体。