Watch Lecture 9 for an explanation of this assignment brief.

Brief

Using HTML, CSS and JavaScript, design and construct a 3-dimensional interactive     audio-visual diorama based on a literary fiction selected at the start of the semester.

This is an individual assessment task. Your website will be based on the research and pre-production work demonstrated in the Assignment 1 Presentation assessment.

Task

Implement a diorama design concept based on your chosen literary fiction as a simple 3D construction that includes animations and interactions. Interactions must result in    animation of elements in the scene and playback of audio.

The completed web page must implement the following features:

●   3D geometry in user-rotatable 3D space

● Controllable sound effects and background audio

● Animations that are self-playing and triggered by user interaction

Technical Requirements

This assignment tests your ability to art direct a project with very strict technical constraints. The visual design style must work with the following technical requirements.

You must research, plan, and execute a design that can be implemented using     between 30 and 60 3D faces to create an aesthetically pleasing result. The design should be creative - a simple textured box will not be acceptable.

CSS-based 3D has limitations that you will need to carefully consider during planning:

● Each face in a 3D object is a flat rectangular surface

● There is no static or dynamic lighting system

● A large number of faces require significantly more code

Make use of a full range of HTML and CSS features to enhance your design:

● Transparent images to create non-rectangular shapes

● Video, GIF, SVG and Rive media to create animated surfaces

● Use of transparent images to implement non-rectangular faces

● Carefully designed textures to create the illusion of lighting

● Constraining the scene's 3D rotation to limit the allowed viewing angles

Interactions can be implemented using any type of browser-based user interaction method. This includes, but is not limited to:

● CSS hover and focus selectors

● JavaScript mouse and keyboard interactions

● JavaScript speech recognition

Interactions must result in movement of faces or group of faces in the 3D object, or animation within faces implemented with any web animation techniques. For example:

● CSS transitions and keyframe animations

● Animated GIF, SVG or Rive Assets

● Video elements

Users must be able to rotate the entire 3D scene to some degree around one or more axes (i.e. you can choose to constrain the rotation to a specific axis or angular range).

This rotation of the 3D scene does not count as an interactive animation.

The scene must also contain audio, with playback triggered by an interaction.

Downloaded audio assets do not need to be edited for this assignment.

Your 3D web project must take into account the following technical considerations:

● The website will be tested at desktop resolution of 1920 x 1080px only.

● Organise your website files using sub-folders and sensible file naming.

● Media assets must use appropriate file formats for use on the web.

● Media assets must be appropriately optimised to minimise file sizes.

● Downloaded media assets must be referenced, including the title, URL, and licence.