5 ms·

Anyone know how they built their 3D graphic page? http://images.businessweek.com/graphics/airbus-a350-3d-graphic/ http://images.businessweek.com/graphics/airbu

Anyone know how they built their 3D graphic page? http://images.businessweek.com/graphics/airbus-a350-3d-graphic/ http://images.businessweek.com/graphics/airbus-a350-3d-graph... How did they go from the Trimble/Sketchup A350 model to showing the model in the browser in "3D"?

kalleboo 13y ago
No idea, but it put this in the Javascript Console... Recommended listening: http://youtu.be/AjzcdvF3gDc?t=3m48s http://youtu.be/mGF_0AcHaGs http://youtu.be/kn6-c223DUU http://youtu.be/eF-4Cr9Iy_8 edit: further investigation looks like they're using http://threejs.org http://threejs.org loading a COLLADA-format file (that can even be QuickLooked on my Mac somehow) http://images.businessweek.com/graphics/airbus-a350-3d-graphic/models/airbus-a350-900-repos.dae http://images.businessweek.com/graphics/airbus-a350-3d-graph...
- jonalmeida 13y ago
  I love easter eggs like this. I'm going to start checking the JS console for every website from now on..
- skyebook 13y ago
  OS X has had OpenCOLLADA built into QuickLook (as well as Preview) for a few years now. That said, it can still be fussy with many scenes.
ninjazee124 13y ago
To answer my own question, looks like they are using three.js as described here to load the Collada/DAE file. http://tech.vg.no/2013/07/08/webgl-dae-model-viewer/ http://tech.vg.no/2013/07/08/webgl-dae-model-viewer/
gulbrandr 13y ago
Here is the script of the 3D scene (not minified) http://images.businessweek.com/graphics/airbus-a350-3d-graphic/js/main1392310992.js http://images.businessweek.com/graphics/airbus-a350-3d-graph...
tophtucker 13y ago
Hi, I made this. (The page, not the model.) Y'all basically figured it out. Three.js atop WebGL, and here's the Collada loader: https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Model... A small thing, but hugely gratifying that kalleboo found the recommended listening.

kalleboo 13y ago

No idea, but it put this in the Javascript Console... Recommended listening: http://youtu.be/AjzcdvF3gDc?t=3m48s http://youtu.be/mGF_0AcHaGs http://youtu.be/kn6-c223DUU http://youtu.be/eF-4Cr9Iy_8 edit: further investigation looks like they're using http://threejs.org http://threejs.org loading a COLLADA-format file (that can even be QuickLooked on my Mac somehow) http://images.businessweek.com/graphics/airbus-a350-3d-graphic/models/airbus-a350-900-repos.dae http://images.businessweek.com/graphics/airbus-a350-3d-graph...

jonalmeida 13y ago
I love easter eggs like this. I'm going to start checking the JS console for every website from now on..
skyebook 13y ago
OS X has had OpenCOLLADA built into QuickLook (as well as Preview) for a few years now. That said, it can still be fussy with many scenes.

ninjazee124 13y ago

To answer my own question, looks like they are using three.js as described here to load the Collada/DAE file. http://tech.vg.no/2013/07/08/webgl-dae-model-viewer/ http://tech.vg.no/2013/07/08/webgl-dae-model-viewer/

gulbrandr 13y ago

Here is the script of the 3D scene (not minified) http://images.businessweek.com/graphics/airbus-a350-3d-graphic/js/main1392310992.js http://images.businessweek.com/graphics/airbus-a350-3d-graph...

tophtucker 13y ago

Hi, I made this. (The page, not the model.) Y'all basically figured it out. Three.js atop WebGL, and here's the Collada loader: https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Model... A small thing, but hugely gratifying that kalleboo found the recommended listening.