Hello, I'm having trouble updating my THREE.LineSegments using geometry.needsUpdate. In my animation, I am drawing a square side by side in a clockwise motion with each iteration. Even though I can see that the values of the side array are changing correctly in the console, the actual visualization does not update. Any advice on how to fix this issue would be greatly appreciated. Below is the relevant code snippet:
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 () {
// Update side positions based on iteration number
if (i === 0){
side[0] = 0
side[1] = 0
side[2] = 0
side[3] = 0
side[4] = 1
side[5] = 0
i++
} else if (i === 1){
side[0] = 0
side[1] = 1
side[2] = 0
side[3] = 1
side[4] = 1
side[5] = 0
i++
} else if (i === 2){
side[0] = 1
side[1] = 1
side[2] = 0
side[3] = 1
side[4] = 0
side[5] = 0
i++
} else if (i === 3){
side[0] = 1
side[1] = 0
side[2] = 0
side[3] = 0
side[4] = 0
side[5] = 0
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);