How to read a txt file and pass the values to Vector3 in Three.js

Questions
,
1

I have a txt file looks like

data.txt:
0.5231 0.256 0.351
0.5
0.002
0.156 0.125 0.879
0.254 0.35 0.356
0.5
0.2321
0.215 0.364 0.159

I want to load ‘data.txt’ to my WebGL demo and stores the values in two Vector3 Arrays and two FLOAT Arrays,

var arr0 = new Array(2);
var arr1 = new Array(2);
var arr2 = new Array(2);
var arr3 = new Array(2);

And the values in these arrays could be

arr0[0] = [0.5231, 0.256, 0.351];
arr1[0] = 0.5；
arr2[0] =0.002；
arr3[0] =[0.156 0.125 0.879];
arr0[1] =[0.254 0.35 0.356];
arr1[1] =0.5；
arr2[1] =0.2321；
arr3[1] =[0.215 0.364 0.159];

I use THREE.FileLoader() to load the txt file and try to read the data to the arrays. My code looks like

        var arr0 = new Array(2);
        var arr1 = new Array(2);
        var arr2 = new Array(2);
        var arr3 = new Array(2);
        for (var i = 0; i < 2; i++) {
          arr0[i] = new THREE.Vector3();
          arr1[i] = 0.5;
          arr2[i] = 0.5;
          arr3[i] = new THREE.Vector3();
        }

function init()
{
// ......
     new THREE.FileLoader().load('data.txt',
      function (data) {
        var tmp = data.split('\n');
        for (var i = 0; i < 16; i++)
        {
          var t0 = tmp[i * 4];
          var t1 = tmp[i * 4+1];
          var t2 = tmp[i * 4+2];
          var t3 = tmp[i * 4+3];
          var ttt0 = t0.split(' ').map(parseFloat);
          arr0[i] = new THREE.Vector3(ttt0[0],ttt0[1],ttt0[2]);
          arr1[i] = parseFloat(t1);
          arr2[i] = parseFloat(t2).toFixed(6);
          var ttt1 = t3.split(' ').map(parseFloat);
          arr3[i] = new THREE.Vector3(ttt1[0], ttt1[1], ttt1[2]);
          
         // first log 
          console.log('tt0 '+ttt0[0] + ' ' +ttt0[1] + ' '+ttt0[2] + ' ');
         // second log
          console.log('arr0'+ arr0[i].x + ' ' +arr0[i].y+ ' ' +arr0[i].z);      
        }
        
      });
      // third log
      console.log('arr0[1] ' + arr0[1].x + ' ' +arr0[1].y+ ' ' + arr0[1].z + ' ');
//......
}

My problem is that when I log(arr0) the information in the function load() (i.e. the second log), I can see that arr0[i] has values.

However, when I log(arr0[1]) outside the function load()(i.e. the second log), it shows that arr0[1] 0 0 0.

I want to know why I cannot pass data to the arrays, and how to solve it.

Thanks.

2

Because cant load fast then u run console log.

var arr0 = new Array(2);
        var arr1 = new Array(2);
        var arr2 = new Array(2);
        var arr3 = new Array(2);
        for (var i = 0; i < 2; i++) {
          arr0[i] = new THREE.Vector3();
          arr1[i] = 0.5;
          arr2[i] = 0.5;
          arr3[i] = new THREE.Vector3();
        }


function init()
{
// ......
     new THREE.FileLoader().load('data.txt',
      function (data) {
        var tmp = data.split('\n');
        for (var i = 0; i < 16; i++)
        {
          var t0 = tmp[i * 4];
          var t1 = tmp[i * 4+1];
          var t2 = tmp[i * 4+2];
          var t3 = tmp[i * 4+3];
          var ttt0 = t0.split(' ').map(parseFloat);
          arr0[i] = new THREE.Vector3(ttt0[0],ttt0[1],ttt0[2]);
          arr1[i] = parseFloat(t1);
          arr2[i] = parseFloat(t2).toFixed(6);
          var ttt1 = t3.split(' ').map(parseFloat);
          arr3[i] = new THREE.Vector3(ttt1[0], ttt1[1], ttt1[2]);
          
         // first log 
          console.log('tt0 '+ttt0[0] + ' ' +ttt0[1] + ' '+ttt0[2] + ' ');
         // second log
          console.log('arr0'+ arr0[i].x + ' ' +arr0[i].y+ ' ' +arr0[i].z);      
        }
        show();
      });
      // third log
      
//......
}

function show(){
    console.log('arr0[1] ' + arr0[1].x + ' ' +arr0[1].y+ ' ' + arr0[1].z + ' ');
}
3

Thanks for your reply. I modified my code following your instruction. Now it can print the value of arr0[1].

However, when I want to use arr0 to be the position of two sphere objects and show them on screen. The spheres will at the position (0, 0, 0). It seems that I still do not pass values to these arrays.

