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

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.setSize(window.innerWidth, window.innerHeight);
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": [

        url: url,
        method: 'POST',
        contentType: "application/json",
            "Authorization": 'Basic Y2x5bm46SHlkZVZpbCM3MQ==',
        data: JSON.stringify(body),
        dataType: 'json',
        success: function (data) {
        error: function (XHR, textStatus, errorThrown) {
            console.log('File load failed!');
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++){

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

And how does the desired result have to look like?

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.

Any chance to provide an example with samples of data?

1 Like

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

About the triangulation: Three.js + Delaunator

1 Like

Thank you @PavelBoytchev I will have look into it.

1 Like

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