FIT2902 - Interactive Media Studio 2
2023 Semester 2
ASSIGNMENT 2 PROJECT [30%]
3D WEB PROJECT
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.
di·ora·ma
/ˌdaɪəˈrɑːmə/ noun
A scene, often in miniature, reproduced in three dimensions by placing objects, figures, etc., in front of a painted background.
This is an individual assessment task. Your project will build upon the research and pre-production work demonstrated in the Assignment 1 Presentation assessment. You must use the same topic, but you may update your art direction.
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
● Self-playing animations and animations 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.
FIT2902 - Interactive Media Studio 2
2023 Semester 2
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 groups of faces in 3D space, or interactive animation within faces using 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. 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.
FIT2902 - Interactive Media Studio 2
2023 Semester 2
Use of Online Resources
The following applies to all non-original assets used in your assignment.
● Downloaded images, video and audio must be either in the public domain, licensed as creative commons, or include a permissive licence that specifically allows free commercial use of the asset.
● Media references must include a title, URL, and licence name/link.
● Web fonts (such as Google Fonts) may be used and must be referenced.
● All third-party code used in the site must be referenced. This includes:
○ Third-party code files that you have downloaded or linked to (e.g. jQuery)
○ Online examples and tutorials (e.g. Codepen, StackOverflow, YouTube)
All downloaded visual media must be creatively modified for use in this assignment. Downloaded audio assets do not need to be edited for this assignment.
Deliverables
Submit your assignment as a ZIP file containing your website and documentation.
● A folder named "Website"
○ All files required to view the website, with subfolders for file organisation.
○ All media assets must be appropriately optimised for web delivery.
● A document named "Documentation.pdf"
○ A list of animations and interactions implemented in your website
○ A list of references for all third-party assets and resources used in the site..
Assessment Criteria
Your submitted assignment will be assessed using the following criteria.
● Originality of concept and visual design
○ Representation of topic and consistent application of visual aesthetic.
● 3D construction using HTML and CSS techniques
○ Construction of objects and overall assembly of the 3D scene.
● Implementation of interactive functionality
○ Including scene rotation, user-triggered animation and audio control.
● Implementation of animations within scene
○ Creative and engaging implementation of animations.
● Application of media assets
○ Creative editing and application of assets with appropriate optimisation.
● Supporting Documentation
○ List of animations and interactions, references with identification of licences.
SUBMISSION DUE: Friday Week 14, 11:55PM
