Making a Streetcar Follow a Curved Track in Three.js

To make your streetcar follow a curved track and rotate appropriately, you can use Three.js curve classes to define the path and then position and orient the streetcar along that path. Based on your description, I'll provide a solution using the CatmullRomCurve3 class, which is ideal for creating smooth curves through a series of points.

Solution Overview

1. Create a parent object to hold all streetcar parts
2. Define the track path using a curve
3. Move the streetcar along the curve
4. Orient the streetcar to follow the curve's direction

Implementation

Step 1: Group the Streetcar Parts

First, let's create a parent object to hold all streetcar parts, making it easier to move and rotate everything together:

JAVASCRIPTCopied
// Create a parent object for all streetcar parts
const streetcarGroup = new THREE.Group();

// Add all streetcar parts to the group
if (streetcar && streetcar_wf && streetcar_mirror && streetcar_wheel2 && streetcar_wheel1 && streetcar_misc) {
  streetcarGroup.add(streetcar);
  streetcarGroup.add(streetcar_wf);
  streetcarGroup.add(streetcar_mirror);
  streetcarGroup.add(streetcar_wheel1);
  streetcarGroup.add(streetcar_wheel2);
  streetcarGroup.add(streetcar_misc);
  
  // Add the group to the scene
  gltfScene.scene.add(streetcarGroup);
}

Step 2: Define the Track Path

Since you can't easily identify the track in the model, you'll need to manually define the path. You can use CatmullRomCurve3 to create a smooth curve:

JAVASCRIPTCopied
// Define points along the track (you'll need to adjust these to match your track)
const trackPoints = [
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-8, 0, 2),
  new THREE.Vector3(-5, 0, 3),
  new THREE.Vector3(0, 0, 3),
  new THREE.Vector3(5, 0, 2),
  new THREE.Vector3(8, 0, -2),
  new THREE.Vector3(10, 0, -5),
  new THREE.Vector3(8, 0, -8),
  new THREE.Vector3(0, 0, -10),
  new THREE.Vector3(-8, 0, -8),
  new THREE.Vector3(-10, 0, 0)
];

// Create a closed curve from these points
const trackCurve = new THREE.CatmullRomCurve3(trackPoints, true);

Step 3: Visualize the Track (Optional but Helpful)

This step helps you see if your defined curve matches the actual track:

JAVASCRIPTCopied
// Visualize the curve (optional)
const points = trackCurve.getPoints(100);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveObject = new THREE.Line(geometry, material);
test.scene.add(curveObject);

Step 4: Animate the Streetcar Along the Curve

Now, update your animation function to move the streetcar along the curve:

JAVASCRIPTCopied
const animateStreetcar = () => {
  if (streetcarGroup) {
    const time = clock.getElapsedTime();
    
    // Calculate position along the curve (0 to 1)
    // Using modulo to loop around the track
    const t = (time * 0.1) % 1;
    
    // Get the position at point t
    const position = trackCurve.getPointAt(t);
    streetcarGroup.position.copy(position);
    
    // Get the tangent at point t for rotation
    const tangent = trackCurve.getTangentAt(t);
    
    // Calculate the rotation to align with the tangent
    // This assumes the streetcar's forward direction is along the z-axis
    const lookAtPosition = position.clone().add(tangent);
    streetcarGroup.lookAt(lookAtPosition);
    
    // You might need to adjust the rotation based on your model's orientation
    streetcarGroup.rotateY(Math.PI / 2); // Adjust as needed
  }
};

Step 5: Call the Animation Function in Your Render Loop

Make sure to call the animation function in your render loop:

JAVASCRIPTCopied
const animate = () => {
  requestAnimationFrame(animate);
  animateStreetcar();
  renderer.render(test.scene, test.camera);
};

animate();

Complete Solution

Here's how your updated code should look:

