How to generate/visualize points for a catmullromcurve3?

Questions
1

I’m generating a track/road using an extruded Plane based on an example by @hofk like so:

import {
  BufferAttribute,
  CatmullRomCurve3,
  PlaneGeometry,
  Vector3,
} from 'three'

const controlPts = [
  new Vector3(0, 0, 0),
  new Vector3(10, 0, 0),
  new Vector3(100, 0, 0),
  new Vector3(0, 0, 10),
]

const curve = new CatmullRomCurve3(controlPts, true)
const spacedPts = curve.getSpacedPoints(1000)
const extrudedGeometry = extrudePath(spacedPts, 1)

function extrudePath(points: Vector3[], depth: number): PlaneGeometry {
  const numOfPoints: number = points.length
  const geometry = new PlaneGeometry(0, 0, numOfPoints - 1, 1)
  const pos = geometry.attributes.position as BufferAttribute

  for (let i = 0, p; i < numOfPoints; i++) {
    p = points[i]
    pos.setXYZ(i, p.x, p.y, p.z + depth)
    pos.setXYZ(i + numOfPoints, p.x, p.y, p.z)
  }

  geometry.computeVertexNormals()
  return geometry
}

I don’t really know how to visualize a set of Vector3 points to create different kinds of roads. For example, what would the set of Vector3 points look like for a traditional oval ring race track? What if I wanted a road that had some twists and turns and hills? Is there a visual editor that can spit out a set of points to pass to the CatmullRomCurve3 constructor? Could you draw something in Figma, export to an SVG and somehow convert the SVG path to a set of points?

I’m not sure where to begin in terms of generating a variety of roads.

2

What example did you use as a base?

There are hills and curves here: CarRacing

Here is a ring: Christmas 2021

3

Actually it looks like the example was from @prisoner849

https://hofk.de/main/discourse.threejs/2022/ExtrudePath/ExtrudePath.html

4

I tried using an EllipseCurve as the initial set of points to pass to the CatmullRomCurve3 constructor, but I’m not sure how to get the width of the plane to be uniform for the entire path. Here is a WIP Codepen: https://codepen.io/cswkim/pen/bGmvNjK