需要从嵌套数组创建向量数组

Question

伙计们帮忙，我有一个csv文件，可以很好地读取，但是它是一个嵌套的xyz位置数组，现在我该如何使用babylon.js来创建vector3 im数组

window.onload = function() {
    document.querySelector('input[type="file"]').addEventListener('change', function() {
      var files = this.files;

      for (var i = 0; i < files.length; i++) {
        parseCSV(files[i], ',', function(result) {


          console.log(result); // THIS LOGS OUT AN ARRAY OF 1300 OBJECTS EACH ARRAY IS A NUMBER LIKE BELOW (0.01,0.05,0.04) ETC HOW DO I MAKE AN ARRAY like below using this data 

          var arraytest = [BABYLON.Vector3.Zero(),
            new BABYLON.Vector3(100, 20, 30),
            new BABYLON.Vector3(200, 160, 200),
            new BABYLON.Vector3(250, -210, 150),
            new BABYLON.Vector3(305, 300, 0)
          ];

          //SO BASICALLY I WANT TO CREATE THE ARRAY ABOVE^ BUT I WANNA USE the mega array above of my csv file so i can do the below and create a 3d spline arrays are my weakness bois

          var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(arr, 60);
          var catmullRomSpline = BABYLON.Mesh.CreateLines("catmullRom", catmullRom.getPoints(), scene);
          //console.log(result);

        });
      }
    })

Answer 1

假设CSV解析为[[1，2，3]，[4，5，6]，...]之类的数组，则可以使用Array.prototype.map通过代码完成所需的操作

var arr = result.map(v => new BABYLON.Vector3(v[0], v[1], v[2]));

基本上会占用result数组的每个元素，并使用数组指示的3个坐标将其替换为新的Vector

Answer 2

尝试一下..希望这可以解决您的问题

var vectors = result.map((vector) => new BABYLON.Vector3(vector[0], vector[1], vector[2]));
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline([BABYLON.Vector3.Zero(), ...vectors], 60);

谢谢。

Answer 3

大家好，我认为这是一个for循环问题，现在它呈现样条曲线，但是到处都是它的原因，因为我在for循环中拥有使样条曲线的代码行，因此从技术上讲，它使样条曲线的分辨率是LO的1.3k倍但是如果我将这些行移到for循环之外时无法读取数据的属性，因为在我等待dom /窗口加载文件时首先渲染了场景，所以无论如何我都想停止运行场景然后上传一个csv文件，然后它会即时生成一个样条，但是加载的代码顺序似乎存在问题，我在下面发布了完整的内容，有人可以看到解决方法吗？

var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
    var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

    /******* Add the create scene function ******/
    var createScene = function () {

        // Create the scene space
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3( .5, .5, .5);

            // camera
    var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new 
    BABYLON.Vector3(0, 0, -0), scene);
    camera.setPosition(new BABYLON.Vector3(0, 0, -300));
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 
    0), scene);
    light.intensity = 0.7;

    var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new 
    BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
    spot.diffuse = new BABYLON.Color3(1, 1, 1);
    spot.specular = new BABYLON.Color3(0, 0, 0);
    spot.intensity = 0.8;

    var vectors;
    var catmullRom;
    var catmullRomSpline;


    var showAxis = function(size) {
    var makeTextPlane = function(text, color, size) {
    var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, 
    true);
    dynamicTexture.hasAlpha = true;
    dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", 
    true);
    var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
    plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
    plane.material.backFaceCulling = false;
    plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
    plane.material.diffuseTexture = dynamicTexture;
    return plane;
    };

    var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new 
    BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
    new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 
    0)
    ], scene);
    axisX.color = new BABYLON.Color3(1, 0, 0);
    var xChar = makeTextPlane("X", "red", size / 10);
    xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
    var axisY = BABYLON.Mesh.CreateLines("axisY", [
    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( 
    -0.05 * size, size * 0.95, 0), 
    new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( 0.05 * size, size * 0.95, 
    0)
    ], scene);
    axisY.color = new BABYLON.Color3(0, 1, 0);
    var yChar = makeTextPlane("Y", "green", size / 10);
    yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
    var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 
    0 , -0.05 * size, size * 0.95),
    new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0, 0.05 * size, size * 
    0.95)
    ], scene);
    axisZ.color = new BABYLON.Color3(0, 0, 1);
    var zChar = makeTextPlane("Z", "blue", size / 10);
    zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
    };


    showAxis(50); 

    var advancedTexture = 
    BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Test Button");
    button1.width = "150px"
    button1.height = "40px";
    button1.color = "white";
    button1.top = "-325px";
    button1.left = "-425px";
    button1.cornerRadius = 10;
    button1.background = "blue";
    button1.onPointerUpObservable.add(function() {
    camera.setPosition(new BABYLON.Vector3(0, 0, -100));
    });
    advancedTexture.addControl(button1); 

    var button2 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Origin");
    button2.width = "150px"
    button2.height = "40px";
    button2.color = "white";
    button2.top = "-275px";
    button2.left = "-425px";
    button2.cornerRadius = 10;
    button2.background = "green";
    button2.onPointerUpObservable.add(function() {
    camera.setPosition(new BABYLON.Vector3(35, 50, -300));


    });
    advancedTexture.addControl(button2); 


    function parseCSV(file, delimiter, callback) {
    var reader = new FileReader();


    reader.onload = function() {


    var lines = this.result.split('\n');

    var result = lines.map(function(line) {
    return line.split(delimiter);
    });


    callback(result);
    }

    reader.readAsText(file);
    }
    document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('input[type="file"]').addEventListener('change', 
    function() {
    var files = this.files;

    for (var i = 0; i < files.length; i++) {
    parseCSV(files[i], ',', function(result) {

    console.log(result);

        //arr = result.map(v => new BABYLON.Vector3(v[0], v[1], v[2]));

         vectors = result.map((vector) => new BABYLON.Vector3(vector[0], vector[1], 
         vector[2]));
         catmullRom = BABYLON.Curve3.CreateCatmullRomSpline([BABYLON.Vector3.Zero(), 
         ...vectors], 60);

         catmullRomSpline = BABYLON.Mesh.CreateLines("catmullRom", 
         catmullRom.getPoints(), scene); 

         });    
         }

         })

         });           

         return scene;
         };    



         var scene = createScene(); //Call the createScene function


    // Register a render loop to repeatedly render the scene
    engine.runRenderLoop(function () { 
            scene.render();
    });

    // Watch for browser/canvas resize events
    window.addEventListener("resize", function () { 
            engine.resize();
    });