Interactive 3D product mockups in the browser


PreViz is a browser based 3D product mockup generator. It allows interaction and customisation of 3D models right in the browser. Letting users save their work, download images, share interactive links and embed their 3D mockups right on their own website.

Product Team

  • Luke Thompson: Product Design, Technical Lead, Front-end and Back-end Development
  • Cameron Whiting: 3D asset management and Front-end Development
  • David Whitehouse: Branding, UI and UX Design

Tools/Technologies Used

  • SCSS
  • Javascript
  • PHP
  • MySQL
  • Sequel Pro
  • Gulp
  • Three.js
  • Git
  • SourceTree

Target Audience

The target audience for PreViz is Graphic Designers, E-Commerce Managers and Business Owners who are competent computer users and have some Graphic Design experience or familiarity. However they either do not have the experience, access to or the time to invest in a more complicated 3D visualisation program. Or they would benefit from an easy way to provide the enhanced experience of interactive 3D products on their website.

Primary Goals

  • 1 Provide a useful 3D experience without a steep learning curve
  • 2 Demonstrate the potential within seconds of interacting with the app
  • 3 Allow simple methods for sharing and embedding the interactive 3D scenes
  • 4 Allow integration into an existing website/e-commerce platform with a minimum of time invested

Pre-configured Options and Visual UI

In order to make the app as easy to use as possible we limited the number of choices a user would have to make to the bare minimum. Only including pre-configured materials, models and lighting with thumbnails to choose between them to further reduce the learning curve. There was a deliberate choice to avoid any technical 3D language that can be intimidating or confusing for new users.

Animating Scene Updates

Instant changes can be disorientating and cause users to feel unsure of what they have done or if it can be reversed. The animations built into all the model and scene updates provide visual link between the users action and the interface changing. This works towards reducing cognitive load and increasing the speed with which new users can learn and understand the applications functions.