伙计们帮忙，我有一个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);
});
}
})
答案 0 :(得分：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
答案 1 :(得分：0)
尝试一下..希望这可以解决您的问题
var vectors = result.map((vector) => new BABYLON.Vector3(vector[0], vector[1], vector[2]));
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline([BABYLON.Vector3.Zero(), ...vectors], 60);
谢谢。
答案 2 :(得分：0)
大家好，我认为这是一个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();
});