I am attempting to read and cache a geometry from an STL file using Three.js STLLoader. I am utilizing an event loop callback to retrieve the data (similar to the STLLoader example). My intention is to store it in an external variable called "cgeom". However, it seems that the geometry is not accessible outside of the event callback and I am encountering an error where cgeom is not defined at runtime. Could someone please advise me on what mistake I may be making with my code below:
<!DOCTYPE html>
<html>
<head>
<title>Thee.js STL geometry caching test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/STLLoader.js"></script>
<script>
alert("We'are here");
var cgeom;
function load_geometry( stl_file ) {
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
cgeom = event.content;
alert('inside listener - vertices: ' + cgeom.vertices.length);
} );
loader.load(stl_file);
alert('inside load_geometry - vertices: ' + cgeom.vertices.length); // error - cgeom is not defined
}
load_geometry('./data/a90.stl');
alert('inside load_geometry - vertices: ' + cgeom.vertices.length); // error - cgeom is not defined
</script>
</body>
</html>
Most examples generate a mesh from the geometry and immediately add it to the scene. However, this is not my objective. I would like to delay adding it to the scene in order to replace another mesh later. This is why I wish to cache it first.
Thank you in advance, Simon
P.S. While I do not consider myself a JavaScript expert, I do have over 10 years of experience in C++ and Java.