Adding 360 Product Views – Part 1

Use scroll wheel on mouse to zoom in or out. Click and hold left mouse button to move

What are 360 Product Views?

360 product views allow the customer to view your product from all angles. Viewers can run automatically when a customer opens the page or you can let the person control which viewing angle they want. More sophisticated viewers also allow the viewer to shift the view up and down besides going around along one plane of view. Further enhancements can include color or fabric changes on the object and posting part specific information the viewer can click to read. Some viewers support zoom functions so you can see greater detail from a given angle. Unlike static views, a 360 brings the product alive so the customer can see it from all angles.

Why don’t you See 360’s on the Marketplaces?

The short answer is “security”. The major marketplaces do not allow you to post “active content” which means “code”. The concern is that the code could be used to bypass the security features of the marketplace to gather information, alter data, or otherwise cause problems for their users. Therefore, most marketplaces simply ban anything other than text (with limited standard HTML tags).

In addition to security, 360’s take more computer resources than simple images. They also require the website to send more data to your browser. In other words, 360’s require more resources overall. Given the scale of the major marketplaces, they do not want everyone (just their partners) to have 360 viewers.

Understanding How It Works

A movie is simply a series of still images shown in a sequence on a screen at the rate of 24 to 30 images per second. To the human eye, a sequence of images shown at these rates merge into continuous motion. A 360 viewer works on the same principle. You take a series of product photos, each from a slightly different angle and then show them in a sequence – either automatically or by letting the viewer control the motion so that you can see the product from 360 degrees (full circle). The primary difference is that a movie is normally viewed continuously while the 360 viewer is meant to let the viewer stop and see each view in detail. Also, unlike a movie sequence, a 360 viewer allows the user to control which view is shown and to stay with that perspective.

Two Approaches

Essentially, 360 viewers can be one of two types. The first, which is seen most often, is a series of still images. Each image is taken from a slightly different angle. When put together, the user can see the product from all angles. This approach is the easiest – just a camera and some code. The alternative approach is to create an actual model using software. While the model requires more time and skill to create, it provides advantages over the still image method. A model can be viewed from every angle. A model can be used in animations as you have the entire shape contained within software. Lastly, you can easily change the lighting and other elements dynamically when you have a 3D model. This approach requires more skill than simply taking a sequence of photos. It also requires sophisticated (but free) software to create the models and animate them. The good news is that you can mix-and-match as needed. Start with the simple approach (as we have done) then evolve with greater sophistication.

Getting Started

You can go either the “paid” route or a “free” route. Before you jump to the conclusion that “free” is always better, what do you actually get with a “paid” version? First, the paid version (in general), is tested more heavily before release than the “free” version. More importantly, when problems are found, the paid version of the software is often fixed more quickly. Finally, the fee-based solution often includes other tools that can facilitate the entire process.

When we look at some of the specific products (we do not sell nor do we receive any type of commission or payment for presenting any package), you will see some of the feature differences.

“Free” versions often benefit from having a large installed base of users. This means the software is heavily tested in real usage instead of at the developers’ computer. As the software matures, the free version often incorporates many of the features that were once only available only in the paid versions. In the case of 360 product viewers, they have been around long enough that this is often the case. Free versions usually provide you with all of the “source” code. This means you can modify the software (or have a programmers do it on your behalf) to meet your specific needs. Of course, if you pay a programmer twice as much as it costs to simply purchase the paid version then you have come out behind in the deal.

Our Bias is Towards “Free”

We lean towards free as we’ve discovered that software usually looks great during the demo, but its limitations surface when you actually use it. Think of the free versions as training wheels while you learn how to use 360 viewers. After you’ve generated 360’s for some of your products, you will learn which features are useful and those that are not. You will also learn whether a particular product is easy to work with which is also important since you often use this type of software heavily at the beginning then with decreasing frequency as your products have been converted. If you determine that you need features only available in a paid version, at least you have knowledge confirming that such a feature is worth paying for. For these reasons, we normally recommend to start with free (unless budget is absolutely no constraint which may be the case if your funded by a company) unless you need specific features only available in a paid version.

Is It Safe?

All code is exposed to risk. With Javascript, common security vulnerabilities include cross-site scripting, cross-site request forgery, and buffer overflows. Cross-site scripting allows attackers to inject malicious code into trusted web pages, which then serve that malicious code to users that view the site. Cross-site request forgery allows attackers to utilize a user’s browser to take actions on other sites. Buffer overflows occur when attackers send data that is too large for the buffer to hold, resulting in data being written outside of the buffer and allowing attackers to insert malicious code, corrupt data, or crash an application. For more information, see our post Basic Javascript Security (click here)