Fatal编程技术网
  • javascript/
  • Javascript 需要从嵌套数组创建向量数组

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

javascript arrays vector

Javascript 需要从嵌套数组创建向量数组,javascript,arrays,vector,Javascript,Arrays,Vector,伙计们，我有一个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

伙计们，我有一个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);

        });
      }
    })

window.onload=function（）{
document.querySelector（'input[type=“file”]”）。addEventListener（'change'，function（）{
var files=this.files；
对于（var i=0；i
假设CSV解析为一个数组，如[[1,2,3]，[4,5,6]，…]，您可以使用该代码完成您想要的任务

var arr = result.map(v => new BABYLON.Vector3(v[0], v[1], v[2]));
它实质上获取了
结果
数组的每个元素，并使用数组指示的3个坐标将其替换为新向量

试试这个..希望这能解决您的问题

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

大家好，我认为这是一个for循环问题，它现在渲染样条曲线，但它到处都是它的原因，我在for循环中有代码行，它生成样条曲线，所以从技术上讲，它生成样条曲线1.3k倍LOl，但如果我在渲染场景时将这些线移到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();
    });

var canvas=document.getElementById（“renderCanvas”）；//获取canvas元素
var engine=new BABYLON.engine（canvas，true）；//生成巴比伦3D引擎
/*******添加“创建场景”功能******/
var createScene=函数（）{
//创建场景空间
var场景=新巴比伦。场景（引擎）；
scene.clearColor=新巴比伦.Color3（.5.5.5）；
//摄像机
var camera=新巴比伦。ArcRotateCamera（“camera1”，0,0,0，新
巴比伦。矢量3（0，0，-0），场景；
摄像机。设置位置（新巴比伦。矢量3（0，0，-300））；
照相机.附件控件（画布，真实）；
var light=新巴比伦。半球光（“light1”，新巴比伦。矢量3（1，0.5，
0），场景）；
光照强度=0.7；
var spot=新巴比伦。聚光灯（“spot”，新巴比伦。矢量3（25，15，-10），新
巴比伦。矢量3（-1，-0.8,1），15,1，场景）；
spot.diffuse=新巴比伦色3（1,1,1）；
spot.specular=新巴比伦色3（0,0,0）；
斑点强度=0.8；
var向量；
var catmullRom；
var-catmullrom样条；
var showAxis=功能（大小）{
var makeTextPlane=函数（文本、颜色、大小）{
var dynamicTexture=新巴比伦。dynamicTexture（“dynamicTexture”），50，场景，
正确的）；
dynamicTexture.hasAlpha=true；
dynamicTexture.drawText（文本，5,40，“粗体36px Arial”，颜色，“透明”，
正确的）；
var plane=new BABYLON.Mesh.CreatePlane（“TextPlane”，大小，场景，true）；
plane.material=新巴比伦标准材质（“TextPlaneMeterial”，场景）；
plane.material.backFaceCulling=假；
plane.material.specularColor=新巴比伦色3（0,0,0）；
plane.material.diffuseTexture=动态纹理；
返回平面；
};
var axisX=BABYLON.Mesh.CreateLines（“axisX”，[
新巴比伦.Vector3.Zero（），新巴比伦.Vector3（大小，0,0），新
巴比伦。矢量3（尺寸*0.95,0.05*0），
新巴比伦。矢量3（尺寸，0，0），新巴比伦。矢量3（尺寸*0.95，-0.05*，
0)
](现场),；
axisX.color=新巴比伦.Color3（1,0,0）；
var xChar=makeTextPlane（“X”，“红色”，大小/10）；
xChar.position=新巴比伦矢量3（0.9*尺寸，-0.05*尺寸，0）；
var axisY=BABYLON.Mesh.CreateLines（“axisY”[
新巴比伦。矢量3。零（），新巴比伦。矢量3（0，大小，0），新巴比伦。矢量3（
-0.05*尺寸，尺寸*0.95,0），
新巴比伦。矢量3（0，尺寸，0），新巴比伦。矢量3（0.05*尺寸，尺寸*0.95，
0)
](现场),；
axisY.color=新巴比伦.Color3（0,1,0）；
var yChar=makeTextPlane（“Y”，“绿色”，大小/10）；
yChar.position=新巴比伦矢量3（0,0.9*尺寸，-0.05*尺寸）；
var axisZ=bylon.Mesh.CreateLines（“axisZ”[
新巴比伦。矢量3。零（），新巴比伦。矢量3（0，0，大小），新巴比伦。矢量3（
0，-0.05*尺寸，尺寸*0.95），
新巴比伦。矢量3（0，0，大小），新巴比伦。矢量3（0，0.05*大小，大小*
0.95)
](现场),；
axisZ.color=新巴比伦.Color3（0,0,1）；
var zChar=makeTextPlane（“Z”，“蓝色”，大小/10）；
zChar.position=新巴比伦矢量3（0,0.05*尺寸，0.9*尺寸）；
};
showAxis（50）；
var advancedTexture=
BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI（“UI”）；
var button1=BABYLON.GUI.Button.CreateSimpleButton（“but1”，“测试按钮”）；
按钮1.width=“150px”
按钮1.height=“40px”；
按钮1.color=“白色”；
按钮1.top=“-325px”；
按钮1.left=“-425px”；
按钮1.转弯半径=10；
按钮1.background=“蓝色”；
button1.onPointerUpObservable.add（函数（）{
摄像机。设置位置（新巴比伦。矢量3（0，0，-100））；
});
advancedTexture.addControl（对接