Creation of 3d surface chart using x,y,z data values

Questions
, , ,
1

I have the frequency, time and amplitude array values which have been loading using the rest api and i need to create the 3d surface plot using that data values using planeGeometry How can i do it so.

import * as THREE from '../modules/three.module.js'
import { OrbitControls } from "../modules/OrbitControls.js";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
var renderer = new THREE.WebGLRenderer({ antialias: true, resolution: window.devicePixelRatio, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x000)
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 25;
const url = "http://localhost:3000/getdata"
const body = {
    "assetEcn": "H2BPA27",
    "firstRequest": true,
    "dateRange": {
        "fromDate": 1680287400000,
        "toDate": 1682879400000
    },
    "type": 4265,
    "sensors": [],
    "directions": [
        "x"
    ]
}  

   $.ajax({
        async:true,
        url: url,
        method: 'POST',
        contentType: "application/json",
        headers:{
            "Authorization": 'Basic Y2x5bm46SHlkZVZpbCM3MQ==',
        },
        data: JSON.stringify(body),
        dataType: 'json',
        success: function (data) {
            segregateData(data)
        },
        error: function (XHR, textStatus, errorThrown) {
            console.log('File load failed!');
            console.log(errorThrown);
        }
    });
})
function segregateData(data){
    var orgData= data.VibConditionData.harmonics;
    // var orgData = data.harmonics;
    var time = [];
    var amp = [];
    var freq = [];
    for(let i = 0;i<orgData.length;i++){
        time.push(orgData[i].time)
        amp.push(orgData[i].amplitude)
        freq.push(orgData[i].frequency)

    }
    const planeGeometry = new THREE.PlaneGeometry(1,10,19,19);
    console.log(planeGeometry);
    const planeMaterial = new THREE.MeshBasicMaterial({color:"white",wireframe:true});
    const planeMesh = new THREE.Mesh(planeGeometry,planeMaterial)
    scene.add(planeMesh)
    
}
var controls = new OrbitControls(camera,renderer.domElement)
function animate(){
    requestAnimationFrame(animate)
    renderer.render(scene,camera)
}
animate()
2

And how does the desired result have to look like?

3

It does not have a particular shape and should be based on the x coordinates should be based on the frequency data points ,y coordinates should be based on the time data points and z coordinates should be based on amplitude data points.

4

Any chance to provide an example with samples of data?

1 Like
5

My advice is:

  • try to visualize the points in 3D – for example, draw a small cube for each (x,y,z)
  • if the cubes exhibit a grid topology, you can use THREE.PlaneGeometry and adjust its vertices to match the coordinates of the cubes
  • if the topology is not grid, then you might need Delaunay triangulation before attempting to build a surface
6

About the triangulation: Three.js + Delaunator

1 Like
7

Thank you @PavelBoytchev I will have look into it.

1 Like
8

Thank you @prisoner849 I will take it as a reference and post if I had any doubts.