3D Animation Workshop: Lesson 107: Designing Web 3D Interfaces | 2 | WebReference

3D Animation Workshop: Lesson 107: Designing Web 3D Interfaces | 2

Lesson 107 - Designing Web 3D Interfaces - Part 2

The most significant aspect of this project was the 2D interface. Shout3D allows you to perform 2D graphics operations on top of the rendered 3D image. I used this technique to create a color palette – a column of swatches that the user clicks to the change the color of the sink and the background gradient. Note how the name of the chosen color appears as a label in the upper left-hand corner.

A project like this makes clear how much Web 3D merges issues of graphical design with interface design. The interface should support the overall graphical look, and should ideally integrate into the display graphics. From a programming standpoint, this project involved substantial communication between the Java class implementing the 2D interface elements (including the pop-up informational menu) and the Java class that controlled the 3D display. The advantages of object-oriented programming were clear here. It would be easy to modify the interface with new colors and text content to apply to any other project.

The most ambitious project for the book was inspired by conversations with architects. I was told that simple 3D walk-throughs of architectural spaces were often unsatisfactory, especially when communicating with clients. Architects think primarily in terms of floorplans, so I designed an interface in which users position themselves in an (overhead) plan view, and refer to the 3D rendering for understanding. The following image is reduced. Click on it to load the full project in a separate window in which the application will fill the entire height of your screen.

Once again, take some time to play with this yourself. Make sure that you've closed the previous project because two big Java applets running at once is a bit too taxing for most systems.

To Continue to Part 3, or Return to Part 1, Use Arrow Buttons

Created: December 4, 2000
Revised: December 4, 2000

URL: http://webreference.com/3d/lesson107/2.html