My code now looks likes:

var sceneScreen;
var arr0 = new Array(2);
        var arr1 = new Array(2);
        var arr2 = new Array(2);
        var arr3 = new Array(2);
        for (var i = 0; i < 2; i++) {
          arr0[i] = new THREE.Vector3();
          arr1[i] = 0.5;
          arr2[i] = 0.5;
          arr3[i] = new THREE.Vector3();
        }

function show(){
    console.log('arr0[1] ' + arr0[1].x + ' ' +arr0[1].y+ ' ' + arr0[1].z + ' ');
}
function init()
{
// ......
     new THREE.FileLoader().load('data.txt',
      function (data) {
        var tmp = data.split('\n');
        for (var i = 0; i < 16; i++)
        {
          var t0 = tmp[i * 4];
          var t1 = tmp[i * 4+1];
          var t2 = tmp[i * 4+2];
          var t3 = tmp[i * 4+3];
          var ttt0 = t0.split(' ').map(parseFloat);
          arr0[i] = new THREE.Vector3(ttt0[0],ttt0[1],ttt0[2]);
          arr1[i] = parseFloat(t1);
          arr2[i] = parseFloat(t2).toFixed(6);
          var ttt1 = t3.split(' ').map(parseFloat);
          arr3[i] = new THREE.Vector3(ttt1[0], ttt1[1], ttt1[2]);
          
         // first log 
          console.log('tt0 '+ttt0[0] + ' ' +ttt0[1] + ' '+ttt0[2] + ' ');
         // second log
          console.log('arr0'+ arr0[i].x + ' ' +arr0[i].y+ ' ' +arr0[i].z);      
        }
        //third log
       show();
      });
     //....
      sceneScreen = new THREE.Scene();
 for (var j = 0; j < 2; j++) {
var geometry = new THREE.SphereGeometry(1, 20, 20);
          var tmpe = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0xDC143C }));
          tmpe.position.set(arr0[j].x, arr0[j].y, arr0[j].z);
          tmpe.scale.set(arr2[j], arr2[j], arr2[j]);

          // fourth log
          console.log('arr0['+j+'] '+arr0[j].x+' ' + arr0[j].y+' ' +arr0[j].z)
          sceneScreen.add(tmpe);
}
}

When I call the fourth log function, it shows arr0[0] 0 0 0 and arr0[1] 0 0 0. And I only get a sphere lies in the position (0, 0, 0) of the screen.

It seems that I still cannot pass the txt values to the arrays. How can I solve it? Does I need to load the txt file before my function init()?

Thanks for your help.

4 
var sceneScreen;
var arr0 = new Array(2);
        var arr1 = new Array(2);
        var arr2 = new Array(2);
        var arr3 = new Array(2);
        for (var i = 0; i < 2; i++) {
          arr0[i] = new THREE.Vector3();
          arr1[i] = 0.5;
          arr2[i] = 0.5;
          arr3[i] = new THREE.Vector3();
        }

function init()
{
// ......
     new THREE.FileLoader().load('data.txt',
      function (data) {
        var tmp = data.split('\n');
        for (var i = 0; i < 16; i++)
        {
          var t0 = tmp[i * 4];
          var t1 = tmp[i * 4+1];
          var t2 = tmp[i * 4+2];
          var t3 = tmp[i * 4+3];
          var ttt0 = t0.split(' ').map(parseFloat);
          arr0[i] = new THREE.Vector3(ttt0[0],ttt0[1],ttt0[2]);
          arr1[i] = parseFloat(t1);
          arr2[i] = parseFloat(t2).toFixed(6);
          var ttt1 = t3.split(' ').map(parseFloat);
          arr3[i] = new THREE.Vector3(ttt1[0], ttt1[1], ttt1[2]);
          
         // first log 
          console.log('tt0 '+ttt0[0] + ' ' +ttt0[1] + ' '+ttt0[2] + ' ');
         // second log
          console.log('arr0'+ arr0[i].x + ' ' +arr0[i].y+ ' ' +arr0[i].z);      
        }
        //third log

console.log('arr0[1] ' + arr0[1].x + ' ' +arr0[1].y+ ' ' + arr0[1].z + ' ');

      sceneScreen = new THREE.Scene();
 for (var j = 0; j < 2; j++) {
var geometry = new THREE.SphereGeometry(1, 20, 20);
          var tmpe = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0xDC143C }));
          tmpe.position.set(arr0[j].x, arr0[j].y, arr0[j].z);
          tmpe.scale.set(arr2[j], arr2[j], arr2[j]);

          // fourth log
          console.log('arr0['+j+'] '+arr0[j].x+' ' + arr0[j].y+' ' +arr0[j].z)
          sceneScreen.add(tmpe);
}

      });
     //....

}