Interpolated surface in Three.js

Question

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...

Do you mean create a terrain mesh from 3D points via Delaunay Triangulation? https://github.com/domlysz/BlenderGIS/wiki/Make-terrain-mesh-with-Delaunay-triangulation — WestLangley, Jul 23 '14 at 14:41
@WestLangley yeah something like this, but would be greater if it's interpolated — schlenger, Jul 24 '14 at 11:44
The surface would be "linearly interpolated" between the points. If you set your vertex normals properly, and used `THREE.SmoothShading`, the surface would appear to be smooth. If you want your surface to be actually smooth, then you would have to create a more detailed mesh using some other method. — WestLangley, Jul 24 '14 at 15:27

score 2 · Accepted Answer · answered Feb 16 '15 at 11:34

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

Thanks for posting this. Any chance you have the whole page as a gist or otherwise floating around online? Would be nice to just run this and break it apart to understand how the whole thing works, w/ Three.js etc — kuanb, Oct 19 '16 at 18:32
Hey, I think I used it here: http://math.zumschlenker.de/ the code is online here: https://github.com/schlenger/math-editor — schlenger, Oct 20 '16 at 10:10

Interpolated surface in Three.js

1 Answers1