Just starting out with ThreeJS and currently in the process of building a 3D Configurator. I'm looking to add a loading screen before the obj object loads, here's my current code:
<!DOCTYPE html>
</style>
</head>
<body>
<div id="container"></div>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/RGBELoader.js"></script>
<script src="js/HDRCubeTextureLoader.js"></script>
... (more script sources)
<script src="js/OBJLoader.js"></script>
<script>
// javascript code here
</script>
</body>
I attempted something like this:
var loadingScreen =
{
scene = new THREE.Scene();
camera = new PerspectiveCamera(90, 1280/720, 0.1, 1000);
box : new THREE.Mesh(
new THREE.BoxGeometry(0.5,0.5, 0.5),
new THREE.MeshBasicMaterial ({color:0x4444ff})
)
};
var RESORUCES_LOADED = false;
Added the loadingscreen into function init:
loadingScreen.box.position.set(0,0,5);
loadingScreen.camera.lookAt(loadingScreen.box.position);
loadingScreen.scene.add(loadingScreen.box);
And finally in the animate function:
if (RESORUCES_LOADED == false)
{
requestAnimationFrame(animate);
renderer.render(loadingScreen.scene, loadingScreen.camera);
stats.begin();
render();
stats.end();
return;
}
However, it's not working as expected. Any advice on how to improve this?