would you mind sharing the repo or a minimal repro repo? That would help a lot to test out specific settings

do you mean in the video ? I don't have it I have a scene with a just three cubes in it

This is what I have currently, I'm testing three primitive models, where swipe right and left should shift them on position in the x. here's the code and I'll inculde a video of the scene

their y position is there it should have been .5 to be above the ground but ignore that

Thanks for the code. Can’t you change just the camera position instead of changing the rotation? You save 3 positions of the camera (target & position) and then just set the position and target of the current camera ref to the next saved positions when moving the camera

What did you found about snap positions with threejs and react?

this will not create the effect you see in the first video

the error is in the index but i can't figure it out

Why not? Instead of moving the whole scene, the camera will just move. I can show you can example (with camera move) in one scene if you want to see if it’s possible

post it please

I said that because when you look this video you will notice the rotation of the shirts, and the stability of the three columns behind it

I'm trying to replicate this effect

I think in the video he didn't rotate the camera he rotated just the shirts

this seems like easier option also

As you can see there are multiple heads (in your case multiple t-shirts) and just the camposition and cam target is changed. You can see a smooth "move" effect to preview the new head (in my case)

looks cool but I can't imagine how the 3 cloumns in the background will behave, if I rotated the camera to the right you be looking at the columns side

can you share the code by the way

thx. Send me a .glb with these objects inside it and I will show you how it would look like when doing it with them. It shouldn't be a difference

It's to complex to share the whole code to this. What I am doing is bascially just calling the setLookAt method from the CameraControls from react three drei to the new location. Inside my code it looks like this:

cameraControlRef.current.setLookAt(camPosition[0], camPosition[1], camPosition[2], camTarget[0], camTarget[1], camTarget[2], true);

cool

my problem isn't with the camera movement and postion my problem is with these three columns behind the shirts

this is the column

you mean that it will change his material & lighting?

btw while checking your thread you created a 2 hour headache for me, because my sql query wasnt correctly written. Now it is, but it was hell...

just use prisma

I used to write queries, it's not productive

no forget about the material and lighting thing in the column, I mean, when you rotate the camera you will be looking at the sides of the columns not the front

that wouldnt solve this problem

I am using drizzle and it's also an ORM like prisma is

yeah I know it

I have no idea what u r talking about 💀

okay the camera at the begining of the scene is positioned at [0,0,0] and thus you see the font side only of these three columns in the back of the shirts when you rotate the camera (your idea) instead of rotating the shirts you will not be looking at the front side of the columns you get it ?

Ahhhh now I understood! In my case the pillars wont move, because they are in a different block. So the camera would rotate to the next and the pillars stays the same in my example

yeah tha't will not work in my case

I was able to move the objects with dragging

but still no way near this effect

the drag function isn't on the models themselves it's on the component holder all the models

but is he making that effect that when you are swipping to right the models moves slowly with you and at some point it sets still to perfectly center at pos.x = 0

for me it looks like a seperate file that checks the current drag and if there is a drag, then move it a bit to the drag and if there is no drag, move it to the selected element 🤔
Very interesting effect ✨

yeah it's adidas

Hmmmm

so something like (while dragging) move component itself it the drag and on release set the closest shirt to x = 0 to x= 0 right?

how about the rotation

it's a simple move in x position effect how's he making the movement tho

the models are set like this from a top view

these rectangles are shirts haha

I just checked their page and it looks like they using portals for the background (ex: https://codesandbox.io/p/sandbox/threejs-portal-effect-rcsg0?file=%2Findex.html)

They also using the rig effect for the mouse (or any other effect that using lerp)

what's a portal

I found something

it's the same idea in this website but this website uses scroll instead of swipe

here's the repo

he's using threejs directly not r3f

this website is killing my browser because of the updating element on page 💀

Normally its easy to convert it 🤔

yeah so slow

but works 🥸

if it works it works 🥸

haha noooo please dont create it like that xD
I thought u want this cool effect

I'm just trying to figure out the effect, the most reasonalbe solution is that when you swipe the models move with the swipe but when you release your finger the closest shirt gets centered in the middle now the question is how do you make not only move in x postion but also rotate

it sounds like there might be a way to use snap points. These snap points snap each t-shirt to the nearest t-shirt. I just checked the apple website on how they do their snap points and they have an objects for it:

{
    "phi": 0,
    "theta": 180,
    "label": "front-top",
    "threshold": 45
}

what are these field tho

good question. The label is pretty simple. The threshold sounds like a threshold when to snap to that point. phi and theta are rotation values. In this case it's from the iphone model, that you can customize. Front top is the top of the front page. So 180 is a degree for the rotation of the front and the phi is the rotation of the x axis I guess

how do you make the transition from point to point with scroll for example

isn't there a lib for it?

I don't think people create the math each time doesn't make sense

The CameraControl would do that for me. Like I would only call the setLookAt function and the camera moves (and animates) automatically. And because I would change the camera, the camera would do the animation stuff

I think I figured it out

tell me if you want the code I will mark the thread as solved

Yea, let me see how you done it

and remember, if it works. it's correct

wow! So much duplication, but as you said:

if it works. it's correct

🤣