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

**URL:** <https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122>\
**Category:** Questions\
**Tags:** apply, discussion, materials, geometry\
**Created:** [May 3, 2023, 9:07am UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122 "2023-05-03T09:07:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![niranjan\_n](https://avatars.discourse-cdn.com/v4/letter/n/8edcca/32.png) [@niranjan\_n](https://discourse.threejs.org/u/niranjan_n)\
**Post date:** [May 3, 2023, 9:07am UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/1 "2023-05-03T09:07:45Z")

</div>

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.

```js
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()

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 3, 2023, 11:16am UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/2 "2023-05-03T11:16:24Z")

</div>

And how does the desired result have to look like?

---

<div class="post-metadata">

**Author:** ![niranjan\_n](https://avatars.discourse-cdn.com/v4/letter/n/8edcca/32.png) [@niranjan\_n](https://discourse.threejs.org/u/niranjan_n)\
**Post date:** [May 3, 2023, 12:33pm UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/3 "2023-05-03T12:33:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 3, 2023, 12:37pm UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/4 "2023-05-03T12:37:15Z")

</div>

Any chance to provide an example with samples of data?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 3, 2023, 12:41pm UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/5 "2023-05-03T12:41:04Z")

</div>

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](https://en.wikipedia.org/wiki/Delaunay_triangulation) before attempting to build a surface

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 3, 2023, 12:55pm UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/6 "2023-05-03T12:55:01Z")

</div>

About the triangulation: [Three.js + Delaunator](https://discourse.threejs.org/t/three-js-delaunator/4952)

---

<div class="post-metadata">

**Author:** ![niranjan\_n](https://avatars.discourse-cdn.com/v4/letter/n/8edcca/32.png) [@niranjan\_n](https://discourse.threejs.org/u/niranjan_n)\
**Post date:** [May 5, 2023, 5:00am UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/7 "2023-05-05T05:00:07Z")

</div>

Thank you @PavelBoytchev I will have look into it.

---

<div class="post-metadata">

**Author:** ![niranjan\_n](https://avatars.discourse-cdn.com/v4/letter/n/8edcca/32.png) [@niranjan\_n](https://discourse.threejs.org/u/niranjan_n)\
**Post date:** [May 5, 2023, 5:01am UTC](https://discourse.threejs.org/t/creation-of-3d-surface-chart-using-x-y-z-data-values/51122/8 "2023-05-05T05:01:14Z")

</div>

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