Search code examples
maththree.jsgraphing

In THREE.js, how can I scale a raw data set so that all points displayed are contained within the dimensions of a plane of given width and height?


I'm using a plane object as the Cartesian plane for a THREE.Points object which contains my data. The vector function used to transform the original set must be able to scale any data set so that the points displayed always fit within the boundaries of the plane. Here is what I have so far:

for(var k=0; k<data.length; k++) {

    points.geometry.vertices.push(

        new THREE.Vector3( //function for the x-coordinate,
                           //function for the y-coordinate,
                           0 )
    );
}

Solution

  • I was able to work out the answer to this one myself. Here is the code:

    for(var k=0; k<data.length; k++) {
    
        points.geometry.vertices.push(
    
            new THREE.Vector3( 
    
                width*((k-(data.length/2))/data.length), //x
    
                height*(data[k]/(2*range)), //y
    
                0 //z
            )
        );
    }