Question

我正在尝试使用csv文件渲染样条线。一切都很好，但是代码底部的for循环是我遇到的问题。我正在加载一个csv文件，我必须等待dom /窗口才能加载。但是，引擎在后台运行，因此当我尝试使用for循环渲染样条线时，它将多次渲染样条线。

在仍然加载到csv中时，如何在超出for循环范围的情况下渲染此样条线？

我在下面发布了完整的代码。

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();
});

CSV文件数据中的样条线渲染次数过多

0 个答案: