domains / families / design / 3d-orbit-inspect-demo

3d-orbit-inspect-demo

separate

Make a 3D object lean around on hover and open a full inspect view on click. Hover is a damped, bounded camera lean; click lifts the piece off its bench into the hand, where you drag to turn it, coast, dolly with wheel or pinch, and put it back with Esc, click-away or a Close button. Use for product, object, joinery and portfolio pieces in Three.js where a hover orbit and click-to-full-view must not fight each other; use webgl-3d-object for a floating hero mesh with no inspect mode, and 3d-virtual-tour for a camera path through a place.

When to use

• 3D object hover orbit
• click-to-full-view inspect mode
• product and portfolio pieces
• joinery visualization
• Three.js WebGL interaction
• damped camera lean on hover
• drag to turn object in hand
• wheel or pinch dolly zoom

When not to use

• floating hero mesh with no inspect mode
• camera path through a place
• virtual tour walkthroughs
• custom shaders
• OrbitControls usage

Skill page

Source