RC Car Simulator Prototype
RC Car Simulator is A Three.js project built to enable RC car enthusiasts to test products online. Users can select a car and drive it around an interactive virtual environment to determine whether they would like to purchase it.
Type: University Project | Grade: 80% | Technologies Used: Three.js, HTML, CSS, JavaScript, Vite
Executive Summary
The RC Car Simulator stands out through its approach to interactive product exploration. The project's most well-received feature is its track editor, which enhances the product visualisation experience by allowing users to customise their environment. This functionality demonstrates not just technical prowess, but a deep understanding of user engagement.
The interactive environmental features were carefully designed to mimic real-world RC car experiences. Key highlights include:
- Dynamic track creation that lets users design their own testing environments
- Immersive background interactions like TV and radio controls
- Orbit camera controls that simulate the freedom of physical RC car testing
These features transform the simulator from a simple product viewer into an engaging experience that addresses a genuine user need: understanding a product's capabilities before purchase.
Key Takeaways
- Prototypes prioritise concept validation over perfect implementation
- Asynchronous content requires additional considerations compared to synchronous content
- User experience should drive technical design
The result is a prototype that effectively demonstrates the potential of an interactive RC car simulator, while leaving room for future technical refinement.
Purpose and Goal
This project was built as part of the 'Creative and Physical Computing' unit of BSc. (Hons) Digital Media at UWE. The key objective of this project was to create a prototype using Three.js for an audience of our choosing. While it was a great opportunity to demonstrate some creative and technical flair beyond typical web technologies, it was essential that the project clearly addresses users' needs through a well-considered feature-set.
For this project, I took on the role of fictional company Digital Bobs who specialise in creating 3D interactive web experiences. In this context, they were producing a product to support fictional gadgets retailer The Cave in reaching a broader online customer-base.
To aid in project development, a series of personas were made with a focus on people who, for one reason or another, may be unable to access a physical shop, but have reservations about shopping online.
The environment itself was inspired by real-world obstacle courses built by RC car enthusiasts. This also directly inspired the track editor, as well as the use of orbit controls. Initially, the project was built with a follow camera, but, in practice, you could stand or sit anywhere you like while playing with an RC car, so the orbit controls felt more appropriate.
Furthermore, you can turn on the TV and change the radio channels (or turn them both off). These interactions were added to facilitate immersion, as you may want some background noise while playing with your car, as well as encourage exploration so users are inclined to give the car a thorough test drive.
Lessons Learned
Navigating Technical Challenges
The most significant challenge emerged with model loading and asynchronous content management. Initially, the application struggled with premature object references, a common pitfall in complex web applications involving asynchronously loaded content like 3D models.
The core issue stemmed from the application attempting to interact with 3D models before they were fully loaded. Resolving this challenge was critical to the project's functionality. By implementing comprehensive loading checks and fail-safe mechanisms, I developed a more resilient application structure.
Prototype Development
A key lesson in project management was understanding the difference between a prototype and a production-ready application. The physics simulation, for instance, requires a page reload if the car flips over---a limitation that would be unacceptable in a final product. However, for a prototype, this approach was acceptable:
- The core functionality remains demonstrable
- Development time is optimised
- The fundamental concept can be validated
- Potential for future refinement is clear
This approach exemplifies smart prototype development: focusing on proving the core concept rather than perfecting every technical detail. It's a crucial skill in product design and development, where the primary goal is to test and validate the core value proposition.
User-Centred Design Insights
Beyond technical considerations, the project deepened my understanding of user-focused design. The development process transformed my approach to product creation. I learned to:
- Deeply consider user motivations and pain points
- Design features that solve real-world problems
- Create immersive interactive experiences that both inform and entertain the user