-
-
html
-
mouse 3d model
-
alexa integration
-
Home page of pur website
-
3d model of mouse
-
3d model of airbuds
-
By using alexa assembleing and deassembling 3d model by using voice control
-
component explanation by using alexa voice control
-
offical alexa integaration and responding to commands
-
responding to commands which is directly connected to website
-
These are the intents
Inspiration
We interact with electronic devices every day, but the technology inside them remains hidden. A computer mouse is more than a pointing device, and wireless earbuds are more than audio accessories. Their internal components work together to create the experiences we often take for granted.
We asked ourselves: What if anyone could explore the technology inside a device as easily as interacting with the device itself?
That question inspired DeconVerse, an interactive 3D hardware exploration platform that brings hidden components to life. Our vision was to combine immersive 3D visualization with voice-assisted interaction, making hardware easier to explore, understand, and learn from.
What it does
DeconVerse transforms hardware exploration into an interactive, browser-based 3D experience.
Users can inspect a device, separate its internal components through an exploded view, select individual parts, and learn about their functions. Voice commands add another layer of interaction, allowing users to request actions without relying entirely on manual controls.
Key features include:
- Interactive 3D exploration: Inspect and rotate hardware models directly in the browser.
- Exploded-view visualization: Separate components to reveal the internal structure of a device.
- Component-level interaction: Select and isolate individual parts and explore their descriptions.
- Alexa integration: Connect an Amazon Alexa custom skill to DeconVerse actions such as exploding, reassembling, resetting, and explaining selected components.
- Browser-based voice assistant: Use typed commands or microphone-based speech recognition where supported, with spoken responses and a stop-voice control.
- Public web access: Explore the application through a hosted web interface.
Our prototype focuses on computer mouse and wireless-earbud form factors, with the broader goal of making complex hardware more accessible through visual and voice-assisted learning.
How we built it
We built DeconVerse using JavaScript, React, Vite, and Three.js to create the web interface and interactive 3D experience. HTML and CSS support the user interface, while Node.js and Express handle backend requests and command routing.
The 3D explorer uses procedural geometry and component-level interactions to demonstrate how hardware parts can be separated, selected, and explored. Each component can be associated with an explanation of its purpose and role within the device.
For voice interaction, we integrated an Amazon Alexa custom skill using the Alexa Skills Kit. The skill processes supported intents through an HTTPS endpoint. The backend translates recognized intents into application commands, and the browser command bridge delivers those commands to the active 3D explorer.
We also developed a browser voice assistant with typed input, microphone-based speech recognition, quick actions, and spoken responses. Finally, we deployed the application to cloud hosting so it could be accessed through a public URL rather than depending exclusively on a local development environment.
Challenges we ran into
One of our biggest challenges was connecting a cloud-based voice service to a real-time 3D application running in a browser.
Getting Alexa to speak a response was only part of the problem. We also needed to ensure that requests reached the correct HTTPS endpoint, mapped to the intended commands, and triggered the corresponding actions in the 3D explorer.
We encountered endpoint configuration issues, request-verification errors, command-handler mismatches, and difficulties coordinating commands with the explorer's loading state.
We tackled these challenges by testing each layer independently: the Express backend, the Alexa request handler, the HTTPS connection, and the browser command queue. This helped us distinguish connectivity problems from application-level errors and preserve the working 3D interactions as we refined the integration.
Cloud deployment introduced another challenge: moving from a locally running prototype to a hosted service that could serve the website and handle backend requests independently of our development environment.
Accomplishments that we're proud of
We are proud to have developed DeconVerse into more than a static hardware visualization. It brings together interactive 3D exploration, component explanations, voice-assisted controls, and a hosted web application in one experience.
Our key accomplishments include:
- Building interactive 3D hardware prototypes with explodable and reassemblable components.
- Enabling component selection and contextual explanations.
- Integrating an Amazon Alexa custom skill with a Node.js backend.
- Creating a browser-based command bridge that connects voice-triggered actions to the 3D explorer.
- Developing a complementary voice interface with microphone input, typed commands, spoken responses, and a stop-voice control.
- Deploying the application to a public hosting environment for demonstration.
Most importantly, we learned how to connect multiple technologies into a single interactive experience and how to debug the boundaries between them.
What we learned
DeconVerse strengthened our practical understanding of 3D development, frontend architecture, backend APIs, voice interfaces, Alexa custom skills, HTTPS request verification, and cloud deployment.
We learned that integrating an external voice service requires more than creating intents and response messages. Reliable interaction depends on correct endpoint configuration, secure request handling, clear command routing, and synchronization with the state of the browser application.
We also learned the importance of testing complete user journeys rather than considering individual components successful in isolation. This changed how we approach debugging, integration, and deployment.
As a team, we gained experience turning an interactive prototype into a connected application while balancing usability, technical constraints, and the need for a compelling demonstration.
What's next for DeconVerse
DeconVerse is an evolving prototype, and we have several directions in mind for its next stage.
We want to improve the realism and technical accuracy of hardware models, expand the range of supported devices, and provide more detailed explanations of individual components. We also plan to improve voice-command reliability and make the assistant more context-aware, so users can explore a component through natural follow-up questions.
Future improvements could include camera and gesture-based interactions, guided hardware learning experiences, and richer component information for students and technology enthusiasts.
Our long-term vision is to make DeconVerse a platform where people can do more than look at technology—they can interact with it, break it down, and understand how it works, one component at a time.
Built With
- 3d-visualization
- alexa-skills-kit
- amazon-alexa
- amazon-alexa-skills-kit
- css
- express.js
- html
- javascript
- node.js
- react
- speech-recognition
- three.js
- vite
- voice-assistant
- web-development
Log in or sign up for Devpost to join the conversation.