adjust mesh pos and scale params

src/script.js

@@ -18,7 +18,7 @@ const scene = new THREE.Scene()
 // Objects
 
 const tireGeometry = new THREE.TorusGeometry(.7, .2, 16, 100)
-const carMiddleGeometry = new THREE.BoxGeometry(1.5,1.5,1.5)
+const carGeometry = new THREE.BoxGeometry()
 
 // Materials
 
@@ -26,7 +26,7 @@ const tireMaterial = new THREE.MeshStandardMaterial()
 tireMaterial.metalness = 0.5
 tireMaterial.roughness = 0.4
 tireMaterial.normalMap = tireTexture
-tireMaterial.color = new THREE.Color(0xffffff)
+tireMaterial.color = new THREE.Color(0x888888)
 
 const carMaterial = new THREE.MeshStandardMaterial()
 carMaterial.metalness = 0.5
@@ -36,12 +36,43 @@ carMaterial.color = new THREE.Color(0xb1fbcb)
 
 // Mesh
 
-const tireMesh = new THREE.Mesh(tireGeometry, tireMaterial)
-// scene.add(tireMesh)
-
-const carMiddleMesh = new THREE.Mesh(carMiddleGeometry, carMaterial)
+const carMiddleMesh = new THREE.Mesh(carGeometry, carMaterial)
+carMiddleMesh.name = "Car Middle Mesh"
+carMiddleMesh.position.set(0,1.5,0)
+carMiddleMesh.scale.set(1.8,2.3,2.5)
 scene.add(carMiddleMesh)
 
+const carFrontMesh = new THREE.Mesh(carGeometry, carMaterial)
+carFrontMesh.name = 'Car Front Mesh'
+carFrontMesh.position.set(1.5,1.46,0)
+carFrontMesh.scale.set(3,1,2.5)
+scene.add(carFrontMesh)
+
+const carBackMesh = new THREE.Mesh(carGeometry, carMaterial)
+carBackMesh.name = 'Car Back Mesh'
+carBackMesh.position.set(-1.5,1.46,0)
+carBackMesh.scale.set(3,1,2.5)
+scene.add(carBackMesh)
+
+const tireMesh1 = new THREE.Mesh(tireGeometry, tireMaterial)
+tireMesh1.name = 'Tire 1 Mesh'
+tireMesh1.position.set(-2,0,1)
+scene.add(tireMesh1)
+
+const tireMesh2 = new THREE.Mesh(tireGeometry, tireMaterial)
+tireMesh2.name = 'Tire 2 Mesh'
+tireMesh2.position.set(2,0,1)
+scene.add(tireMesh2)
+
+const tireMesh3 = new THREE.Mesh(tireGeometry, tireMaterial)
+tireMesh3.name = 'Tire 3 Mesh'
+tireMesh3.position.set(-2,0,-1)
+scene.add(tireMesh3)
+
+const tireMesh4 = new THREE.Mesh(tireGeometry, tireMaterial)
+tireMesh4.name = 'Tire 4 Mesh'
+tireMesh4.position.set(2,0,-1)
+scene.add(tireMesh4)
 
 // Lights
 
@@ -56,7 +87,26 @@ scene.add(pointLight)
 
 // Debug GUI
 
-const gui = new dat.GUI()
+const gui = new dat.GUI();
+
+[
+    carFrontMesh,
+    carMiddleMesh,
+    carBackMesh,
+    tireMesh1,
+    tireMesh2,
+    tireMesh3,
+    tireMesh4,
+].forEach(mesh => {
+    let folder = gui.addFolder(mesh.name)
+    folder.add(mesh.position, 'x').step(0.01)
+    folder.add(mesh.position, 'y').step(0.01)
+    folder.add(mesh.position, 'z').step(0.01)
+    folder.add(mesh.scale, 'x').step(0.01)
+    folder.add(mesh.scale, 'y').step(0.01)
+    folder.add(mesh.scale, 'z').step(0.01)
+})
+
 
 /**
  * Sizes
@@ -86,7 +136,7 @@ window.addEventListener('resize', () =>
  */
 // Base camera
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
-camera.position.set(0,0,2)
+camera.position.set(1.5,1.5,3)
 scene.add(camera)
 
 /**
@@ -105,7 +155,7 @@ controls.enableDamping = true; // an animation loop is required when either damp
 controls.dampingFactor = 0.25;
 controls.screenSpacePanning = false;
 controls.minDistance = 1;
-controls.maxDistance = 5;
+controls.maxDistance = 10;
 controls.maxPolarAngle = Math.PI / 2;
 
 /**
@@ -119,7 +169,7 @@ const tick = () => {
     // Update objects
 
     // TODO: commented out because of controls
-    // tireMesh.rotation.y = .5 * elapsedTime
+    // tireMesh1.rotation.y = .5 * elapsedTime
     // carMiddleMesh.rotation.y = .5 * elapsedTime
 
      // Render