Rotate Model Around its Centre no Matter Pan Position

[MatthewKallis]

Hey everyone. Not sure if any of the actual developers of model-viewer are here, but just in case - thanks for this tool. I've been having a lot of fun with it and it looks to work really well.

My need is fairly simple and I have some Javascript skill, but I don't seem to be succeeding and hope someone can point me in the right direction.

I have a model-viewer object which works perfectly. The model loads, I can examine it, and so on. I would like to modify the functionality a bit, though. Hopefully my description below makes sense.

I want to be able to pan around the model, which is of course a default function and works fine. However, I'd like to prevent the default behaviour whereby the camera's focal point moves to a different position on the model. For instance, if our 3D model were a man, I would like the model rotation to always originate from the man's trunk and not reposition itself to his hands or feet, etc. The model should always spin on its own axis independent of camera panning placement.

This feels like it's a really simple function that's not quite clicking for me yet. I've attempted to update both the camera-target and camera-orbit values with an event listener on the camera changing, but I'm not quite succeeding with this and it seems to just fix the camera in the centre of the model repeatedly - close to what I'm after, but not quite, as I want the panning position to be retained.

If necessary I can show what I've attempted, but it's very crude and I feel like there's a very obvious solution to this that I'm not conceptualizing and seeing properly.

Thanks for your time.

[elalish]

I understand what you mean, but I'm having a hard time understanding why you would want your UX to work that way. For instance, if you pan and zoom in on his toe, when dragging the camera the toe will fly off the screen and you'll likely be looking at nothing but white background until you manage to find the direction of the model again. Can you show an example of the kind of 3D UX you're imagining? We were very much intentional in not building ours that way.

[MatthewKallis]

Hi Elalish, thanks for responding.
I fully understand what you mean. It doesn't make sense in that context since you'd "lose" the model.
I am trying to make something quite similar to this website, if you could please take a moment to check it out:
Big Box Collection Example
I think in the context of simple 3D objects like this, game boxes, books, etc. it does make sense of a sort and feels pretty intuitive since there aren't fine 3D details to navigate, but I get why you took the decision to build model-viewer as it is.
Perhaps as I say I'm not conceptualizing this correctly in my mind and it's a lot simpler than I'm presenting it to be?

[elalish]

Funny, that's the first time I've ever seen that done. It has exactly the problem I mentioned too. I would highly recommend using our default controls instead of copying that example. And believe it or not, you'd actually need to dig pretty deep into our code base / scene graph to accomplish that behavior. I have the feeling that UX was actually a coding shortcut someone made, possibly accidentally.

[MatthewKallis]

Very well, sir. Thank you for answering.

[3DBigBoxGames]

Hi, Benjamin from https://bigboxcollection.com here. Just stumbled upon this discussion and thought I'd share how it came to be:

First, I'm not really a coder, so what you see on my site is the result of trial and error and I'm sure I'm doing (some) bits the wrong way around. Don't copy my code 1:1, it's sub-par. Use a lib instead :-)

Also, I did run into the described problem that the model can be "rotated out of sight" if it's zoomed in and panned all the way to a corner right away, but having the boxes rotated around their center at all times was a hard requirement from my side. The reason? Keeping the mental workload for my users while spinning those boxes as low as possible and boosting the fun aspect. For the same reason, rotation on the x axis is limited too, so it's not possible to end up with an upside-down box. Goal is, that my users always know how they'd have to manipulate the box in order to get back to viewing the front (and yeah, double-click/touch does exactly that too).
Panning is limited too but I don't keep track of a pan+zoom+rotation. I'm sure there's a way of tracking if a box is no longer visible and thus nudging the box back into view automatically but this would mean grabbing controls from the user which I definitely want to avoid.

Long story short, it's not pretty, it's far from perfect but it does work in my specific case. In the past 12 months, my boxes have been spun around 270k times and I have not received a single complaint so far. Important UX lesson here: no complaints doesn't mean it's all good, it just means I haven't asked anybody yet ;-)

[MatthewKallis]

Hi Benjamin. Wow, what a strange surprise! I never thought that you'd appear here. :)
Nice to hear from you and hear about your experience. Thanks for chiming in here and good luck with your growing collection.

[3DBigBoxGames]

Thanks to Web 1.0 magic, linking my site results in referrers logged at my end of the line and thus, I materialize :-)
Drop me a line as soon as your project reaches a shareable status; I'm hosting a list of similar 3D box projects on my site and would happily add it.
So, enough hijacking this discussion.