Is there any Best-Practice of "Heroes Selector"?

Questions
1

As in some game,

heros
heros1216Ă—1074 70.7 KB

there is a list of candidate heroes.
When I interact with the chosen one (the red zone), then center model will rotate itself;
When I interact with the others (the green zone), I can slide the list to choose the pre hero or the next one.

One solution what I thought may work like:

<swiper>
    <swiper-slide>   scene_1   </swiper-slide>
    <swiper-slide>   scene_2   </swiper-slide>
    <swiper-slide>   scene_3   </swiper-slide>
    <swiper-slide>   scene_4   </swiper-slide>
</swiper>

Each slide create a THREE.Scene() and add a model into it.
When slide to next one, create a new scene and pre-load the following models ( like: scene_5, scene_6)

Obviously, this solution has a bad performance.

other solution what I thought is:

create only one scene, and add models into this scene.

use OrbitControls to controller.
in this solution, I can rotate the chosen hero independently.
The whole list will rotate by interact.

So, I’m searching the best practise of this kind problem.

2

I’d suggest to use one THREE.Scene with several models in it.

In case there is performance or memory issues with having several models together, I’d keep only the central hero as a 3D model. The rest could be just planes with photographs of the heroes in some heroic postures, of course.

2 Likes
3

Conceptually you’re most way there, syntactically you’d ideally be looking at View if using r3f components or scissor test if using plain three, depending on your usage ofc…

1 Like
4

Thanks for your advice.
I’ll search and learn something about “scissor test”.

5

Yes
I though about usinge a list of model before.
The “pic, pic, model, pic, pic” list maybe a good idea.

1 Like