The "360-Degree Item Viewer" sample illustrates how to turn a sequence of images taken at various points along a 360-degree circuit around an item into an interactive 360-degree visual of that item. An image-based approach to rotating an object can be more lightweight than an interactive 3D model of the same object.
This experience utilizes an HTML Frame Asset and a snippet of open-source HTML code created by Scaleflex to bring the interactive item viewer to life.
- You can download the experience from this link.
- All Player-supported platforms will run this experience.
About the "360-Degree Item Viewer" experience
This experience is comprised of a single scene - called "Main" - to display one rotational item at a time.
The \Scaleflex code used to create the 360-degree item viewer can be found here: Scaleflex JS Cloudimage 360 View.
Note: Intuiface slightly modified the Scaleflex code to correctly handle touch events on Windows platforms. Make sure you always use the version of the "JS Cloudimage 360 View" code provided within this experience.
Try the sample
You can try this experience using the web-deployed example in the box below. Click either of the buttons in the bottom left to make an item appear on the right. It takes a few moments for all images to load; note the progress bar above the item. Once loaded, drag the item image in either direction to rotate it.
How is this experience built?
Within the Main scene, we use the following assets:
- several Text Assets
- two Button Assets
- a single HTML Frame Asset
HTML code for the HTML Frame Asset
The "Text" value of the HTML Code - Text Asset contains the code below, which uses the Scaleflex library. The HTML Frame's "HTML" property is bound to this Text Asset.
<!DOCTYPE html>
<html lang="en">
<head>
<title>js-cloudimage-360-view</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- simply initialize it with class name "cloudimage-360", server folder path, file name and amount of images -->
<div
class="cloudimage-360"
data-folder="InsertFolderName"
data-filename-x="InsertImageFilename{index}.jpg"
data-amount-x="InsertNumberOfImages"
></div>
<!-- Add script tag with the link to js-cloudimage-360-view lib after all content in body tag -->
<script src="https://data.intuiface.com/KB-Samples/Demos/360Images/JS/js-cloudimage-360-view.min.js"></script>
</body>
</html>
To use your own images, you need to edit the following three fields in the above code:
- Replace "InsertFolderName" with the URL of the folder containing your image sequence.
For example: "https://your-server.com/360Images/ChampagneBottle/"- Important: This folder - and the images within - must be hosted on your own HTTP server (e.g. AWS S3).
- Replace "InsertImageFilename{index}.jpg" with a template representing how each image in the sequence is named. The name of each image must include an integer, represented by {index} in the template. Otherwise, the name and image type is up to you.
Examples include "image{index}.jpg", "foobar{index}.webp", "myitem{index}.png", etc.- Ensure your images use an index from 1 to n, with n being the total number of images. An image with an index of 0 cannot exist.
- Do not use a leading zero in the name of images with a single-digit index. For example, image1.jpg is okay, but image01.jpg is not.
- Replace "InsertNumberOfImages" with the total number of images in your sequence. For example, if you have 30 images, the value within the code should be "30".
- A sequence of 30 images implies that each image is taken at 12-degree intervals around an item. (12 * 30 = 360) However, the content of the actual images is up to you.
Function of the Test Asset "HTML Code - Text Asset"
The text asset HTML Code - Text Asset is used as a visual aid, enabling you to see the final version of the HTML code used by the HTML Frame asset after edits are applied following the abovementioned rules. As indicated in the image below, the "HTML" property of the HTML Frame Asset is bound to the "Text" property of "HTML Code - Text Asset".
Every time you click a button in the sample, the three editable values within the HTML code are changed, and you can see the final code on the left, like in the screenshot below.
In your real project, you can delete this Text Asset and enter your edited HTML code directly in the HTML Frame Asset's "HTML" property. There is no need to display that code.
Selecting an item
Below the canvas of the Main scene are two Text Assets, each containing an edited version of the HTML code. One text asset has the code for images of a champagne bottle, the other has the code for images of a red backpack.
Clicking either of the Button Assets in the bottom left of the experience will set the HTML Code - Text Asset text to match the code in the appropriate Text Asset below the scene's canvas. This screenshot shows our use of the Text Asset's "Set text" action to make this code assignment.
For example, when the Red Backpack button is pressed and released, here is what you will see. Note how this image sequence is comprised of 36 images, with a templated name of img{index].png, located on the server data.intuiface.com.
Comments
0 comments
Article is closed for comments.