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[[CSS|Cascading Style Sheets]].
  • Second approach using webGL APIApplication Programming Interface.
  • 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[[CSS|Cascading Style Sheets]] 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