Hi,
I’ve created a pointcloud with below code Could you please help me generate planes from them.
Thank you very much.
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
var geometry = new THREE.BufferGeometry();
var positions = [];
for ( var i = 0; i < 300; i ++ ) {
for ( var j = 0; j < 300; j ++ ) ;
var y = j;
var x = i;
var z = 0;
positions.push( x, y, z );
}
}
for ( var i = 0; i < 300; i ++ ) {
for ( var j = 0; j < 100; j ++ ) {
var y = i;
var x = 0;
var z = j;
positions.push( x, y, z );
}
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
var material = new THREE.PointsMaterial( {color: 0xFFFFFF} );
points = new THREE.Points( geometry, material );
scene.add( points );
Can you please explain in more detail your intended outcome? Deriving a best possible amount of planes from a given set of points seems a non-trivial task to me. Do you want to assign each point to a plane?
Hi,
Thanks for your reply. What I’m trying to do here is assign each point to a plane. All the points in the code belongs to 2 planes ( Like a rotated L shape).
:
This is how points are generated. I want plane geometries covering all points (2 planes in this case).
Thanks for your help 
Hi!
Whatever type of geometry you use for points, you already know sizes of planes, 299 x 299 and 299 x 99.
Having this, you can use THREE.PlaneBufferGeometry() to create two planes with given values, then align them as you want.
Or you can use THREE.BufferGeometry() and set positions of vertices from minimum and maximum bounding values of you point systems. It can be so-called “triangle soup” (6 points per plane) or you can use indices (indexed buffer geometry, thus you’ll have just 4 vertices per plane).
There are many ways to achieve the disired result. Which one to use is up to you 
In your specific case, when you align your points in the plane formation, I’d use two plane buffer geometries:
var planeGeom1 = new THREE.PlaneBufferGeometry(299, 299, 298, 298);
planeGeom1.translate(299 * 0.5, 299 * 0.5, 0);
var planeGeom2 = new THREE.PlaneBufferGeometry(99, 299, 98, 298);
planeGeom2.translate(99 * -0.5, 299 * 0.5, 0);
planeGeom2.rotateY(Math.PI * 0.5);
// using the same geometry you can have plane meshes
var mesh1 = new THREE.Mesh(planeGeom1, new THREE.MeshBasicMaterial({color: "orange"}));
var mesh2 = new THREE.Mesh(planeGeom2, new THREE.MeshBasicMaterial({color: "aqua"}));
scene.add(mesh1);
scene.add(mesh2);
// or systems of points
var points1 = new THREE.Points(planeGeom1, new THREE.PointsMaterial({color: "white"}));
var points2 = new THREE.Points(planeGeom2, new THREE.PointsMaterial({color: "orange"}));
scene.add(points1);
scene.add(points2);
2 Likes
Thanks so much for this detailed answer. I will go through each line and will reply if i encounter parts i don’t understand.
Thank you very much
Hi,
Sorry for late reply. Could you please tell me how to create these planes with, THREE.BufferGeometry() and set positions of vertices from minimum and maximum bounding values? Because I already know all max and min vertices points and I could enter them directly that way. So I think that’s the method I should use in my code.
Thanks so much for helping me out. I really appreciate it.
Well, maybe something like that:
function setPlaneGeom(min, max) {
let planeGeom = new THREE.BufferGeometry();
planeGeom.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array([
min.x, max.y, min.z,
max.x, max.y, max.z,
min.x, min.y, min.z,
max.x, min.y, max.z
]), 3 ));
planeGeom.setIndex([0, 2, 1, 2, 3, 1]);
return planeGeom;
}
As usual, it’s from the scratch So it may be overcomplicated and not so flexible 
2 Likes
Hi,
I didn’t ask a new question since you’re already familiar with what I’am trying to do. What I want to do now is add a curved plane surface.I’ve read here, that I need to define vertices of plane like this.
for(var i=0; i<plane.vertices.length/2; i++) {
plane.vertices[2*i].position.z = Math.pow(2, i/20);
plane.vertices[2*i+1].position.z = Math.pow(2, i/20);
}
But cannot add it to my code. Could you please help me out. I've attached the look of intended output (not precise) image file.
[image](https://drive.google.com/file/d/1jbiA8bQn-xBB07L3FaQL4_oppJHtD2_9/view?usp=sharing)
PS : For somereason I cannot attach the image file:(. Please follow the link above to see it.
Thank you very much
Could you clarify, what you want to get in the result?
I’m trying to create a three.js application where I can click on different planes and change their color using dat.gui. Before I do that I need to create curved planes as well as normal planes from points[].
I can create planes with points thanks to you. Now I want to learn how to generate curved surfaces with points
You can take a look at the source code of THREE.CyinderGeometry()/THREE.CylinderBufferGeometry().
Or use those geometries straight, setting thetaStart and thetaLength parameters.
1 Like
Thanks. I did look at THREE.CyinderGeometry() and I could create a curve with thetaLength parameters. But that’s not exactly what I’ after. I want to define the points and create the plane accordingly, like what u did here, just the surface will have a curvature now.
This looks like the perfect solution. But I don’t understand how to modify it to work. Could you please help me make the code in the solution work?
Thank you very much for trying to help me. 
So far, I can’t understand what you want to bend. A whole plane or just its part?
Could you please help me get this answer working?
Oh, got it working. This was the issue
Thank you very much for trying to help 
Just to clarify: after bending, a plane stops to be a plane and becomes a surface.
To be enable to bend a plane, the plane has to have more than one segment along its width or height (or both).
And just out of curiousity: are you familiar with trigonometrical functions, like sin, cos etc., and with trigonometry in general?
For example, you can get angle of bending for specific point, having its x-coordinate and radius of bending.
1 Like
Thanks for the info.
Yes, I’m familiar with trigonometry. I’m gonna need it to add this surface to my scene.
Hi,
I’ve managed to create the curve I need. But it needs to be rotated and moved to fit in. Could you please help me with it?
If the moving/rotating is not possible or hard, is there any way to create the plane in y-z plane instead of x-y plane?
Thank you so much
See the Pen Build a plane from min and max by brabbit640 (@brabbit640) on CodePen.
