CSV into an array

Questions
1

HI,
Does anyone know if there is a way to load the cell contents of a CSV file into Three.js as an array?

Thank you

2
  1. Load the CSV file using JavaScript’s built-in fetch or XMLHttpRequest API.
  2. Parse the CSV data using a library such as Papa Parse or a JavaScript function to convert the CSV string into an array of objects or arrays.
  3. Iterate through the resulting data and create Three.js objects such as Geometry, Material, and Mesh based on the contents of the cells.
  4. Add the Three.js objects to the scene using the scene.add method.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var data;

// Load the CSV file using fetch
fetch('path/to/file.csv')
  .then(response => response.text())
  .then(text => {
    // Parse the CSV data using Papa Parse
    data = Papa.parse(text).data;

    // Iterate through the data and create a cube for each row
    for (var i = 0; i < data.length; i++) {
      var row = data[i];
      var cube = new THREE.BoxGeometry(1, 1, 1);
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var mesh = new THREE.Mesh(cube, material);
      mesh.position.set(row[0], row[1], row[2]);
      scene.add(mesh);
    }
  });

camera.position.z = 5;

var animate = function () {
  requestAnimationFrame( animate );

  renderer.render( scene, camera );
};

animate();

Source ChatGPT, “load the cell contents of a CSV file into Three.js”

2 Likes
3

Brilliant, Thanks for the reply!!!