THREE.LineSegments - geometry.needsUpdate is not updating

Question

Hi I cannot get my THREE.LineSegments to update using geometry.needsUpdate. I have a quick animation that, with each iteration, draws one side of a square, starting on the left upright and then going round in a clockwise motion and drawing each side one by one. I'm using tweenmax to animate it as it is part of a larger animation so I've removed a lot of the superfluous scripting. With each iteration the side array updates it's values [x,y,z,x,y,z] so that the position of the side should change. I can see in my console that the side array is updating and the values are changing but my THREE.LineSegments does not and therefore all I am getting is one upright line. Can anyone tell me how to update it please? Here is the code:

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);

score 0 · Answer 1 · answered Sep 14 '22 at 08:18

0

geometry.needsUpdate = true

It should be:

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

You update individual buffer attributes, not the entire geometry.

answered Sep 14 '22 at 08:18

Mugen87

28,829
4
27
50

Nope I swapped mine for yours, nothing happened. – cannon303 Sep 14 '22 at 12:50
Any chances to demonstrate the issue with a live example? https://jsfiddle.net/7u84j6kp/ – Mugen87 Sep 14 '22 at 17:57
Unfortunately I cannot get it working with the latest gsap on jsfiddle. I'm not very good at jsfiddle really. I hoped there would be a simple answer to this but unfortunately I've drawn a blank. Will have to rethink it. – cannon303 Sep 15 '22 at 19:44

THREE.LineSegments - geometry.needsUpdate is not updating

1 Answers1