use SceneGraph

src/script.js

@@ -18,7 +18,8 @@ const scene = new THREE.Scene()
 // Objects
 
 const tireGeometry = new THREE.TorusGeometry(.7, .2, 16, 100)
-const carGeometry = new THREE.BoxGeometry()
+const carHeightGeometry = new THREE.BoxGeometry(1,2,3)
+const carFlatGeometry = new THREE.BoxGeometry(6,0.5,3)
 
 // Materials
 
@@ -36,43 +37,34 @@ carMaterial.color = new THREE.Color(0xb1fbcb)
 
 // Mesh
 
-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)
+// This is the root mesh all other meshes will be added to
+const carHeightMesh = new THREE.Mesh(carHeightGeometry, carMaterial)
+carHeightMesh.name = "Car High Mesh"
+scene.add(carHeightMesh)
 
-const carFrontMesh = new THREE.Mesh(carGeometry, carMaterial)
-carFrontMesh.name = 'Car Front Mesh'
-carFrontMesh.position.set(1.2,1.2,0)
-carFrontMesh.scale.set(3,0.6,2.5)
-scene.add(carFrontMesh)
-
-const carBackMesh = new THREE.Mesh(carGeometry, carMaterial)
-carBackMesh.name = 'Car Back Mesh'
-carBackMesh.position.set(-1.5,1.5,0)
-carBackMesh.scale.set(3,1.25,2.5)
-scene.add(carBackMesh)
+const carFlatMesh = new THREE.Mesh(carFlatGeometry, carMaterial)
+carFlatMesh.name = 'Car Flat Mesh'
+carHeightMesh.add(carFlatMesh)
 
 const tireMesh1 = new THREE.Mesh(tireGeometry, tireMaterial)
 tireMesh1.name = 'Tire 1 Mesh'
-tireMesh1.position.set(-2,0,1)
-scene.add(tireMesh1)
+tireMesh1.position.set(-2,-1.2,1)
+carHeightMesh.add(tireMesh1)
 
 const tireMesh2 = new THREE.Mesh(tireGeometry, tireMaterial)
 tireMesh2.name = 'Tire 2 Mesh'
-tireMesh2.position.set(2,0,1)
-scene.add(tireMesh2)
+tireMesh2.position.set(-2,-1.2,-1)
+carHeightMesh.add(tireMesh2)
 
 const tireMesh3 = new THREE.Mesh(tireGeometry, tireMaterial)
 tireMesh3.name = 'Tire 3 Mesh'
-tireMesh3.position.set(-2,0,-1)
-scene.add(tireMesh3)
+tireMesh3.position.set(2,-1.2,-1)
+carHeightMesh.add(tireMesh3)
 
 const tireMesh4 = new THREE.Mesh(tireGeometry, tireMaterial)
 tireMesh4.name = 'Tire 4 Mesh'
-tireMesh4.position.set(2,0,-1)
-scene.add(tireMesh4)
+tireMesh4.position.set(2,-1.2,1)
+carHeightMesh.add(tireMesh4)
 
 // Lights
 
@@ -95,9 +87,8 @@ scene.add(pointLightBlue)
 const gui = new dat.GUI();
 
 [
-    carFrontMesh,
-    carMiddleMesh,
-    carBackMesh,
+    carFlatMesh,
+    carHeightMesh,
     tireMesh1,
     tireMesh2,
     tireMesh3,
@@ -166,10 +157,16 @@ controls.maxPolarAngle = Math.PI / 2;
 /**
  * Render
  */
+
+const clock = new THREE.Clock()
+
 const tick = () => {
      // Render
     renderer.render(scene, camera)
 
+    // Update Objects
+    carHeightMesh.rotation.y = 0.5 * clock.getElapsedTime()
+
     // Call tick again on the next frame
      window.requestAnimationFrame(tick)
 }