Since I didn’t really have any specific project I wanted to do, I decided to at least import one of my old Sketchup-models to a scene and add some basic controls. While we can’t load Sketchup’s .skp-files directly into the scene, we can export our model to DAE format from Sketchup.
DAE models are XML documents, and as such they can become pretty big. I was using a model of an EPIA v10000 Mini-ITX motherboard, which when exported was 4.25 MB, without textures. While this isn’t really a problem when developing locally, it’s important to note that serving these files from a webserver, make sure to have gzip-compression enabled. For this particular model, it reduces the size down to 375 KB.
During my experimentation, I wondered if there was a way to package these models along with its textures and still be readable by three.js without doing multiple requests. After some Googling, I found zip.js, a Javascript library to zip and unzip files. After playing around with it for a while, I managed to get three.js and zip.js to work fairly well together.
In the demo, you can choose to load a ZIP file containing a DAE model and textures. The cool thing is that since it’s all javascript, nothing needs to be uploaded, it all runs locally within your browser. I’m not sure how often we’ll get to use WebGL and 3D models here at VG, but I enjoyed giving it a shot, and with Microsoft recently announcing WebGL support in IE11, the future is looking bright and three-dimensional 😉
Take a look at the demo if you have a WebGL-enabled browser (Chrome would be a good choice, Firefox should work).