Hi,
Im new to Babylon.js but it seems fun, I have a simple question about the code below. It imports models and places them in random positions, whats the most efficient way to re-randomise the positions every second? I tried with
setTimeout(function(){
window.location.reload(1);
}, 5000);
but this was a bit heavy, is there a way to just call the randomise bit again.
Also is this the most efficient way to load multiple models, the hardware I'm targeting is slow so anything I can do to get a bit more performance is best- maybe I should clone the objects?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon Test</title>
<!--- link to the last version of babylon --->
<script src="babylon.2.2.js"></script>
<script src="babylon.objFileLoader.js"></script>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function(){
// get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true);
// createScene function that creates and return the scene
var createScene = function()
{
// create a basic BJS Scene object
var scene = new BABYLON.Scene(engine);
// create a FreeCamera, and set its position to (x:-10, y:10, z:-10)
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(10, 10,-10), scene);
camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
camera.orthoTop = 2.5;
camera.orthoBottom = -2.5;
camera.orthoLeft = -5;
camera.orthoRight = 5;
// target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// attach the camera to the canvas
camera.attachControl(canvas, false);
// create a basic light, aiming 0,1,0 - meaning, to the sky
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
// create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
var loader = new BABYLON.AssetsManager(scene);
var meshNames = ["hex.obj", "cross.obj"];
var noOfMeshesToBuild = 6;
var boundingBox = new BABYLON.Vector3(4,4,6);
for (var i = 0; i < noOfMeshesToBuild; i++){
var cross = loader.addMeshTask("mesh" + i, "", "assets/", meshNames[Math.floor(Math.random() * meshNames.length)]);
cross.onSuccess = function (task) {
task.loadedMeshes[0].position = new BABYLON.Vector3((Math.random() -0.5) * boundingBox.x, (Math.random() -0.5) * boundingBox.x, (Math.random() -0.5) * boundingBox.x);
};
};
loader.onFinish = function() {
engine.runRenderLoop(function () {
scene.render();
});
};
loader.load();
// return the created scene
return scene;
}
// Now, call the createScene function that you just finished creating
var scene = createScene();
// 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();
});
});
});
</script>
</body>
</html>