This website was created as part of the submission for the assessment of the 3D Web Application module at the University of Sussex.
Architecture:
SQLite => PHP => JSON => Javascript pipeline
- On the server side, data for page content (cards, 3d model pages, carousel) is stored in a SQLite database. This SQLite database is accessed via PHP, the contents of each table are marshalled into JSON.
- Client side, JavaScript is used to populate the HTML elements with data expressed in the JSON responses.
Image Gallery
- PHP is used to parse subdirectories of assets based on a GET request (e.g, gallery_json.php?gallery=coke).
- The directory listing is marshalled into a JSON array, with non image files ignored.
- On the client side the lightbox image gallery is populated with the contents of this JSON array.
About Page
- The about page uses the Showdown JavaScript library to parse a Markdown file stored in assets/markdown.
- HTML code is generated from the markdown and inserted into the about page, allowing easy editing of the text-heavy page.
Instructions: Each product page has 2 models, toggle the can/bottle/cup tabs to interact with each one. Occasionally, the models stop working and freeze on the page. This appears to be an issue with the X3DOM library. If this happens, just reload the page.
-
Six models were created and exported using Maxon Cinema 4D.
-
Two renders per model (12 renders total) were generated using the Cinema 4D Standard render engine. Three compositions were created in Adobe Photoshop using the renders.
-
Showdown JS Library used to create About page contents.
-
Regular use of GitHub version control.
modelInteractions.js is heavily based on Martin White's modelInteraction.js.
Brand logos from World Vector Logo.
Carousel images from Coca-Cola UK.
Cinema 4D Tutorial Create a Soda Can
Create Your Own Procedural Soda Bottle in Cinema 4D - Advanced Tutorial
Easy sticky footer - stop a footer from floating up a short page!