After experimenting and testing various methods, I finally discovered a solution: by adding a plane and then manipulating the individual vertices.
// Setting up 'step', 'xStart', 'xEnd', 'yStart', 'yEnd'
// Calculating the variables
var width = Math.abs(-xStart+xEnd),
height = Math.abs(-yStart+yEnd);
var stepsX = width*step, stepsY = height*step;
var posX = (xStart+xEnd)/2;
var posZ = (yStart+yEnd)/2;
// Adding a plane and morphing it into a function
var geometry = new THREE.PlaneGeometry( width, height, stepsX - 1, stepsY - 1 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
var size = stepsX * (stepsY),
data = new Float32Array( size );
var count = 0, scope = {};
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial( {
side : THREE.DoubleSide,
transparent: true,
shading: THREE.SmoothShading,
opacity : _opacity }));
mesh.updateMatrixWorld();
// Calculating y value for each vertex
for ( var i = 0; i < size; i ++ ) {
// Calculate current values
var vector = mesh.geometry.vertices[i].clone();
vector.applyMatrix4(
mesh.matrixWorld
);
// Set values into scope
scope.x = vector.x + posX;
scope.y = vector.z + posZ;
// Calculate point and store in temp array
data[i] = math.eval(term, scope);
}
// Updating vertex data
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
geometry.vertices[ i ].y = data[ i ];
}
// Update normals
geometry.computeFaceNormals();
geometry.computeVertexNormals();
// Add to scene
scene.add( mesh );
The only limitation is that this method does not work with non-static functions like tan(x). This code snippet utilizes math.js to evaluate the term.
Regards, Mat