How to Display Multiple Vertex Coordinate Attributes in BufferGeometry

Questions
1

Please help me. I just started learning Three.js and I’m working on an implementation where multiple SVG data are converted into particles and animated. I am able to convert SVG data into particles and obtain the vertex coordinates for each.

My idea was to use setAttribute on BufferGeometry to add the vertex coordinates and then switch between them using vertex shaders for the animation. I plan to use GSAP for the animation switching. However, even though I add the vertex coordinates as attributes and try to display them in the vertex shader, nothing appears.

Any advice would be greatly appreciated.

Here is a part of my implementation code. (Sorry for the messy code)

const setGeometryAttributes = (stage, positionsArray) => {
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute(
    'position1',
    new THREE.BufferAttribute(positionsArray[0], 3)
  );
  geometry.setAttribute(
    'position2',
    new THREE.BufferAttribute(positionsArray[1], 3)
  );

  const material = new THREE.RawShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: uniforms,
    transparent: true,
  });

  const mesh = new THREE.Points(geometry, material);
  stage.scene.add(mesh);
};

Here is an image of the geometry when logged in the console.

image
image792×220 36.1 KB

Any advice or guidance would be greatly appreciated.