Search the Community
Showing results for tags 'scene dispose'.
Found 1 result
-
X.htmlI intend to use Babylon.js for displaying digraphs that are uploaded by the end-user. I've noticed that that the memory grows after each upload (and the rotations and panning are getting slower). Obviously, I have to get rid of the previously loaded graphs, so I've declared scene as a global variable and have included the statement: if (scene != null) scene.dispose(); before creating the next scene. However, if the scene exist, I receive the error "No camera defined" and I have to reload the page. I'm a novice to javascript, babylon.js and 3D - I'm presuming I'm doing something obviously wrong. The error (SCRIPT5022) is in: babylon.2.5.js (12,14463) - Tried to attach the page file, but the uploading is failing with err -200 .... Here is the complete page, erroring statement marked red: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Babylon - Getting Started</title> <script src="babylon.2.5.js"></script> <script src="hand-1.3.7.js"></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; font: verdana; } </style> </head> <body> <script> var fName = '...'; var displayModel; var engine; var xhr; var scene; window.addEventListener('DOMContentLoaded', function () { // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine engine = new BABYLON.Engine(canvas, true); window.addEventListener('resize', function () { engine.resize(); }); } ); // ************************************************************************************************************************************* //http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f function renderApiTest() { var url = "http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f"; xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.setRequestHeader("Content-type", "application/json"); xhr.addEventListener("load", apiComplete, false); /* xhr.addEventListener("error", apiFailed, false); xhr.addEventListener("abort", apiCanceled, false); */ xhr.send(); } function renderFile25D() { var url = "http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f"; xhr = new XMLHttpRequest(); xhr.open("GET", url,true); xhr.setRequestHeader("Content-type", "application/json"); xhr.addEventListener("load", apiComplete, false); xhr.send(); } function renderFile() { alert('Not there yet'); } // ************************************************************************************************************************************* function renderDemo() { var url = "http://borjan5/ArchLS/api/SoaScape3D/RenderDemo"; xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.setRequestHeader("Content-type", "application/json"); xhr.addEventListener("load", apiComplete, false); xhr.addEventListener("error", apiFailed, false); xhr.addEventListener("abort", apiCanceled, false); xhr.send(); } // ************************************************************************************************************************************* function renderBuiltIn() { displayModel = { "Title": "Built-in Data", "Mode": 1, "Applications": [ { "Name": "APPL1", "Form": 0, "Id": 0, "ToolTip": "", "V3": 0, "X": 46.5826874, "Y": 30.3723526, "Z": 0.0 }, { "Name": "APPL2", "Form": 0, "Id": 1, "ToolTip": "", "V3": 0, "X": 91.46761, "Y": 50.6884537, "Z": 36.0399628 }, { "Name": "APPL3", "Form": 0, "Id": 2, "ToolTip": "", "V3": 0, "X": 51.7862473, "Y": 81.5939941, "Z": 36.0399628 } ], "Services": [ { "Name": "SERVICE1", "ProviderId": 0, "Form": 1, "Id": 0, "ToolTip": "", "V3": 0, "X": 50.97662, "Y": 36.7166367, "Z": 6.359515 } ], "ConsumingRelations": [{ "ConsumerId": 1, "ServiceId": 0, "ProviderId": 0 }, { "ConsumerId": 2, "ServiceId": 0, "ProviderId": 0 } ], "DisplayBoundary": { "Form": 0, "X": 69.025146484375, "Y": 55.983173370361328, "Z": 36.039962768554688, "W": 22.442462921142578, "H": 25.610820770263672 }, "LastError": "" }; showDisplayModel(); } // ************************************************************************************************************************************* // ************************************************************************************************************************************* function myUpload() { var file = document.getElementById('9999').files[0]; var ajax = new XMLHttpRequest; var formData = new FormData; formData.append('archimateFile', file); //alert('aa1'); ajax.upload.addEventListener("progress", myProgressHandler, false); //ajax.addEventListener(''); ajax.addEventListener('load', myOnLoadHandler, false); fName = generateUUID(); ajax.open('PUT', 'http://BORJAN5/BAB_DATA/' + fName + '.xml', true); ajax.send(formData); } function generateUUID() { var d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); } var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } function myProgressHandler(event) { //your code to track upload progress var p = Math.floor(event.loaded / event.total * 100); document.getElementById("uuid").textContent = fName + ' ' + p + '%'; } function myOnLoadHandler(event) { // your code on finished upload // document.title = event.target.responseText; document.getElementById("25D").disabled = false; document.getElementById("3D").disabled = false; document.getElementById("2D").disabled = false; // alert('DONE ' + event.target.responseText); document.getElementById("uuid").textContent = ' File uploaded: ' + fName + ".xml"; } function apiComplete(evt) { var data = xhr.responseText; //alert('API DONE: ' + data); displayModel = JSON.parse(data); showDisplayModel(); } function showDisplayModel() { var scene = createSceneAndShow(); engine.runRenderLoop(function () { scene.render(); }); } function apiFailed(evt) { alert("An error occurred while transferring the file."); } function apiCanceled(evt) { alert("The transfer has been canceled by the user."); } // ************************************************************************************************************************************* function createSceneAndShow () { var canvas = document.getElementById('renderCanvas'); if (scene) scene.dispose(); scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 600, new BABYLON.Vector3(50, 50, 50), scene); camera.attachControl(canvas, false); var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); var material1 = new BABYLON.StandardMaterial("mat", scene); var material2 = new BABYLON.StandardMaterial("mat", scene); for (var key in displayModel.Applications) { if (displayModel.Applications.hasOwnProperty(key)) { var sphere = BABYLON.Mesh.CreateSphere(displayModel.Applications[key].Name, 16, 4, scene); displayModel.Applications[key].V3 = new BABYLON.Vector3(displayModel.Applications[key].X, displayModel.Applications[key].Z, displayModel.Applications[key].Y); sphere.position = displayModel.Applications[key].V3; sphere.material = material1; } } material1.diffuseColor = new BABYLON.Color3(1.5, 0, 0); var linesColor1 = new BABYLON.Color3(1, 0.2, 0.1); for (var key in displayModel.Services) { if (displayModel.Services.hasOwnProperty(key)) { var obj = BABYLON.Mesh.CreateSphere(displayModel.Services[key].Name, 16, 4, scene); displayModel.Services[key].V3 = new BABYLON.Vector3(displayModel.Services[key].X, displayModel.Services[key].Z, displayModel.Services[key].Y); obj.position = displayModel.Services[key].V3; var pId = displayModel.Services[key].ProviderId; var myLines = BABYLON.Mesh.CreateLines("a", [obj.position, displayModel.Applications[pId].V3], scene); myLines.color = linesColor1; } } for (var key in displayModel.ConsumingRelations) { if (displayModel.ConsumingRelations.hasOwnProperty(key)) { var idA = displayModel.ConsumingRelations[key].ConsumerId; var idS = displayModel.ConsumingRelations[key].ServiceId; var myLines = BABYLON.Mesh.CreateLines("a", [displayModel.Services[idS].V3, displayModel.Applications[idA].V3], scene); } } return scene; } </script> <div id="bts" style="color:#0000FF"> <span> <input id="9999" style="background-color: #4CAF50; width: 30%" type="file" name="archimateFile" onchange="myUpload()"> <span id="uuid">...</span> </span> <button id="2D" class="button" style="background-color: #BCAC00" name="render2" onclick="renderFile()">SHOW 2D</button> <button id="25D" class="button" style="background-color: #1387F5" name="render25" onclick="renderFile25D()">SHOW 2,5D</button> <button id="3D" class="button" style="background-color: #E70000" name="render3" onclick="renderFile()">SHOW 3D</button> <button id="DEMO" class="button" style="background-color: #D490B8; color: black" name="demo" onclick="renderDemo()">SoaScape Demo</button> <button id="DEMO" class="button" style="background-color: #D4CE90; color: black" name="demo" onclick="renderApiTest()">API Test</button> <button id="DEMO" class="button" style="background-color: #90D4AC; color: black" name="demo" onclick="renderBuiltIn()">Built in data</button> </div> <div> <canvas id="renderCanvas"></canvas> </div> </body> </html>
