Multiple groups passed through a function are translated together, rather than separately

Questions
1

I am attempting to create a reusable functional component in order to minimize code duplication. The purpose of this component is to render an SVG, translate it, and then return the translated SVG to be added to the scene individually. The reusability portion of the function produces the desired results, but every time the function is called all the individually rendered THREE.Group(s) are all translated to the same position, meaning the last ran function is where all of the THREE.Group(s) will be positioned. It is my understanding that Groups are for translating multiple meshes together (which is working as expected), but I figured that Groups added to an array could be translated individually by their index. I have tried several iterations, but all producing the same results.

let svgArray = [];
for(let i =0; i <= 3; i++){
    svgArray[i] = new THREE.Group();
}

renderSVG(state, state.svg0Url, svgArray, 0);
renderSVG(state, state.svg1Url, svgArray, 1);
renderSVG(state, state.svg2Url, svgArray, 2);
renderSVG(state, state.svg3Url, svgArray, 3);

… inside the renderSVG(state, url, svgArray, location) function …

...
{
    ...

    extrudedGeometry.computeBoundingBox();
    extrudedGeometry.computeVertexNormals();
    extrudedGeometry.center();
    extrudedGeometry.translate(0, -state.svgMiddleY, 33.2);
    extrudedGeometry.rotateY( svgRotation );

    const mesh = new THREE.Mesh( extrudedGeometry, material );

    // svgArray[location].add( mesh );         // same results
    svg.add( mesh );
}

svgArray[location] = svg;
  
return svgArray[location] != null ? { ...svgArray[location] } : '';

Any insight as to why the THREE.Group(s) are being translated as one unit instead of individually?

2

That doesn’t sound like the correct behavior but it’s not obvious what the problem might be from the sample you provided.

Is it possible that somewhere you are doing an assignment instead of a .copy, like:

Group.position= instead of group.position.copy( ?

3

And to be clear… a group is a container like all the other nodes… so anything .add( ed to it is expected to move with the parent group. Groups are not just a conceptual grouping.

4

Thank you for your response, @manthrax.

I resolved the issue by applying the final rotation around the desired axis to the group, rather than to the geometries before adding to the group.

1 Like