Desired Outcome:
The goal is to create an animation where a line moves from the center of the screen to the current position of the mouse pointer.
Issue Encountered:
This animation only functions properly on Windows operating systems.
I have created a simplified example on Codepen to demonstrate the problem:
https://codepen.io/ascheschleier/pen/qBLeRzN
While it works fine on Windows, it fails to run on macOS. When running the same code directly in a browser (Safari or Chrome) on a Mac system, the following error arises:
GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call.
After researching the error and consulting various sources, it appears to be related to a buffer length issue. I attempted adjusting the Buffer sizes at Lines 36 and 55 within the code, but without success.
As I am still learning three.js, I am unsure if my approach is correct. The positions = new Float32Array method holds the start and endpoint (x,y,z), so the size should be 6. Meanwhile, the
threeBufferPosition = new THREE.BufferAttributeI seek assistance in identifying the root cause of the buffer size discrepancy, or any other potential sources of the error.
UPDATE: Below is the code snippet from the Codepen example provided:
// JavaScript code here