VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more



Are you brilliant? We're hiring. Read more

WebGL DAE model viewer

JS

WebGL Model Viewer3D modeling is pretty fun. I’m nowhere near an expert – in fact, I’ve only really used Sketchup. There was a time when I was really into it, making 3D-models for all sorts of PC components.

The other day, I was looking at a WebGL demo made in three.js, and wanted to see how hard it would be to do some basic stuff in WebGL.

Having seen a lot of demos using three.js, I figured it would be a good starting point.

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).

Developer at VG with a passion for Node.js, React, PHP and the web platform as a whole. espen.codes - @rexxars


17 comments

  • frederic kleinermann

    hello Espen,

    Thanks for nice work.

    I am very interested by what you wrote about your WEBGL DAE MODEL VIEWER. For me it has always been the bottleneck for large 3D models over the web.
    So I can see how you can compress and decompress it on the fly.

    I am currently trying to run your demo from the source code you provided, but I encounter problems where it cannot find the components module. Is it possible to have it also so that I can run your demo locally and understand how it works.

    Thank you


    • Espen Hovlandsdal

      Hello and sorry for this very late reply!

      For this project I'm using Yeoman, a collection of utilities include bower and grunt to manage client-side dependencies and running a development webserver through node.js. You can take a look at Yeoman if you're interested in setting it up, basically it's a matter of installing node.js and doing:
      npm install && bower install && grunt server

      Since I've had two questions on setting this up, I'll add a note to the readme of the project and make a note to write a blogpost on using Yeoman.

  • Jonathan

    The github download does not work as there are several includes that are not there (components/ etc) and the triggers for unzip for the index page, etc.

    Can you include the full model as it would be very interesting.

    I do not need a full loader just a manual page that uses three.js to render an exported dae sketchup file - help would be much appreciated.


    • Espen Hovlandsdal

      For this project, I'm using bower + grunt to manage some of the client-side dependencies. You can take a look at Yeoman if you're interested in setting it up, basically it's a matter of installing node.js and doing:
      npm install && bower install && grunt server

      Full model is available here as DAE, in zipped and unzipped form. You can also grab the Sketchup file from the SCC.

      This page, which I linked to in the post, explains (fairly roughly) how to use Sketchup models in Three.js

      Hope that helps!

  • Omar

    Hi,

    My 3D model in sketchup contains scenes and interacts with the user via clicks, for example if the user clicks on model it'll respond. My main concern if I use your method to upload the model into my website using three.js, does my model still interact with the viewer as it's in sketchup program.

    Thanks in advance for your feedback.


    • Espen Hovlandsdal

      No, unfortunately this kind of interaction would require a deeper integration with three.js.

  • Omar

    Thanks for your reply, So I believe that it's a lot easier to design a model from scratch in three.js and add some interactivity to it rather than design it in a separate 3D modelling programs such as (sketchup) and export that model into three.js right?


    • Espen Hovlandsdal

      I'm not sure what you would put into the definition of "designing a model in three.js". I have not tried to add interactivity to my models through three.js, but I imagine it would be much of the same method of doing it no matter which model loader you are using.

      Take a look at the examples over at threejs.org - there are some pretty interactive models using the DAE loader (called Collada).

  • Omar

    Sorry for coming back late to your comment, what I meant was that if I've designed a 3D model in Google Sketchup and this model does contain some dynamic moves like if you click at the model then the model does respond to your click, such a model is possible to be uploaded with three.js library and if it does, does it still interact with the viewer or user (interaction here is not just rotating or zooming in and out, it's basically more than this, you click on model and the model responds to your click as it's been designed). Hope that clarified the idea. I really need help with this as this is where I am stuck right now. Cheers


  • Omar

    Sorry but these examples available on three.js, in which some of them do interact, have they been designed with three.js, I mean they are not designed in a separate 3D modelling software and then exported into three.js library or they've been designed originally using java script in three.js. Thanks


    • Espen Hovlandsdal

      I have not played around with the kind of interactions you are talking about, neither in Sketchup nor three.js - so I can't really help you, unfortunately. There is a tag on Stack Overflow where you might have better luck.

  • Dmitry Trofimov

    Dear Espen,
    That is very nice experiment. Do you have any ideas where to go further with it?
    Just to give you some inspiration - look at the 3DView Chrome app I made recently with Three.js, I hope you will like it.
    Here is the link: https://chrome.google.com/webstore/detail/3dview/hhngciknjebkeffhafnaodkfidcdlcao


    • Espen Hovlandsdal

      Thanks Dmitry! It was more of an experiment than anything else - if anything I might make it support more than just DAE format. Your Chrome app looks great! Nice work!

  • Jeebee

    Hi, thanks for the nice demo. I tried loading my own SketchUp .dae exported file, which I zipped together with the textures sub-folder that was created by Sketchup. The textures, however, do not show up. Do you have any experience with that? Thanks a lot!


  • Paul Hutson

    Hello there,

    Great work - how did you load the zipped blob item into the three.js using the collada loader (I can't make it out as you've hidden everything ;)) as I'm trying to do something similar at the moment...

    TIA for any pointers,
    Paul


    • Espen Hovlandsdal

      It's been a few years since I made this, so it's a bit rusty - but as written in the article, I used zip.js and (I believe) a slightly modified DAE loader.

      You can find the source code on Github, but it's not very documented, commented etc. It was more of a "throw something together to see if I can make it work" kind of thing.

  • adebeo

    Great job. Thanks for it ! I'm a great user of sketchup, event Sketchup have now is own webgl browers inside the 3Dware house. Your job open it to the next level !!


Leave your comment