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 )

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

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;
}

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

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 !

Hey,
I’m using your planed curve code and it works pretty well! I have problems understanding the math though, would you be able to summarize what each section of the code does?
I did some research and found out the following (added comments to the sections):

function planeCurve(planeGeometry ,z){
let p = planeGeometry.parameters;
let hw = p.width * 0.5;
//Here three points are defined, the left edge, right edge and the z bend in y direction.
//These three points touch the circle with radius r at its border.
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);
//formula for finding a circle which contains all points on its edge.
let r = (ab.length() * bc.length() * ac.length()) / (2 * Math.abs(ab.cross(ac)));
//Calculation of the center of the circle. The center of the circle has to be at z - r, because r is the radius of the circle and b is positioned on the edge of the circle with (0,z)
let center = new THREE.Vector2(0, z - r);
//Generates a vector from the central point to the point to the left bottom.
let baseV = new THREE.Vector2().subVectors(a, center);
//And this is where i fail to get your code... Why these calculations?
let baseAngle = baseV.angle() - (Math.PI * 0.5);
let arc = baseAngle * 2;
let uv = planeGeometry.attributes.uv;
let pos = planeGeometry.attributes.position;
let mainV = new THREE.Vector2();
for(let i = 0; i < uv.count; i++){
//Why the 1 - uv.getX(i)? I don't understand it.
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;
return planeGeometry;
}

I created a geogebra link for this to represent it more visually for me: Calculator Suite - GeoGebra
But i don’t understand what the calculations or the angle in general do? The angle alpha is equivalent to your baseV in the code, whereas your angle beta is equivalent to arc. Would be glad for any explanations regarding this!