3D Configurator of a shoe, created using ONU's 3D Web technology.

ONU has been creating 3D Web technology and experiences for over 3 years. Making us a pioneer in this exciting new space. So we decided to write The Ultimate Guide to Your Products in 3D on the Web. Everything you need to know about how to get your products online in 3D.


With the rise of e-commerce and the race for online sales, consumers are expecting more and more from their online shopping experience. They expect not only education, but also engagement with your products. There is also an increasing desire for consumers to personalize products to fit their precise needs. Using devices ranging from laptops, to tablets, to their phones.
Chances are, your website uses traditional photography for product education and engagement. This falls well short of expectations for most consumers. You may use 360 degree photography for more complete views of products. This is a nice upgrade, but still leaves most consumers wanting more. More engagement, more information, more interactivity.
In response innovative companies have begun to adopt 3D web technology. Finding immediate benefits in online sales and marketing. Providing customers the ability to customize and personalize a product, and instantly see the results. Some retailers are even using 3D product visuals to provide better service and training for their customers. Read The Ultimate Guide to Your Products in 3D on the Web to find out how!

The E-commerce Train

The e-commerce train left the station years ago and shows no signs of slowing. Business to consumer online spending is up dramatically each year. According to UPS' Annual Pulse of the Shopper Report, discretionary retail spending was up 4% over the past year, while e-commerce grew 13%. In fact, online spending easily outpaces in-store shopping, with online influencing almost 80% of buying decisions.

Screen Shot 2017-12-20 at 1.44.28 PM.png

Don't forget about Mobile

Each year, mobile devices are accounting for more online purchases. According to the UPS Report, mobile now accounts for 48% of online purchases. This is a 7% increase from 2015, at the expense of desktop purchases.

Screen Shot 2017-12-20 at 1.47.03 PM.png

Also, the Adobe Digital Insights team predicts that the majority of online shopping this holiday season will happen on mobile devices. Customers are still more likely to complete a purchase on desktop after researching on mobile. But as we can see above, that’s changing.

B2B Joining the Party

With all the growth in consumer e-commerce spending business to business doesn't get much attention. So the numbers may surprise you. By 2020 Forrester Research expects the U.S. B2B e-commerce market to be worth $1.1 trillion. That's over twice the size of the B2C market. With the worldwide sales estimate to top $12 trillion by 2020 according to Frost & Sullivan.
Business buyers are also consumer shoppers, and will expect more consumer like experiences. In fact, with B2B purchases having more at stake, the expectations seem even higher, according to a recent study by SalesForce. Eighty-nine percent of business buyers say they expect companies to understand their unique needs and expectations, versus only 72% of consumers.

Online Consumers Are a Picky Bunch

As the amount of online shopping has increased, so have consumer expectations. An Adobe study from 2010 shows that customers expect every product view in every available color.
Screen Shot 2017-12-23 at 1.08.27 PM.png
The two most valued features are images in all colors (96%) and 360-degree views of products (91%). And this was 8 years ago! So imagine how consumers feel, years later, when the best you've got is 360-degree photography. You're definitely not making any fans. Gallup reports that when customers don't get what they want, they become disengaged. And not only disengaged, but antagonistic towards the offending brand!

Good News, Bad News

Good News: There has never been a better time to sell online. Both B2B and B2C e-commerce are on the rise. So just put up a website with some pictures of your product and profit, right?!?
Bad News: You must give the customer an accurate and engaging product experience. Including all the views and options of your product. Plus you must consider mobile responsiveness. If you don't do all this then customers will not only disengage but could become antagonistic.
So how do you give customers everything they want?

3D Web To the Rescue

Show your products in their true form and give customers the ability to interact with them. Rotate to view at any angle and zoom in to see all the details. Customize for any possible configuration, color or texture option. Even animate your products to show how they work in real life.
And isn't that what we should be pursuing; a re-creation of the actual retail experience. Where customers can pick up your items, rotate them, and view them from any perspective. As observed in this Mumbrella article, 2D product images are no longer useful and the future of e-commerce is 3D. Providing advanced innovation, flexibility, and actually lowering costs.

What Exactly is 3D Web?

Before we go much further, we should explain exactly what we mean by 3D Web. It refers to the rendering of 3D models, in real-time, using a technology called WebGL. Let's breakdown a few of the key terms in that definition.
  • 3D Model - Refers to a product of 3D modeling. Which is defined as "the process of developing a mathematical representation of any surface of an object (either inanimate or living) in three dimensions via specialized software". Some of the more common software used by 3D artists are Maya and 3DS Max by Autodesk, Blender, Modo and ZBrush. The output from 3D modeling software can be a number of different formats. Some of the more common are FBX (Filmbox), OBJ (Wavefront) or DAE (Collada).


  • Real-Time Rendering - Refers to interactive 3D computer graphics or models. Traditional computer graphics are baked into non-interactive images or sequential video. Real-time rendering allows a user to control the display of the 3D model. The model responds in real-time by providing the view requested.
  • WebGL - Short for Web Graphics Library. Refers to a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is an extension of OpenGL, used for years to provide 3D experiences on desktop computers and gaming consoles.
