CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiber
Max
Max

Reputation: 937

React three fiber update mesh matrix after rotating parent group

thanks for taking the time to look at my question.

I'm using Threejs with react-three-fiber. I am trying to attach small boxes to both sides of a mesh. I get the position for the box mesh from the raycaster.

My problem is that after I rotate the parent group, the matrix of the t-shirt mesh seems to be reversed. As far as I understand, the ray caster works based on this matrix. I did experiment with updateMatrix() and updateMatrixWorld() but with confusing results.

What would be the standard way to update the child matrix after rotating a group like this? Any help would be greatly appreciated.

Here is an illustration of my problem. Note that the red mouse helper disappears after flipping because it is now positioned on the opposite side.

enter image description here

This is the component structure of the scene.

return (
        <a.group rotation={flipModelAnimation.rotation} ref={groupRef}>
            <mesh
                ref={modelRef}
                geometry={glb}
            >
                <meshStandardMaterial attach="material" color="orange" />
            </mesh>
            {event && <MouseHelper event={event} />}
            <Decals decals={decalArray} />
        </a.group>
    );

Upvotes: 1

Views: 1353

Answers (1)

Max
Max

Reputation: 937

Ok, so this was quite simple once I saw it... I put the mouse helper inside of the group I was rotating, so naturally, it would now appear on the backside. So not because of a wrong matrix. I didn't think the mouse helper itself was important so I originally didn't even include it in the code sample. I added it now to make the problem and solution clear.

Upvotes: 1

Related Questions