Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

Assignment

Introduction

Week 1 to 8 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 as a SPA through Lab 4 and Lab 5).  Lab 6 continued the theme of making your 3D App more interactive and dynamic through the applications of more advance JavaScript, JQuery, AJAX and JSON. Lab 7 and 8 continued by developing a simple client-server based 3D App using a model, view, controller (MVC) design pattern.

Assignment Requirements

In this Assignment, you will build a more refined 3D App using the skills, technologies and components acquired from week 1 to week 8.

To meet these assignment requirements a successful student is required to build an X3D based Coca Cola Branded (3D App) exploiting HTML5, CSS3, X3D (X3DOM), JavaScript (you should utilise one or more of the JavaScript APIs such as jQuery, and a JavaScript frontend framework, e.g. Bootstrap), AJAX for asynchronous update of HTML contents, JSON for data transfer from the backend to the frontend, PHP to access data from a SQLite database, and all configured in an MVC design pattern. You should refine your Lab 3D Models to improve their geometry, materials, lighting and camera definition. Your 3D models should be accessed through your Coca Cola Branded User Interface allowing them to be manipulated in 3D space

In detail, you are required to:

1. Redesign your existing 3D App layout to provide a new Coca Cola Brand, you are specifically advised NOT to submit the brand designed during the lab work

· You could take inspiration from existing Coca Cola brands (see https://www.coca-cola.co.uk/brands), while being mindful of copyright issues, and you may choose any three brands to represent your Coca Cola Product models, e.g. Coke, Fanta, Sprite, Dr Pepper …,

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 Coca Cola Branded User Interface — your 3D App.  You are only required to present 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 HTML onClick method or the jQuery.Click() method, etc. and appropriate JavaScript or jQuery code to trigger the animation — see Lab 4 and 6.  

o You are strongly advised to use X3DOM (i.e. X3D inline in your HTML) for your Web 3D format, which is a 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 (X3D) 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 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 — example code for this is provided in the Lab 9 Coca Cola VM on the Live Feedback Site.

· 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 texture panel in the HTML5 to select new textures on the model.

o Utilising a 3D model gallery to load new models in X3DOM.

o Provide buttons to select different camera views.

o Provide buttons to control lighting.

o You are expected to exploit AJAX and JSON, with JQuery (or an alternative) to dynamically load web page contents from a JSON packet supplied by the backend — see Lab 6 and 7.

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.

o You should not use images for the logo, instead you should make effective use of CSS3.

· A method for selecting new objects (i.e. 3D Object 1 to 3D Object n) via a selection method in your user Interface — remember the JavaScript gallery you created in Lab 6, you may be able to adapt this! Alternatively, you can completely redesign with other Bootstrap components.

· A method for displaying the selected 3D object

o You are advised, strongly, to use X3DOM (i.e. X3D inline in the HTML5)

· A method for interacting with the 3D object and the 3D App web page, e.g. using JavaScript, in X3DOM

o X3DOM provides a degree of control built-in, but generally you will need to develop your own controls.  Remember the Camera panel you created in Lab 4 to select Camera views in X3DOM — look at Lab 6 to see how to connect cameras to your models.

o See interaction ideas mentioned above

· A method for displaying a description of the 3D objects displayed, which is synced with the object selection (e.g. JQuery.getJSON()) — Object Description.

· You should integrate other media objects where appropriate, e.g. further information, video, audio, images, etc. You can organise this by ‘swapping’ out media, e.g. swap the X3DOM view for an Image view, etc.

5. You must exploit the Model, View, Controller (MVC) design pattern to implement your Virtual Museum — you may adapt the codes from Lab 7 and 8 tutorials, see the Live Feedback Site, while noting Lab 9 is not a complete version and should not be copied verbatim. Do not simply copy the example codes from the Live Feedback Site, this will only give you threshold marks, you must adapt and go beyond! In general, you are advised to:

· Use AJAX methodology to asynchronously update content on your 3D App exploiting JSON to exchange data between the view and a ‘server side’ model (the data store being SQLite)  

· Use PHP scripting to access data from the data store (SQLite).

· As a minimum, place your Object Descriptions in the data store; you might be able to think of other elements such as appropriate metadata, interaction properties, etc. that can be stored.

· Note, while you are allowed to exploit a different frontend framework, you are limited to the backend PHP framework because of the University ITS Web Server. More specifically, your backend technology should run on the ITS Server.

6. You must provide a link to a GitHub archive of your complete codebase and 3D models, and code documentation.

· You will need to 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.

· Make sure that your codebase also includes your complete 3ds Max archive for your 3 models. Check out in 3ds Max how to save an archive

7. 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 

8. You are allowed to adapt open source code (e.g. check out the X3DOM examples, etc.), 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.

9. You will be provided with a submission.html file in which you are expected to encode the following:

· 3D App ITS Web Server URL

o users.sussex.ac.uk/~username/3dapp/assignment/index.php

· GitHub 3D App Codebase URL

· GitHub VRML/X3D Models URL

· 3D App Deeper Understanding Statement

· ITS web Server Date Time Last File Upload

NOTE: YOU ARE NOT ALLOWED TO SUBMIT YOUR 3D APP ON AN EXTERNAL ISP SITE, YOU SUBMISSION MUST BE ON THE ITS WEB SERVER. IF YOU SUBMIT ANYWHERE ELSE YOUR WORK WILL NOT BE MARKED AND YOU WILL ACHIEVE A ‘NO SUBMISSION’!