Reposition instancedMesh's anchor/axis at bottom of object

[FrazierMark]

I've got an instancedMesh array of different sized vertical bars. Currently the axis or anchor of the Mesh is positioned in the center of the object and when they are arranged along the X-axis I get something like this...

Any idea how I could arrange the instancedMesh to have them all level like this....

To get the different sized bars I have been adjusting the scaleY value...

`function arrayLayout(data) {
const numPoints = data.length;

for (let i = 0; i < numPoints; ++i) {
    const datum = data[i];

    datum.x = 0 + i + i;
    datum.y = -5;
    datum.z = 0;
    datum.scaleX = 1;
    datum.scaleY = 1;
    datum.scaleY = randomIntFromInterval(1, 35);
    datum.scaleZ = 1;
}

}`

Here is where I set the matrices...

`function updateInstancedMeshMatrices({ mesh, data }) {
  if (!mesh) return;

  for (let i = 0; i < data.length; ++i) {
    const { x, y, z } = data[i];
    const { scaleX, scaleY, scaleZ } = data[i]

    scratchObject3D.position.set(x, y, z);
    scratchObject3D.rotation.set(0, 0, 0); // cylinders face z direction
    scratchObject3D.scale.set(scaleX, scaleY, scaleZ)
    scratchObject3D.updateMatrix();
    mesh.setMatrixAt(i, scratchObject3D.matrix);
  }

  mesh.instanceMatrix.needsUpdate = true;
}`

and finally this is what I return...

`<instancedMesh
     ref={meshRef} 
     args={[null, null, numPoints]}
     scale={[1, 1, 1]}
     frustumCulled={false}
     onClick={handleClick}
      onPointerDown={handlePointerDown}
     >
    <boxBufferGeometry attach="geometry"  args={[1, 1, 1]} >
      <instancedBufferAttribute
        ref={colorAttrib}
        attachObject={[ 'attributes', 'color' ]}
        args={[colorArray, 3]}
        />
    </boxBufferGeometry>
        <meshStandardMaterial attach="material" 
        flatShading={true} 
        vertexColors={THREE.VertexColors} 
        />
    </instancedMesh>
  );
};

export default InstancedPoints;`

I'm still super new to this, so maybe I'm going about this the wrong way too, so any advice would be welcome. Thanks in advance!

[drcmda]

in three objects are always centred. so cut it in half and move it up one half. the instancedmesh looks a little bit too complex imo, here's one that you could adapt: https://codesandbox.io/s/audio-analyser-dvokj?file=/src/App.js:4269-4832 (the graph component plays in the background behind the statue)