Restricting Camera Movement in Three.js Controls

Based on the available documentation, there are several strategies you can use to prevent users from viewing the underside of your model when using OrbitControls or PointerLockControls:

For OrbitControls

OrbitControls provides several properties that can limit camera movement:

1. Set min/max polar angle limits:

   JAVASCRIPTCopied
   // Restrict vertical rotation (prevents seeing underneath)
   controls.minPolarAngle = Math.PI/4; // 45 degrees from top
   controls.maxPolarAngle = Math.PI/2; // Limit to horizon level (90 degrees)

2. Disable vertical rotation entirely:

   JAVASCRIPTCopied
   controls.enableRotate = true; // Keep rotation enabled
   controls.minPolarAngle = controls.maxPolarAngle = Math.PI/2; // Lock at horizon

3. Limit azimuthal (horizontal) rotation if needed:

   JAVASCRIPTCopied
   controls.minAzimuthAngle = -Math.PI/4; // -45 degrees
   controls.maxAzimuthAngle = Math.PI/4;  // 45 degrees

For PointerLockControls

PointerLockControls is more challenging to restrict since it's designed for first-person navigation. Consider:

1. Implement custom collision detection to prevent movement to positions where the underside would be visible

2. Set camera height constraints to keep the camera above a certain level

3. Limit the vertical look angle:

   JAVASCRIPTCopied
   // You'll need to modify the PointerLockControls implementation
   // or create a wrapper that restricts the pitch angle

Alternative Approaches

1. Use MapControls instead, which is similar to OrbitControls but designed for map-like navigation with more natural restrictions

2. Geometry solution: Remove or simplify the underside geometry of your model if it doesn't need to be seen

3. Custom solution: Create a transparent plane beneath your model that blocks the camera from going underneath

Remember that the specific implementation will depend on your exact requirements and scene setup.