Bawer Parada

From Medien Wiki

3D Web Interfaces Documentation.

The Contents.

  • Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
  • First approach to 3d web tools using CSS.
  • Second approach using webGL API.
  • Third approach using the Threejs library.
  • Closer look and prototyping exercises using the Threejs library and the 3D model of "Haus am Horn".
  • Quick look to the possibilities using augmented reality.

Excercises and Prototype.

CSS Exercises.

Bhpm 3dwi 1.jpg


WebGL Excercises.

Bhpm2.jpg Bhpm3.jpg Bhpm4.jpg Bhpm5.jpg


Threejs Excercises.

Bhpm6.jpg Bhpm7.jpg Bhpm8.jpg Bhpm9.jpg


Haus am Horn Prototype.

There are two versions of the prototype:

Textured and orbit controls

  • The first one is a exploration of the workflow using 3DS Max instead blender to create a fully textured 3D model. In this case the model is subdivided into several parts to match the texture images.

1st Prototype

Bhpm10.jpg Bhpm11.jpg Bhpm12.jpg Bhpm13.jpg

3D Anaglyph ready

  • The second one is a exploration of anaglyph 3D using the .js file for anaglyph effect.

2nd Prototype - it is necessary blue / red glasses to see the effect.

Bhpm14.jpg Bhpm15.jpg Bhpm16.jpg