Below is an example of a 3D model, rendered in real-time, using WebGL.

How Is 3D Different Than 360 Degree Photography?

The major difference is the control provided to the customer. With 360 degree photography, the number of available product images limit the available product views. Often times, the view or angle a customer wants is not available. Another frustrating aspect is limited zoom capability. The inability to get a closer look at a product could be the difference between a sale and no sale. One could argue that 360 photos are sufficient in these areas. Given the maturity and adoption of the technology, that would seem a reasonable argument.
What 360 photos lack are affordable animation and configuration capabilities. It's one thing to setup a photo shoot to provide 360 degree views of a product. But creating imagery for a product animation is not viable. Nor is it practical to create a product configurator using 360 photos. Here your choices are taking photos of every possible color and option from every angle, or having a full-time Photoshop resource to create the images. Neither option is efficient or affordable.
Don't misunderstand, 360 degree product photography is a major step up from standalone images. Providing customers with more product views, translates to better information and more conversions. But remember, that Adobe study demanding more views and product options was from 2010! At the rate technology evolves, that was a lifetime ago. 3D Web is the next evolution in e-commerce technology.

So You're Convinced, Now What?

So we've made our pitch and you're ready to get started. So how exactly do you get your products into 3D? There are three traditional options, which we will explore in more detail below. Any of the options can create 3D models for use on the web.

3D Scanning

The first option is 3D scanning of products. This is done using a variety of different equipment and techniques. Such as structured light scanning using a handheld device like this one from our friends at Artec. Another viable technique is photogrammetry, which uses images from one or more DSLR cameras. Either technique requires additional software to process the scan data into a 3D model. Here is a great primer for 3D scanning objects for use on the web .
The upside of 3D scanning is that the process can scale for certain product types. One example is footwear, where the product size and materials are ideal for the application. Most shoes are roughly the same size, so a standard setup can accommodate the scanning process. The relative lack of metal or shiny surfaces allow for high quality scan results in most situations. See the example below.
Screen Shot 2017-12-26 at 11.50.56 AM.png
Another advantage is technical accuracy. Scanning can be accurate to the millimeter or even micron level. The capture of geometrically accurate data ensures that the resulting 3D models are created to scale.
The major downside is the lack of flexibility in the resulting 3D model. The scanning process is not able to create a mesh structure that corresponds to the actual product structure. Let's take the footwear example. The 3D scan of a shoe would not separate the upper, bottom, tongue and laces. Making it impossible to configure different areas of the shoe with different color or material options. It also means we can't animate different parts of a product. Such as making a transmission spin or viewing the internals of a football helmet.
Another drawback to scanning is the resulting size and quality of the 3D model. Initial scan data can be very high quality, but also very dense. Models which are too dense, will not perform well in WebGL. As a rule of thumb, 3D models need to be 250,000 polygons or under to perform on a mobile web browser. Finding a balance between quality and density is challenging and often requires decimation of the 3D model. This affects the image quality and often results in an unacceptable result. Especially for discerning customers.

3D Models from Images

The second option is to create 3D models from scratch using images as a guide. Using this technique, 3D artists use one or more product images and dimensional data to create a model. The models are then textured using physical or digital material samples. High quality 3D product models can be hard to distinguish from product photography.
There is definite upside to using 3D models created from images. Since the 3D artist has complete control over the model, the mesh structure can reflect the actual product structure. This allows for changes to color and material options on each part of a product. Using our shoe example above, a customer could choose to have a red rubber bottom, black leather upper, and blue laces. Products can also be animated to reflect real-life operation.
Another advantage is that the 3D artist has control over the image quality and model density. So it is generally possible to find an acceptable balance. Of course there will always be compromise. But for 3D artists, especially those with experience in gaming, this is a normal part of the job.
However this method has its drawbacks as well. First, it is difficult to create technically accurate models. Precise dimensional information is often unavailable, so objects are often not to scale. Also, the number of images is often limited. Meaning the artist has to guess on certain areas of a product, particularly the inside.
But the biggest drawback is the lack of efficiency and affordability when creating 3D models from images. Imagine drawing a highly complex product, such as a car engine, from scratch. A project like this can take days or even weeks! Especially when the goal is a high degree of photo-realism. Even with very affordable resources, each 3D model will cost hundreds to thousands of dollars to create.

3D Models from CAD

