Camera behaviour similar to standard <model-viewer>

Hi everyone,
I’m fairly new to three.js. What would be good settings for camera and axis etc. to have a simple behaviour as in Google’s standard tag, e.g. rotating around a fixed position in the middle of the displayed object? I just managed to include my 3D object in a very basic script and get the object within view, but user controls are hard to understand. I plan to use this in a shop environment, where the object needs to be viewed from all angles, but this should be easy to handle for users.
Thanks for your comments!

i built a stage component that does that, it centers the model, adds contact shadows, light shadows, good photographic light setup, and an environment map. in my opinion it looks better than model-viewer.

demo: Re-using GLTFs (forked) - CodeSandbox

if you do not use react you can check out the source which gives you a cheatsheet of where to place lights drei/Stage.tsx at e76310f0e385d1e48948a8d6de9b5a44aaa068bc · pmndrs/drei · GitHub

1 Like

Thanks a lot! This seems to be exactly what I was looking for. However, I do not use react and my expertise in three.js is non-existent, so I struggle to extract and copy the relevant functionality to a non-react environment.
E.g. to “center the model”: I guess this is what is defined in both “react.useLayoutEffect” paragraphs. It does not throw errors if I replace “outer.current.position.set(0, 0, 0)” by “scene.position…”, but that is not a correct representation of the “inner” and “outer” concept, obviously, which is somehow defined via react…?
const outer = React.useRef<THREE.Group>(null!)
const inner = React.useRef<THREE.Group>(null!)
Any hint on how to translate this into a standard three.js script would be appreciated.
Thanks again!