add orbit controls

src/script.js

@@ -51,6 +51,7 @@ scene.add(ambientLight)
 const pointLight = new THREE.PointLight(0xffffff, 0.1)
 pointLight.position.set(2,3,4)
 pointLight.intensity = 0.3
+
 scene.add(pointLight)
 
 // Debug GUI
@@ -88,10 +89,6 @@ const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1,
 camera.position.set(0,0,2)
 scene.add(camera)
 
-// Controls
-// const controls = new OrbitControls(camera, canvas)
-// controls.enableDamping = true
-
 /**
  * Renderer
  */
@@ -102,6 +99,15 @@ const renderer = new THREE.WebGLRenderer({
 renderer.setSize(sizes.width, sizes.height)
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
 
+// Controls
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+controls.dampingFactor = 0.25;
+controls.screenSpacePanning = false;
+controls.minDistance = 1;
+controls.maxDistance = 5;
+controls.maxPolarAngle = Math.PI / 2;
+
 /**
  * Render
  */
@@ -111,8 +117,10 @@ const tick = () => {
     const elapsedTime = clock.getElapsedTime()
 
     // Update objects
-    tireMesh.rotation.y = .5 * elapsedTime
-    carMiddleMesh.rotation.y = .5 * elapsedTime
+
+    // TODO: commented out because of controls
+    // tireMesh.rotation.y = .5 * elapsedTime
+    // carMiddleMesh.rotation.y = .5 * elapsedTime
 
      // Render
     renderer.render(scene, camera)