Simple curved plane


Discovering threejs since one month with an Oculus. Wow. WOW. Seem’s i found a really great toy for the rest of my addict dev life.

I already made some basic stuff successfully. I’m learning three, i dev vanillia js since a long time. I found a lot of answers in discourse, google, doc …

I’m using the dev branch of threejs (because i’d like to understand how gui.dat in vr mode is working without a raytracer :slight_smile: )

My question is :

how to draw a simple plane (or rectangle) curved, like a curved screen ? (the texture may be a canvas or a video or a webcam stream)

I found some code playing with vertices, but probably because of the three version i’m using,
planegeometry don’t provide vertices array attributes. I didn’t test with previous version. The texture part with video is ok, just wondering how can i curve this plane like a curved TV

Thank you !

I’m trying to curve the rectangles

Just use SphereGeometry, and play with the phiLength, thetaStart, and thetaLength parameters to get the curved sphere segment that you desire.


1 Like

Thank you @marguizzo

After playing with your suggestion, I’m definitively looking for another way, i.e planebuffergeometry with modified vertices or something like that.

To bend/distort a plane is not that hard, having desired radius and limiting angles. :slight_smile:
What have you tried?

@prisoner849 thank you.

Got it

const geometry = new THREE.PlaneGeometry(16/10, 9/10, 16, 16);
const positions = geometry.attributes.position;

const axis = new THREE.Vector3(0, 1, 0);
const axisPosition = new THREE.Vector3(-2, 0, 2);
const vTemp = new THREE.Vector3(0, 0, 0);
let lengthOfArc;
let angleOfArc;

for (let i = 0; i < positions.count; i++){
	vTemp.fromBufferAttribute(positions, i);
	lengthOfArc = (vTemp.x - axisPosition.x);
  	angleOfArc = (lengthOfArc / axisPosition.z);
  	vTemp.setX(0).setZ(-axisPosition.z).applyAxisAngle(axis, -angleOfArc).add(axisPosition);
  	positions.setXYZ(i, vTemp.x, vTemp.y, vTemp.z);

It give the result i want. Need to fix initial position/rotation.

But lookat camera position give a bad result :frowning:

Any chance to provide an editable live code example, that demonstrates the issue? jsfiddle, codepen etc.

Hi @prisoner849

While i was preparing a minimal code for you, i’ve found the solution.

Here is the result:


Next step i’m working on: make a generic function planeCurve(plane, z)

I tried to make one :slight_smile:

function planeCurve(g, z){
  let p = g.parameters;
  let hw = p.width * 0.5;
  let a = new THREE.Vector2(-hw, 0);
  let b = new THREE.Vector2(0, z);
  let c = new THREE.Vector2(hw, 0);
  let ab = new THREE.Vector2().subVectors(a, b);
  let bc = new THREE.Vector2().subVectors(b, c);
  let ac = new THREE.Vector2().subVectors(a, c);
  let r = (ab.length() * bc.length() * ac.length()) / (2 * Math.abs(ab.cross(ac)));
  let center = new THREE.Vector2(0, z - r);
  let baseV = new THREE.Vector2().subVectors(a, center);
  let baseAngle = baseV.angle() - (Math.PI * 0.5);
  let arc = baseAngle * 2;
  let uv = g.attributes.uv;
  let pos = g.attributes.position;
  let mainV = new THREE.Vector2();
  for (let i = 0; i < uv.count; i++){
  	let uvRatio = 1 - uv.getX(i);
    let y = pos.getY(i);
    mainV.copy(c).rotateAround(center, (arc * uvRatio));
    pos.setXYZ(i, mainV.x, y, -mainV.y);
  pos.needsUpdate = true;


1 Like

lol ! excellent !

I took your code and i’ve put a link on this page. Very interesting for learning purpose, thank you !

So. My next step is to project multiple curved rectangles aligned horizontaly but following a cylinder geometry, with 8 rectangles max per horizontal, 4 horizontal max, 32 participants max. Starting point here (sphere geometry, for learning) : Planes on Sphere

What’s your goal? Any explanatory picture?

No serious goal, pure experiences. Investigating/learning three, xr, oculus. The possibilities make me crazy. Challenging myself (math …)

Currently it’s seem’s that i’m about to code something like 3D UI, video conf room. Then, transform it into sandbox to play with immersive mode and keyboard/mouse behavior. No man’s sky demystification using threejs, sound nice !