How to give a "carousel-slider" look to an arc-rotate camera?

[hit2501]

Hi, I have a scene with 4 models that can be seen through ArcRotateCamera rotation, nothing fancy but I need to give it a shape similar to:

https://www.jqueryscript.net/demo/3D-Rotating-Carousel-Plugin-with-jQuery-three-js-Image-Gallery-Threejs/

Where the sides look a bit crowded showing the model at center with more presence. Is there any way I can achieve it? maybe with somekind of distortion?

Thank you.

[trevordev]

Im not sure I understand, can you provide a playground example of what you have so far? Instead of distortion would it be acceptable to move the models in and out exactly like the way it is done in that link?

[Wingnut]

Girls, beavers, wieners, and crotch-sniffin' dogs - just like the Executive Suite at Trump Tower.    ahem.

Remember when we would smear Vaseline around the outer edges of the camera lens... to get that "blurred-on-the-edges" look?

Yuh, yuh, yuh.  Babylon.VaselineCamera.  heh.  Probably a post-processing effect of some kind, these days.

Ok, I have no solutions.  Waiting for same answer as TrevorDev is.  I just wanted to try-out the comedy. 

[hit2501]

The VaselineCamera doesnt exist?   :'''V

Anyway, I'll prepare more details and get back to you but Trevor's suggestion sounds good, but another problem is that I'm still a noob (after all this time).

Thank you both guys and sorry if my english is broken.

[Wingnut]

I'll get a playground started... what the heck.

https://www.babylonjs-playground.com/#HH1U5#79

Perhaps @trevordev or others would like to advance it, now.

There's an actionManager on each plane, all executing a central pickImage() func when onPointerDown.  But, I don't think that is the correct approach.

I think... create 5 invisible planes which have actionManagers... sitting in-front-of (just barely) the front 5 image-planes.  (in-front-of/front == nearer to camera)

Those 5 invisible-plane actionManagers... have specific duties:

- Far-left plane of the 5 invisible planes... rotate carousel rightward TWO positions (just like 3js example).
- Not-so-far-left plane of the 5 invisible planes... rotate carousel rightward ONE position (just like 3js example).
- Center plane of the 5 invisible planes... no action (or maybe full-screen the picture).
- Not-so-far-right plane of the 5 invisible planes... rotate carousel leftward ONE position (just like 3js example).
- Far-right plane of the 5 invisible planes... rotate carousel leftward TWO positions (just like 3js example).

When the carousel is rotated, the invisible "actionManager-planes" would not move.  They stay in position, and are prepared for further carousel rotating.  Essentially, 5 plane-sized invisible buttons.

Just some thoughts.  If nobody advances this in a day or two, I will do so.  Cool project... I like it.  3D presentation of 2D media... good stuff.

[Wingnut]

Aww heck... let's code-up the spinRight() and spinLeft() animation funcs. 

https://www.babylonjs-playground.com/#HH1U5#80

Ok, now I'm on vacation.  ?  I got a bunch of new maps for MudRunner... and I'm SO addicted to that game (simulator).  I was addicted to Tonka trucks and mud... as a child, too.  Vrroooom!

[hit2501]

I understand, I can perfectly work with that. Thank you Wingnut ? . And sorry for my delayed reply, some health issues left me out of the game

[Wingnut]

Welcome back, h2501!  Sorry to hear about the health problems.  I hope they are gone, now.

[coolroar]

 

billboardMode? 

Added
plane.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;

line 98

https://www.babylonjs-playground.com/#HH1U5#81

 

[Wingnut]

Yeah, good idea, @coolroar!   But, according to the 3js demo that was reffed in the first post,  the camera doesn't move/pan.

The functionality appears to be... click on any picture... to bring it to the front (without cam pan).

That's why I put an actionManager on each plane, and included some simple spin-carousel funcs in my PG.

I really like the way your version... looks/acts, though.

Hit2501 had another request that still needs addressing.  He wanted some blurring/distortion on the side pictures... but keep the chosen/centered picture... clear.

I'm not sure HOW to accomplish that one.  SSAO/fisheye, I guess.

[coolroar]

I'm being a newby, too lazy to study actionManager now, so looking for easy cheats:

fog?

Added fog stuff at lines 61 .. 66

https://www.babylonjs-playground.com/#HH1U5#82

 

[JunkYardRobotBoy]

Hi guys

Trying to figure out how to get this to work dynamically based on the number of images in the URL List.

I have a working playground here to have a look at here: https://www.babylonjs-playground.com/#4SQW1J forked from the amazing work from @coolroar and @Wingnut

Only been using Babylon JS for a few days. I'm an animator/3D artist so getting my feet wet with Babylon JS.

I've done this before in after effects and even flash back in the day but am stuck here.

Thanks for your help!

[Guest]

Please post your question on the new forum:
https://forum.babylonjs.com/