Current online shopping website contains 2D images and heavy texts. Would it be useful to view and manipulate merchandise in 3D? eR3D is a proof-of-concept prototype to increase aesthetic and intrinsic value of an online product. Unlike model viewer, eR3D aims to provide a significant interaction to enhance user engagement.

Drag to rotate, and Wheel to zoom in/out

Trailer from Sintel

Top View Detail

Bottom View Rotate

3D Cube Wave

3D IFrame

This feature was added later when I came across with "Mixing HTML Pages Inside Your WebGL" by Jerome Etienne. I tried several times to replicate his method but it didn't work out, so I made my own version of mixing 2D web pages in 3D content. In Jerome's method, he uses the blending feature to accomplish. However, it only works in Chrome and becomes unstable in Firefox. I want to avoid this so that I developed a little more complicated way: by swapping the z-Index of CSS3DObject and WebGL contents. It works like a charm! :) Due to "SAMEORIGIN" issue, the iframe will not load every web page. Anyway, it could be solved once I have the time.

eR3D using three.js

WebGL using ThreeJS, HTML5/CSS3, Video
Mix 2D iframe with 3D Content