Creating a plane in between 2 points.

Hi Again Guys,

This is not an issue with Three.js but rather a general query. I wish to draw a simple model I have stored as a set of 2d points (x1,y1),(x2,y2). Each pair of points represents a wall which I was drawing.

I was originally doing this by loading in an xml file and filling up an array of vertices which I then drew using a bit of code similar to this -

    gl.bindBuffer(gl.ARRAY_BUFFER, walls3DVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, walls3DVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLES, 0, walls3DVertexPositionBuffer.numItems);

What would you guys recommend I do to draw the same scene in Three.js?

Is it advisable to create a large array of planes and assign each of these a position using my vertices? Or is there a faster way. I am also concerned about the normals and how the will appear with lighting etc…

All help is as always, much appreciated!

Kris.

[mrdoob]

I think this is the code you’re looking for:

var point1 = new THREE.Vector3( Math.random() * 200 - 100, 0, Math.random() * 200 - 100 );
var point2 = new THREE.Vector3( Math.random() * 200 - 100, 0, Math.random() * 200 - 100 );

var vector12 = new THREE.Vector3().copy( point2 ).subSelf( point1 );
var point3 = new THREE.Vector3().copy( vector12 ).multiplyScalar( 0.5 ).addSelf( point1 );

var sphere = new THREE.SphereGeometry( 2, 10, 10 );

var point1mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
point1mesh.position.copy( point1 );
scene.addObject( point1mesh );

var point2mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0000ff } ) );
point2mesh.position.copy( point2 );
scene.addObject( point2mesh );

var plane = new THREE.PlaneGeometry( 1, 1, 1 );

var wall = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) );
wall.position.copy( point3 );
wall.position.y = 50;
wall.scale.x = vector12.length();
wall.scale.y = wall.position.y * 2;
wall.rotation.y = - Math.atan2( vector12.z, vector12.x );
wall.doubleSided = true;
scene.addObject( wall );

[mrdoob]

https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_shapes.html