Line2 Not rendering properly

Questions
1

I’m trying to build the drawing Line function with pointerMove and pointerDown Effect.

I noticed that linewidth is not working at the linebasicmaterial.
So I used the line2.

I took the reference for drawing the line from this link.

For updating the line2 attributes from this link

So I created the below code to update the line2 while moving the pointer.

 let instance = line.geometry.attributes.instanceStart.data.array;

  const updateLine = (point) => {

    instance[count * 3 - 3] = point.x;
    instance[count * 3 - 2] = point.y;
    instance[count * 3 - 1] = point.z;
    // console.log("botLayerOnUpdate: ", botLayer)
    let clr = botLayer ? new THREE.Color().set(0x0000ff) : new THREE.Color().set(0xff0000);
    instanceColor[count * 3 - 3] = clr.r;
    instanceColor[count * 3 - 2] = clr.g;
    instanceColor[count * 3 - 1] = clr.b;
    // for (var i = 0; i < geometry.vertices.length; i += 2) {
    //   geometry.colors[i] = new THREE.Color(Math.random(), Math.random(), Math.random());
    //   geometry.colors[i + 1] = geometry.colors[i];
    // }
    // line.geometry.attributes.color.needsUpdate = true;
    // line.geometry.attributes.position.needsUpdate = true;
    // line.geometry.verticesNeedUpdate = true;
    line.geometry.attributes.instanceStart.needsUpdate = true
    line.geometry.attributes.instanceColorStart.needsUpdate = true
    updateWire(point);
  };

The instanceStart seems to be updated when I checked the console.
The problem is the line is not rendering properly while moving the pointer.

Thanks

2

It is hard to guess what you mean by “not rendering properly”. Any chance of sharing an online editable version of your code, so that someone more experienced than me can debug it and experiment with minor modifications?

The code you posted seems to modify only one point of one segment of the line2 object.

3

I figured it out. My line object is making the geometry to center so that the updating attributes.position only is not enough to update the line to the exact pointer move position.

I need to add the line position to the pointer position as well to get the correct position.

Like pointerPos from pointerMove

const newPos = pointerPos.add(line.position)
line.geometry.attributes.position.array[3]= newPos.x;
line.geometry.attributes.position.array[4]= newPos.y;
line.geometry.attributes.position.needsUpdate = true;