JAVASCRIPTCopied
useEffect(() => {
  // Boilerplate Code Omitted 
  // ...
  let loadedModel;
  let streetcar; // colored, 'Object_97'
  let streetcar_wf; // wireframe 'Object_95'
  let streetcar_mirror; // mirrors, Object_91'
  let streetcar_wheel1; // Object_101
  let streetcar_wheel2; // Object_105
  let streetcar_misc; // misc stuff Object_93
  let streetcarGroup; // Parent group for all streetcar parts
  
  const clock = new THREE.Clock();
  
  // Define the track curve
  const trackPoints = [
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(-8, 0, 2),
    new THREE.Vector3(-5, 0, 3),
    new THREE.Vector3(0, 0, 3),
    new THREE.Vector3(5, 0, 2),
    new THREE.Vector3(8, 0, -2),
    new THREE.Vector3(10, 0, -5),
    new THREE.Vector3(8, 0, -8),
    new THREE.Vector3(0, 0, -10),
    new THREE.Vector3(-8, 0, -8),
    new THREE.Vector3(-10, 0, 0)
  ];
  
  const trackCurve = new THREE.CatmullRomCurve3(trackPoints, true);
  
  // Visualize the curve (optional)
  const points = trackCurve.getPoints(100);
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
  const curveObject = new THREE.Line(geometry, material);
  test.scene.add(curveObject);
  
  const glftLoader = new GLTFLoader();
  glftLoader.load('./assets/littlest_tokyo/scene.gltf', (gltfScene) => {
    loadedModel = gltfScene;
    console.log(gltfScene.scene); 
    gltfScene.scene.position.z = 13;
    
    // animate the streetcar by selecting all objs.
    streetcar = gltfScene.scene.getObjectByName('Object_97'); //colored part
    streetcar_wf = gltfScene.scene.getObjectByName('Object_95'); //wireframe
    streetcar_mirror = gltfScene.scene.getObjectByName('Object_91'); //mirrors
    streetcar_wheel1 = gltfScene.scene.getObjectByName('Object_101'); //wheel 1
    streetcar_wheel2 = gltfScene.scene.getObjectByName('Object_105'); //wheel 2
    streetcar_misc = gltfScene.scene.getObjectByName('Object_93'); //misc stuff
    
    // Create a parent group for all streetcar parts
    streetcarGroup = new THREE.Group();
    
    if (streetcar && streetcar_wf && streetcar_mirror && streetcar_wheel2 && streetcar_wheel1 && streetcar_misc) {
      // Add all parts to the group
      streetcarGroup.add(streetcar);
      streetcarGroup.add(streetcar_wf);
      streetcarGroup.add(streetcar_mirror);
      streetcarGroup.add(streetcar_wheel1);
      streetcarGroup.add(streetcar_wheel2);
      streetcarGroup.add(streetcar_misc);
      
      // Add the group to the scene
      gltfScene.scene.add(streetcarGroup);
    }
    
    test.scene.add(gltfScene.scene);
  });
  
  const animateStreetcar = () => {
    if (streetcarGroup) {
      const time = clock.getElapsedTime();
      
      // Calculate position along the curve (0 to 1)
      const t = (time * 0.1) % 1;
      
      // Get the position at point t
      const position = trackCurve.getPointAt(t);
      streetcarGroup.position.copy(position);
      
      // Get the tangent at point t for rotation
      const tangent = trackCurve.getTangentAt(t);
      
      // Calculate the rotation to align with the tangent
      const lookAtPosition = position.clone().add(tangent);
      streetcarGroup.lookAt(lookAtPosition);
      
      // You might need to adjust the rotation based on your model's orientation
      streetcarGroup.rotateY(Math.PI / 2); // Adjust as needed
    }
  };
  
  const animate = () => {
    requestAnimationFrame(animate);
    animateStreetcar();
    renderer.render(test.scene, test.camera);
  };
  
  animate();
  
  // Cleanup function
  return () => {
    // Cleanup code here
  };
}, []);

Adjustments You May Need to Make

1. Track Points: You'll need to adjust the track points to match your actual track. You can do this by:

   • Temporarily adding visible markers at key points along the track
   • Using the scene inspector to get coordinates
   • Iteratively refining the points until the curve matches the track

2. Rotation Adjustment: Depending on how your streetcar model is oriented, you might need to adjust the rotation after the lookAt() call. The example includes a rotateY(Math.PI / 2) which you may need to modify.

3. Speed Adjustment: Change the time * 0.1 value to control the speed of the streetcar.

4. Height Adjustment: If your track has elevation changes, make sure to include the y-coordinate in your track points.

This approach using the CatmullRomCurve3 class provides a flexible way to define and follow complex paths in Three.js, with automatic handling of both position and orientation along the curve.