# Create a curved plane surface which dynamically changes its size

**URL:** <https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 16, 2019, 3:39am UTC](https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161 "2019-02-16T03:39:01Z")\
**Posts on this page:** 1\
**Showing post:** 16

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 20, 2019, 8:11am UTC](https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161/16 "2019-02-20T08:11:40Z")

</div>

You can take a separate strip for the centerline and a simple texture.  
 ![20190220-0841-12142](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7e19a4a31a63e72e41ef5646447b2445d93c7a14.png)

Now you can make the stripes dynamic by changing the values in  
` d = [-0.62, -0.6, -0.02, 0.02, 0.6, 0.62]; ( initial).`

You can see how this works in my addons, for example.

But there’s another problem. If the dots are not equidistant, there are different line lengths white.

```
var curve = new THREE.CatmullRomCurve3( [
	new THREE.Vector3( -25, 0.2, -25 ),
	new THREE.Vector3( -24, 0.2, -24 ),
	new THREE.Vector3( -4, 2, -9 ),

```

 ![20190220-0845-48114](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/1f9ce9b1e85100813cbb4d482f0748cfeb2a1036.png)

 ![20190220-0848-01276](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3b4e141c3ec5fe1b80164903abbe07092804b231.png)

One must extend the calculation, e.g. for the uv’s use the possibilities of CatmullRomCurve3 / Curve.  
` .getLength .getSpacedPoints` etc.

This is gonna be a nice racetrack 🛣 , I think.  
🚥🚗 🚙🚐 🚧

I need to take a closer look at this.

* * *

addendum: I looked. It’s quite simple.

The uv calculation shifted backwards and changed:

```
var len = curve.getLength( );
var lenList = curve.getLengths ( ls );

var uvIdxCount = 0;

for ( var j = 0; j < lss; j ++ ) {
		
	for ( var i = 0; i < wss; i ++ ) {

		//g.uvs[uvIdxCount] = j / ls;
		//g.uvs[uvIdxCount + 1] = i / ws;
		
		g.uvs[uvIdxCount] = lenList[j] / len;
		g.uvs[uvIdxCount + 1] = i / ws;
		uvIdxCount += 2;
		
	}
	
}

```

 ![20190220-1831-56794](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f2fa48c43e0978ad0149263506683f69dd712386.png)

---

_[View the full topic](https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161)._