CODEWITHSUNDEEP
javascriptplotthree.jssurface
schlenger
schlenger

Reputation: 1567

Interpolated surface in Three.js

Hi folks,

I've got a question belongig surfaces in Three.js: I got a bunch of Vec3 Points and want want to interpolate a surface through them. While searching, I stumbeled across beziers (three.js bezier - only as lines) and what looked more like I was searching : three.js Nurbs. I've tried to reconstruct the code, but the documentation was terrible (pages like this) and I didn't get how everything worked by reconstructing the code...

So here's the question: Is there any easy way to get a shape out of my calculated points? (I would still be happy, if it's not interpolated).

Thank you guys!

Mat

Edit: What I want to acchieve is a surface plot. I stumbeled across http://acko.net/blog/making-mathbox/ but it's way too big for my needs...

Upvotes: 0

Views: 3223

Answers (1)

schlenger
schlenger

Reputation: 1567

After some try and error I found a solution: add a plane and than transform the single vertices.

// need to setup 'step', 'xStart', 'xEnd', 'yStart', 'yEnd'

// calc 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;

// add a plane and morph it to 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();

// calc y value for every vertice
for ( var i = 0; i < size; i ++ ) {
    // calculate the current values
    // http://stackoverflow.com/questions/11495089/how-to-get-the-absolute-position-of-a-vertex-in-three-js
    var vector = mesh.geometry.vertices[i].clone();
    vector.applyMatrix4( 
        mesh.matrixWorld
        );
    // set them into the scope
    scope.x = vector.x + posX;
    scope.y = vector.z + posZ;
    // calculate point and write it in a temp array
    data[i] = math.eval(term, scope);
}

// push the new vertice data
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
    geometry.vertices[ i ].y = data[ i ];
}

// update the new normals
geometry.computeFaceNormals();
geometry.computeVertexNormals();

// add to scene
scene.add( mesh );

Only issue is that it is not working for non static functions like tan(x). This snippet is using math.js to calc the term.

Greetings Mat

Upvotes: 2

Related Questions