About

For my project I created a car sales website. I added 3 different models of different cars as well as an animation of the car driving with relevant sound effects.

3D Models

For my car sales website I created three different models of cars in Blender: a sports car, a truck and a hatchback. I also created an animation of the sports cars wheel spinning to simulate the car driving.

Design

I used Three.js to light my scene with a hemisphere light and added a GUI so the user can control a spot light. I added the models into my web page using three.js as well as using Three.js OrbitControls to allow the user to move and zoom in to the model. I added bittons to play the driving animation, change which car was in view, rotate the current model and toggle the current models wireframe.

Integration

I found audio of an Aventador online and used Adobe Audition so that it played in sync with the driving animation when played on my web page.

Interactions

I added a toggle wireframe button to allow users to see the 3D models wireframe. There is also a button to rotate the car as well as a button to change the car currently being viewed. All of the models can also be moved around in their 3D space as well as zoomed in and out.

Implementation

I have added an about page detailing how the different sections of my website came together.

I have zipped my project and tested that it works when unzipped and opened in VS code and everything functions as it should.

Deployment

I have deployed my site on the sussex linux server

View live deployment

Testing

I have undertaken functional testing of my website to make sure everything works, all links function as expected and all nav bars hightlight the correct "active" page

I undertook testing with various candiates, here is some of the feedback provided "The lighting controller design doesn't fit in with the rest of the looks", "I would like to be able to change paint colour on all of the models", "I enjoyed being able to explore the cars in 3D", "I like the detailed specifications for each car"

Accessibility

All interactive elements use standard HTML button elements, making them keyboard accessible and compatible with screen readers. Sufficient colour contrast was maintained between text and background colours throughout the site. The 3D canvas OrbitControls support both mouse and touch input. Navigation is consistent across all pages via the sticky top navigation bar.

Deeper Understanding

My sports car model is far more complex than my other two models, it was modelled of Lamborghini Aventador blueprints. I have also implemented a colour picker for this model, with the user being able to see the model displayed in various colours using Three.js scene.traverse() method to colour certain meshes whilst leaving others as they were

A custom PHP/SQLite API was implemented to track how many times each car model has been viewed. This goes beyond the lab work by introducing a server-side backend with persistent data storage, a JSON API endpoint, and front-end fetch calls to display live view counts in the info panel.

Generative AI Usage Record

Use Case	Tool	Prompt	Outcome
Creating fictional car specs	Claude	I am building a car sales website, come up with fictional specs for 3 cars. For each car i need: price in gbp, engine size, horsepower, zero to sixty time in seconds, topSpeed in miles per hour, drivetrain, gearbox, weight in kilos, colour and colour descriptor, a 1 sentence description. The three models are a red sports car called the Bamborghini Baventador, a green family cruiser and a purple truck.	Here's the data for all three models: Title: Bamborghini Baventador,Price: £189,900, Engine: 6.5L V12, Horsepower: 700 hp, 0 to 60: 2.9 sec, Top Speed: 217 mph, Drivetrain: AWD, Transmission: 7-speed ISR, Weight: 1,575 kg, Colour: Cherry Red, Description: The Baventador is the pinnacle of Italian-inspired engineering, combining raw V12 power with a lightweight carbon fibre chassis for an unmatched driving experience. Title: Web 3D Family Cruiser, Price: £32,500, Engine: 2.0L Inline-4, Horsepower: 180 hp, 0 to 60: 7.8 sec, Top Speed: 130 mph, Drivetrain: FWD, Transmission: 6-speed Auto, Weight: 1,350 kg, Colour: Ghastly Green, Description: The Family Cruiser offers comfort, practicality and reliability for everyday life, with a refined interior and smooth ride quality. Title: Web 3D Pickup Truck, Price: £54,000, Engine: 3.5L V6 Turbo, Horsepower: 400 hp, 0 to 60: 5.5 sec, Top Speed: 118 mph, Drivetrain: 4WD Transmission: 10-speed Auto, Weight: 2,100 kg, Colour: Pretentious Purple, Description: Built for work and adventure, the Pickup Truck delivers serious towing capability and off-road performance without sacrificing daily comfort.
Fixing a spotlight movement bug	Claude	My spotlight in the GUI doesnt appear to do anything when I click the "moving" checkbox, why is this?	This is because the code that calcutes the position for the spotlight runs once and never again because nothing is telling it to. To fix this, simply move the spotlight movement code inside of the animation loop, this way it will run 60 times per second and if the spotlight is on, it will move it.
Fixing an animation bug	Claude	The animation of the wheels moving has stopped working	You have a bug in animate, you are calling getDelta() twice. You stored delta in a variable but then called clock.getDelta() again instead of using it. The second call returns 0 because the clock already reset, the mixer was getting 0 every frame so the animation couldn't advance.
Fixing button styling on the GitHub page	Claude	Why isn't the styling working for this button? "a href="https://github.com/gabrielhj17/Web-3D-2026" target="_blank" class="button">View on GitHub" I have a class in my css called button that styles all the other buttons.	Your CSS styles the button element directly, simply wrap that in a button element and the class will apply.
Fixing PHP bug	Claude	When I visit this URL, it should increment the views counter of the aventador by 1. Instead I'm getting an error "Parse error: syntax error, unexpected '?' in /its/home/gh342/public_html/api/cars.php on line 8" Why is this?	The ?? null coalescing operator requires PHP 7+. The Sussex server is likely running PHP 5.

Web 3D Motors