# How to generate/visualize points for a catmullromcurve3?

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.

What example did you use as a base?

There are hills and curves here: CarRacing

Here is a ring: Christmas 2021

Actually it looks like the example was from @prisoner849

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

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