title: How to fit object inside canvas in three js
body: <p>I'm currently using <a href="https://threejs.org/" rel="nofollow noreferrer">threejs</a> library to create 3d objects, but unfortunately I cannot fit the object inside the canvas. It's always overflowing outside the canvas if the object is a bit long. Please see my code in <a href="https://jsfiddle.net/jonjieviduya/wLkme1cz/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  <p><strong>Script</strong></p>
  <pre><code>import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'
  
  function generate3DBox(selector, angle, boxDepth, boxWidth, boxHeight) {
      
      let allowedAngles = [
          'standard-0',
          'standard-90',
          'turn-up-0',
          'turn-up-90',
          'turn-side-0',
          'turn-side-90'
      ]
    
      if(allowedAngles.indexOf(angle) &lt; 0) {
          console.log(&quot;Angle is incorrect&quot;)
          return false
      }
  
      const canvas = document.querySelector(selector)
      const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
  
      const canvasWidth = canvas.getBoundingClientRect().width
      const canvasHeight = canvas.getBoundingClientRect().height
      const minSize = Math.min(...[boxDepth, boxWidth, boxHeight])
      const maxSize = Math.max(...[boxDepth, boxWidth, boxHeight])
    
      const aspect = canvasWidth / canvasHeight
      const fov = 75
      const near = 0.1
      const far = 1000
    
      let cameraZoom = 1
      let cameraPosition = {
          left: canvasWidth / -2,
          right: canvasWidth / 2,
          top: canvasHeight / 2,
          bottom: canvasHeight / -2
      }
  
      const camera = new THREE.OrthographicCamera(
          cameraPosition.left,
          cameraPosition.right,
          cameraPosition.top,
          cameraPosition.bottom,
          near,
          far
      )
  
      camera.position.z = maxSize + minSize
      camera.zoom = cameraZoom
  
      camera.updateProjectionMatrix()
  
      const scene = new THREE.Scene()
      scene.background = new THREE.Color(0xe0e0e0)
  
      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)
  
      const material = new THREE.MeshBasicMaterial({ color: 0xff4500 })  // greenish blue
  
      const cube = new THREE.Mesh(geometry, material)
  
      var edge = new THREE.EdgesGeometry(cube.geometry)
      var edgeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 1 })
      var wireframe = new THREE.LineSegments(edge, edgeMaterial)
  
      scene.add(cube, wireframe)
  
      function animate() {
          requestAnimationFrame(animate)
  
          let rotationX = 0
          let rotationY = 0
          let rotationZ = 0
  
          if(angle == 'standard-0') {
              rotationX = 0.60
              rotationY = -0.80
              rotationZ = 0
          }
          
          if(angle == 'standard-90') {
              rotationX = 0.60
              rotationY = 0.80
              rotationZ = 0
          }
          
          if(angle == 'turn-up-0') {
              rotationX = -1.20
              rotationY = 0
              rotationZ = 0.80
          }
          
          if(angle == 'turn-up-90') {
              rotationX = -1.20
              rotationY = 0
              rotationZ = -0.80
          }
  
          if(angle == 'turn-side-0') {
              rotationX = 0.60
              rotationY = -0.60
              rotationZ = -1.60
          }
          
          if(angle == 'turn-side-90') {
              rotationX = 0.60
              rotationY = 0.60
              rotationZ = -1.60
          }
  
          cube.rotation.x = rotationX
          cube.rotation.y = rotationY
          cube.rotation.z = rotationZ
          
          wireframe.rotation.x = rotationX
          wireframe.rotation.y = rotationY
          wireframe.rotation.z = rotationZ
  
          renderer.render(scene, camera)
      }
    
      animate()
  }
  
  generate3DBox('.standard-0', 'standard-0', 50, 45, 65)
  generate3DBox('.standard-90', 'standard-90', 50, 45, 65)
  generate3DBox('.turn-up-0', 'turn-up-0', 50, 45, 65)
  generate3DBox('.turn-up-90', 'turn-up-90', 50, 45, 65)
  generate3DBox('.turn-side-0', 'turn-side-0', 50, 45, 65)
  generate3DBox('.turn-side-90', 'turn-side-90', 50, 45, 65)
  
  </code></pre>
  <p><strong>Output needed</strong>
  <img src="https://i.imgur.com/tcbfOJE.png"></p>