search

google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.92k stars 816 forks source link

Animated reveal entrances #598

Closed pushmatrix closed 3 years ago

pushmatrix commented 5 years ago

I've seen a number of viewers have an option for animated entrances. It has a pretty nice effect of catching someone's eye and showing that it isn't just a static image.

load in

That animation above is pretty intense. It can also be done in a more subtle way: animate in

Maybe somewhere in between those too.

I'm not quite sure what the attribute for this would be. Would we define a start camera orbit, and an end camera orbit? Thoughts?

Would help out with #598 and #498

pushmatrix commented 5 years ago

Just noticed this is duplicate of: https://github.com/GoogleWebComponents/model-viewer/issues/498

cdata commented 5 years ago

@pushmatrix it is a much more illustrative / prettier duplicate though :)

I think the easy near-term thing would be to allow you to disable interpolation between camera-orbit values. This would allow you to easily define your own entrance animation, and run it when the model-visibility event indicates that the model is ready.

Longer term, I think you're right that we want to enable something like this as a built-in thing. Maybe we can have some kind of camera-enter-from attribute or something like that, which specifies an orbital position that the camera should transit from as soon as the model becomes visible?

cc @elalish

elalish commented 5 years ago

I like this idea, but I think if we add this attribute it should also be enabled by default (some kind of default entrance animation) and we should pass it by someone from UX and our existing users to make sure it's good. If we only think a small fraction of users would want it, then probably not worth an attribute. Does the model-visibility event depend on the model being in the user's viewport?

cdata commented 5 years ago

@elalish I think this will depend on how things are configured.

model-visibility first fires when the model is loaded and the poster is no longer obscuring it. When this happens depends on other factors.

If we implement a loading attribute along the lines of what I described here https://github.com/GoogleWebComponents/model-viewer/issues/594#issuecomment-498709135 you would be able to configure when the model is actually loaded (e.g., aggressively vs when in viewport).

elalish commented 5 years ago

Yes, and more importantly, you could use #594 to ensure the entrance animation only happens when the model is really in view. I would probably mark this as dependent on #594 for this reason.

pushmatrix commented 5 years ago

Yeah ensuring entrance anim plays when the model is in view would be rad. Probably the same behaviour with auto-rotate, since scrolling down and seeing a model the is turned 180 degrees is not ideal.

From our initial and limited UX testing, it really drives home the fact that it's a realtime model. It's eye catching, but needs to be done in a subtle way to not make the entrance too flashy.