Fitting 3D Floorplans in a Three.js Canvas

Using hardcoded zoomFactor values based on model dimensions is a workable solution, but there are more dynamic and maintainable approaches for fitting 3D floorplans within your canvas.

Better Approach: Compute Bounding Box

A more robust solution is to compute the bounding box of each model and use that to automatically center and scale the camera view:

JAVASCRIPTCopied
import { useThree, useFrame } from '@react-three/fiber'
import { useEffect, useRef } from 'react'
import { Box3, Vector3 } from 'three'

function ModelFitter({ children }) {
  const groupRef = useRef()
  const { camera, size } = useThree()
  
  useEffect(() => {
    if (groupRef.current) {
      // Create a bounding box for the model
      const boundingBox = new Box3().setFromObject(groupRef.current)
      const center = new Vector3()
      const size = new Vector3()
      
      // Get center and dimensions
      boundingBox.getCenter(center)
      boundingBox.getSize(size)
      
      // Center the model
      groupRef.current.position.x = -center.x
      groupRef.current.position.y = -center.y
      groupRef.current.position.z = -center.z
      
      // Calculate the appropriate camera position
      const maxDim = Math.max(size.x, size.y, size.z)
      const fov = camera.fov * (Math.PI / 180)
      const cameraZ = Math.abs(maxDim / (2 * Math.tan(fov / 2)))
      
      // Position camera to fit the model
      camera.position.z = cameraZ * 1.25 // Add some padding
      camera.updateProjectionMatrix()
    }
  }, [camera])
  
  return <group ref={groupRef}>{children}</group>
}

Using OrbitControls for Better Viewing

You can also combine this with OrbitControls to allow users to navigate around the model:

JAVASCRIPTCopied
import { OrbitControls } from '@react-three/drei'

function FloorplanViewer({ model }) {
  return (
    <Canvas>
      <OrbitControls enableDamping dampingFactor={0.25} />
      <ModelFitter>
        {model}
      </ModelFitter>
    </Canvas>
  )
}

Handling Canvas Resizing

Make sure to handle canvas resizing properly using the setSize method:

JAVASCRIPTCopied
// When the window or container resizes
useEffect(() => {
  const handleResize = () => {
    // Get the container dimensions
    const container = containerRef.current
    const width = container.clientWidth
    const height = container.clientHeight
    
    // Update renderer size
    renderer.setSize(width, height, true)
    
    // Update camera aspect ratio
    camera.aspect = width / height
    camera.updateProjectionMatrix()
  }
  
  window.addEventListener('resize', handleResize)
  return () => window.removeEventListener('resize', handleResize)
}, [])

This approach is more maintainable than hardcoded zoom factors and will automatically adapt to different model sizes and proportions.