3D Rose Box Customizer

This project is a significant achievement for me because I worked directly with a company in Utah, USA. I developed a 3D web customizer for selling custom rose boxes, where they print on the petals. I managed all aspects of the project, including UI/UX, modeling, and front-end development, using Three.js. I was the sole Three.js developer on this project, creating an interactive and user-friendly experience for customers to personalize their rose boxes in real-time.

Technologies


  • Three.js

  • React.js

  • Blender

  • Figma

My Role


  • Three.js Developer

  • Manager

Client


  • Alex Fuentes

  • speakingroses.com

Year


  • 2024

  • 2025

Location


  • Remote, Utah USA

Category


  • Three.js

  • 3D configurator

My Proccess

SpeakingRose is an interesting business in the USA that sells eternal roses, and what sets them apart is that they print on the petals. Customers can order customized products tailored to the individual and the occasion, making it a unique and personalized gift option.

Step one

Steps

  • Step 1

    We completed this project from start to finish as a team, where I was the project manager and the sole Three.js developer. Customers can view the entire rose in 3D and change its color, offering a highly interactive and customizable experience.

    Step 1
  • Step 2

    Additionally, users can view and design on individual petals, as one of the products in this business is sold as petal packs. Customers can see simultaneous designs on all types of products in 3D, enhancing the customization experience.

    Step 2
  • Step 3

    The really exciting part of this project is that you can add any custom text with your desired font and color onto your design, and it will be printed for you.

    Step 3
  • Step 4

    And of course, you can choose clip art from various categories and quickly finalize your order.

    Step 4
  • Step 5

    Imagine being able to see a photo of your loved one on the flowers when you're about to gift them. Isn't that amazing?

    Step 5
  • Step 6

    Finally, you choose the number of flowers you want and the type of box, such as an acrylic box.

    Step 6
  • Step 7

    And of course, you can change the flower color as well, and see the changes in real-time in the 3D view, helping you decide which color looks best with your design.

    Step 7
  • Step 8

    Finally, your flower box with the design you've chosen will have the cost calculated, and you can finalize your order.

    Step 8

Gallery

project img
project img
project img
project img
pointer