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

DEVELOPMENT SCALE
Individual
SKILLS USED
WebGL using ThreeJS, HTML5/CSS3, Video
BREAKTHROUGH
Mix 2D iframe with 3D Content