The third option is to create 3D models using CAD data. Using this technique, a 3D artist will receive CAD data of a product to use for model creation. The artist will use software to convert the CAD data to a polygonal format. This allows them to use the CAD representation of the product as a guide when creating the model. Like with the previous method, the models are then textured using physical or digital material samples.
This option has all the advantages of creating 3D models using images. In addition, the resulting models are more accurate. The CAD data contains dimensional information, so 3D models are to scale. The 3D artist also isn't forced to guess based on incomplete imagery. The CAD data contains representation for all aspects of the product, including the internal components. Sometimes CAD data can even include color or material information. Meaning 3D artists can leverage design data to create better representations of products. All the better for the ever-discerning consumer.
Unfortunately, creating 3D models from CAD isn't much more efficient than from images. This is because when CAD converts to a polygonal format, like scanning, it retains density. Often tiny screws or unseen internal parts create unnecessary polygons. So the 3D artist needs to recreate all the geometry. This process is sometimes known as retopology or retop for short. As with the previous method, the process can take days for each model. Meaning similar costs on a per model basis.

Comparing the Options

See below of a quick recap of the options. As you can see, none of them check all the boxes. As a result, there is no clear choice on which option to choose.
Screen Shot 2017-12-26 at 2.41.56 PM.png

What If There Was a Better Way?

Well there is! ONU 3DLite turns native CAD to low poly FBX files in minutes. Our automated CAD conversion and optimization technology save both time and money. Enabling the creation of 3D models up to 75x faster than with the traditional methods. Once optimized, export your CAD as an FBX file for use in 3D Web viewers. Head over to our website and start your free trial of ONU 3DLite today!

See the previous comparison with ONU 3DLite added to the mix. Now you have an option that checks all the boxes!

Screen Shot 2017-12-26 at 2.31.40 PM.png

Well That's Exciting! But What To Do With All These 3D Models?

Once you have created 3D models of your products, it's time to put them on your website. This is where the aforementioned WebGL comes in. Luckily, a number of solutions exist that make it easy to display your product models on your website. Much like embedding a YouTube video. Just upload your 3D model and use the provided embed code to include on your site. These 3D Web viewers will be compatible on any HTML5 supported desktop or mobile browser.

3D Viewers

The most well known is Sketchfab, with over 1.5 Million 3D models shared to date. They have free plans that allow users to upload and share 3D content, quickly and easily. There are also paid plans, such as their Personal plan, which allows their 3D viewer to be embedded on your site. This plan also includes use of their viewer API. Allowing for more advanced product experiences, including animation and product customization.
Another option in the space is They provide free functionality similar to Sketchfab, with the addition of limited embedding. Their paid plans are also less costly. But the lower cost comes with less robust functionality. At the time of writing, does not have an API to support animations or product customization.
At ONU, we have a 3D Web viewer as part of our Publishing solution. This includes the ability to easily embed on your website. As well as an advanced API to trigger animations and enable advanced product customizations. Feel free to Contact Us for more information on our pricing plans and options.
Screen Shot 2018-01-02 at 12.51.26 PM.png

3D Configurators

The hottest trend in 3D on the web are 3D product configurators. This allows consumers to customize products to their specifications. All while viewing your products in 3D! Giving customers all the views and all the options. What more could they want?
The best part is that 3D configurators are more affordable than their 2D counterparts. Requiring Photoshop or layered PSD solutions, 2D configurators are time consuming and inflexible. So brands such as Vans, Under Armour, and Xenith Helmets are using 3D to create greater customer satisfaction while saving time and money.
Configurators built using 3D Web viewers take advantage of WebGL's real-time rendering capability. Consumers can make choices on different options, colors and materials. With choices reflected live in the 3D Web viewer. The difference between this and 2D, is that there aren't loads of images to create and manage. That's because the 3D Web viewer updates in real-time using a JavaScript API. No more Photoshop, layering PSDs or hardcoded options. Unlimited flexibility for both the brand and the consumer.
To make things easier, there are solutions to manage 3D configurators with little to no coding. This includes integrations with the major e-commerce platforms. One such solution is from our partners at ThreeKit. They offer a WYSIWYG Configurator, making it easy to build a product configurator with no programming. This and other plans start at $100/month. Which includes integration with e-commerce solutions such as Shopify, Magento, WooCommerce and DemandWare.

Beyond E-Commerce

So we've explored e-commerce and what 3D Web has to offer. But are there other uses for 3D Web technology and your business?
The answer is a resounding yes! The same 3D models that you create for e-commerce experiences have other uses. Such as trade show marketing, sales, troubleshooting, service, and training. Imagine your products displayed on a big touch screen at a trade show. Or on your website to provide troubleshooting information to your customers and technicians. This blog post from FormLabs does a great job of explaining some of the potential benefits.
You have likely heard all the buzz surrounding augmented and virtual reality. Just more examples of how to extend the use of your newly created 3D models. These technologies are in the early adopter stage now. Over the next few years they will become commonplace and your organization will be ready. So what are you waiting for? Head over to our website and start your free trial of ONU 3DLite today!