The Project
This sixth major revision of my home site is an explorable 3-D space designed for DHTML browsers without plug-ins.
Transitions from one viewpoint to another are accomplished by simple image replacement, as in "slide show" exploration games like MYST. No QuickTime or VRML is required.
Getting Around
Each image is mapped for three basic links. A 50-pixel rectangle on the left activates a counterclockwise rotation. Its neighbor on the right triggers a clockwise turn. Clicking in otherwise empty space in the middle of the image will move your viewpoint along a more or less straight line into the distance.
In addition to these three transitions, all objects that appear are imagemapped for links that will take you out of this home site to other pages or documents.
The space is an island divided into five parts by ravines or bays. There are 21 viewpoints distributed more or less evenly around the space.
Rotation moves (clicks to left or right) move the perspective 90 degrees but leave the viewpoint unchanged. Transition moves (clicking in the middle of the image but not on an object) change the viewpoint. If you invoke a transition that moves outside the boundaries of the space -- for instance, by clicking on an empty horizon -- you'll find yourself back at the arrival point. (You can click out any time you like...)
Notes
Because I'm using large images (640x480), this project assumes generous bandwidth and something other than basic screen resolution. I think the concept could be scaled down if you didn't want to make such assumptions.
The project could have been done without DHTML, simply by having each viewpoint attached to a distinct page with its own imagemap. When browsers load a new page, however, the screen blanks temporarily, which I found disruptive. In the current implementation there is only one page. In rotation or transition, JavaScript routines operate on both its <IMG> object and a <DIV> that contains its imagemap, replacing the latter's innerHTML to account for links unique to the current image. Image sources are handled in the usual way, but since DHTML won't allow innerHTML to be imported from an external file, it's necessary to store them on a page that loaded into an invisible frame.
The JavaScript that runs all this is open for inspection. Don't expect elegance.
The terrain and objects were built in Bryce 3-D. I confess I've been more interested in interface design than visual aesthetics. It might not look like much, but it's home.
Why?
A plain table of links would get the job done a lot more simply. Why go to all this trouble?
For a partial answer to this question, see the description of my course Virtual Worlds offered in Fall, 1999.