Assignment – 3D App
|
Key Points
|
|
|
You must include at least three 3D models
|
|
|
|
You must not submit the brand designed in the labs
|
|
|
|
You must create a user interface to interact with your models
|
|
|
|
You must test your site in week 11
|
|
|
|
You will submit either a Zip folder link to Canvas of evidence or a GitHub Folder link
|
|
|
|
Use the ‘about’ page to provide information about your 3D application
|
|
Introduction
The Laboratory sessions were designed to ensure you have engaged with the process of building a simple 3D App before you start your assignment, namely the integration of 3D content (created in Lab 2 and 3) into a set of web pages (i.e. create a simple 3D App with animations and buttons Lab 4 and Lab 5).
Assignment Requirements
In this Assignment, you will build a more refined 3D App using the skills, technologies and components acquired from the labs.
To meet these assignment requirements a successful student is required to build an 3D App exploiting HTML5, CSS3, 3D Modelling, and JavaScript. You should refine your Lab 3D Models to improve their geometry, materials, lighting and camera definition. Your 3D models should be accessed through your App User Interface allowing them to be manipulated in 3D space. You can expand on what was created in the lab but you are more likely to gain higher marks through incorporating the concepts in the module labs into an original design i.e. be creative and change the colours, fonts, text or create something that interests you.
In detail, you are required to:
1. Create or Redesign your existing 3D App layout to provide a 3D application. You are specifically advised NOT to submit the exact web pages designed during the lab work.
· You could take inspiration from existing 3D websites while being mindful of copyright issues.
o A simple way to do this would be to produce a Coke can, Fanta Can, Sprite can as your 3 Coca Cola Product 3D Models, this would give you access to the modelling marks defined in the rubric.
o However, producing at least one of these Coca Cola Product 3D Models with more complexity, e.g. create a Sprite Bottle or a Coke Bottle, would gain access to the higher end of the modelling marks and automatically qualify for one of the 5 mark blocks reserved for ‘deeper understanding’.
o You will need to acquire the appropriate textures for branding your 3D models.
2. You are required to integrate your 3D Models into a User Interface — your 3D App. You are required to present at least three 3D Models for your 3D App.
3. You should add appropriate levels of interactivity between your 3D models and your 3D App:
· The 3D model, e.g. interactivity can be achieved using JavaScript. to trigger interactive features.
o For example, any animations applied to your 3D model should use an onClick method.
o You are welcome to use either Three.JS or X3DOM (i.e. X3D inline in your HTML) for your Web 3D format. Both are very flexible approach to integrating 3D into a web browser, and it benefits from the use of JavaScript. to manipulate elements of your 3D model in the browser.
o You might like to exploit JavaScript. to simply change the texture on a 3D model to efficiently provide your extra models for the user interface.
o You should investigate the many examples on www.x3dom.org or https://threejs.org/ for ideas.
These tips are not exhaustive; it is up to you to make your own choices in relation to the proposed marking scheme.
· Your 3D App page:
o You must provide a button to switch between wireframe. mode to view your models but this can be in a sperate section.
· Good use of JavaScript.
o Good use of content swapping — remember how to change page elements with JavaScript, this can be applied not only to page elements. JQuery also abstracts this functionality in their show and hide functions.
o Utilising a 3D model gallery to load new models.
o Provide buttons to control lighting.
These features are not exhaustive; it is up to you to make your own choices in relation to the proposed marking scheme.
4. Your 3D App layout should have, as a minimum, the following responsive block elements:
· A header — you should design a CSS logo, e.g. ‘My Coca Cola Brand’ with a strapline.
· A method for selecting new objects (i.e. 3D Object 1 to 3D Object n) via a selection method in your user Interface — Alternatively, you can completely redesign with other Bootstrap components.
· A method for displaying the selected 3D object
· A method for interacting with the 3D object and the 3D App web page.
· You should integrate other media objects where appropriate, e.g. further information, video, audio, images, etc. You can organise this by ‘swapping’ out media.
5. You must provide a link to a folder of your site. This could be a zip folder uploaded to Canvas, a OneDrive folder link or a GitHub archive of your complete codebase and 3D models, and code documentation.
· You may set up a GitHub account. This allows us to very easily and in a consistent way check your codebase. This method of archiving and managing your codebase will attract 5 of the extra going beyond marks. Other Git options are available.
· Make sure that your codebase also includes your complete Blender (.blend file) or 3ds Max archive for your 3 models. Check out in 3ds Max how to save an archive
We would recommend you test this during week 11 when you are testing your 3D App.
6. Your 3D App may also contain home page contents, and other page contents (content swapping) for items such as ‘About’, Statement of Originality’, Site Map, References, and GitHub links
7. You are allowed to adapt open source code, but make sure you cite the source in the object description and appropriate references. However, clearly illustrating your own work in a system building approach will gain most marks.
8. You will be expected to test your website in week 11. You will submit your project as a zipped folder to canvas or as a MS OneDrive link or provide with a submission.html file in which you are expected to encode the following: