[threejs] render order problem and filled attachment

klaude

Hello,

i've faced 2 issues.
so need a help.

1. z order problem.
I know It's more applicable with Pixi.js drawing 2D character.
But I choose Threejs as expandible for the future.
So, Problem is attachment images got tangled with several characters on same z position.

there is a concept like SortingGroup in unity.
https://docs.unity3d.com/Manual/SortingGroup.html

but i don't know how to do in threejs.

ps. i'm using below code for screen parallel view in render function.

skeletonMesh.quaternion.copy( camera.quaternion );

2. attachment bound box is shown.

i think it follows with multiple atlas images.

like a attached image, you can see white rectangle around attachment.

it appears when 2 skeleton meshes are overlapping and disappears when z gap is enough between 2 meshes.

Thanks for reading.

Klaude -

Mario

You can not render overlapping triangles on the same z-position in a 3D renderer I'm afraid. You'll have to offset them slightly on the z-axis. I would also highly recommend to use a 2D engine like pixi.js instead of Three.js unless you also want 3D objects to be rendered.