Enrich and Share 3D Tours Publicly

Publishing and sharing 3D tours publicly is easy - just switch on the Publish & Social Share option in the Publisher tab. 

When a tour is published, a unique URL starting with player.cupix.com will be assigned to the 3D tour. Anyone with this URL can view the tour using the Cupix Web Player. The Web Player is an HTML based web player in which 3D tour is loaded and displayed from our hosting server. The default Web Player settings allows the viewer to explore 3D spaces in a highly immersive way. However, there are several Web Player customization options that allow you to fine-tune user experience and increase user engagement while achieving your business goals effectively.

Browser Requirements

The Web Player requires an internet connection and a web browser that supports the WebGL standard. Check your browser compatibility with WebGL by opening a test page at get.webgl.org. Chrome, Firefox, Safari, Edge, and Internet Explorer 11 support WebGL, including mobile versions of the browsers. If WebGL does not work with the latest version of one of these browsers, make sure WebGL is enabled by checking the settings or preferences.

Review a 3D Tour Before Sharing

To review a 3D tour before publishing it, access it from the Review tab of the Tour Editor. When examining a tour in the Review tab, make sure your customizations and setup work as intended for public viewing.

Best Practices for Sharing 3D Tours

Add Branding to the Tour

Cupix offers the option to add a loading logo, a watermark image, and a nadir photo to display company branding in different locations in your 3D tour. Go to the Player Settings tab under the Settings menu to upload these three types of images to display them inside the Web Player.

  • Loading Logo
    The loading logo appears next to the ‘Presented by’ headline in the Web Player loading screen while it downloads data from the hosting server and prepares to render the 3D tour.
  • Watermark Image
    After the Web player loads the 3D tour, the watermark image appears at the top center of the player.
  • Nadir Photo
    The nadir in a 360 photo is the point directly below the observer, and the nadir photo is located on the ground at the bottom of the photo. In addition to offering another option to display company branding, you can use the nadir photo to hide the tripod, the helmet the camera is mounted on, or the hand holding the camera.

These player settings are applied to all 3D tours within the same workspace. Create more workspaces to use different branding on separate tours.

Additional information associated with a 3D tour can be added from 3D Tour Properties. ;Use the ‘Info displayed in the Player’ field to add your contact information, website link, and any other information you’d like for tour viewers to know. This information is displayed when the 3D Player loads. The 3D Tour Properties window is accessible from the Overview tab of the Tour Editor. These custom settings from the Tour Editor are applied only to the specific 3D tour.

Note: Complying with MLS guidelines. MLS listing sites restrict information shown in online tours, including branding information. To display tours that already have branding images added to them without deleting the images or creating a separate tour, add the URL parameter ?brand=0 to the end of the player URL.

Use 3D Objects

The Cupix editor allows you to insert 3D objects like 3D text, photo frames, and pushpins into your tour. You can use these objects as a subtle way to include branding as they easily blend into a 3D tour and may help give a more professional feel to the tour.

3D Text

Use 3D Text to add a company name, a business tagline, or any other words within your 3D tour. You can customize the color and size of the 3D text. To add 3D Text to your tour, access Insert > 3D Text from the Tour Editor toolbar.

Photo Frame

Use Photo Frame objects to add your own graphics at a desired location inside the 3D tour. These images are added without using photo editing software by overlaying the uploaded graphics on top of 3D tour panoramic photos.

Tip: You can use a video clip as the source file in a Photo Frame object. The video clip will automatically start playing when the Web Player is opened. The Asset Library currently does not support video file uploads. To add a video clip in a photo frame object, store and publish the video using cloud storage (like Dropbox) and set the video URL after clicking the Image File option in the Photo Frame creation dialog window.

Pushpin

Pushpins are 3D objects attached to a specific anchor point in a 3D tour and display collapsible content when the pinhead is clicked. The Pushpin object is a particularly powerful tool because it calls attention to a point of interest while allowing the viewer to access and hide related information, reducing visual clutter for the 3D tour audience. The collapsible Description window of a pushpin allow the tour creator to add formatted paragraphs, high-resolution images from the Asset Library, and video links from YouTube, Vimeo, or Wistia. This content is all accessible inside the 3D tour.

The Anchor Point is the 3D coordinate where the pushpin originates from in the 3D tour. Use it to point out objects of interest in the tour. There are several ways to select the anchor point location from the Point Picking Methods window. We recommend using the Common Point from 2 Panos method for when setting the location of the Anchor Point, since this method allows you to set a 3D point accurately without the use of a 3D mesh. If the 3D anchor point is not set correctly, the pushpin may be misaligned when you move to a different pano and your viewpoint changes.

Tip: The 3D mesh that is generated with a 3D tour can be used to position inserted 3D objects like 3D Text, photo frames, and pushpins. These 3D virtual objects can be fully or partially visible if they are positioned behind the underlying 3D mesh, and this embedded look is what makes 3D objects look natural within a tour. However, sometimes there are not enough photos uploaded to fully render a 3D mesh, or the generated mesh is oversized. This results in unexpected visibility and interactions between the mesh and the 3D objects. In this case, you can use one of two 3D Box options to modify the 3D mesh. To add or subtract from the mesh geometry, use the See-Through Box option (extract the box from the mesh) or the Occlusion Box (add the box to the mesh) option. These boxes affect the mesh geometry and are not shown in the 3D tour.

Implementing the Best User Experience

A good user experience helps attract and retain customers. By making your 3D virtual tours easy to use, immersive, and visually informative, you can increase the number of views and encourage people to spend more time exploring your tours. Once you are familiar with Cupix’s editing and customization tools, you can come up with numerous creative ways to present your tour to your customers and collaborators. This can help you build a strong brand identity and differentiate your company from your competitors.

Use options in the Publisher tab of the Tour Editor to fine-tune the user experience.

Setting a Cover Image

You can add a Cover Image to your tour in the Publisher tab. The Cover Image you set is displayed in the background of the Web Player when it loads the 3D tour. It is the first image the viewer sees, giving the audience a quick idea of what your 3D tour presents and how the space is showcased. The cover image is also used as the link preview image when the social media share URL is copied and pasted on different social media platforms.

Use the Hotspot Object for Dynamic Navigation

The Hotspot object allows you to insert a hyperlink in your tour that appears as an icon you can select from a predesigned set. These icons include commonly used universal symbols, and icons that highlight navigation, transportation, location, and shopping. The Hotspot object is a highly versatile 3D object you can use for several different use case scenarios.

  • You can link a Hotspot to a Viewpoint Link, which is a link to a pano set with a specific field of view and angle. Obtain the Viewpoint Link by clicking the Link icon in the toolbar.Place Hotspot objects on walls or the floor to direct the view of 3D tour visitors so they experience certain locations the way you want while they explore the space.
  • You can also link a Hotspot to a web URL. You can make the Hotspot a Call-to-Action button by linking the Hotspot to your website at a certain location in the tour.

Curate a Highlight Reel to Access Important Viewpoints

The Highlight Reel contains a list thumbnail images that are linked to important panos that you can bring to the attention of your viewer. Unlike Hotspot objects which are only visible in panos that have a view on where the objects are embedded, the Highlight Reel remains at the bottom front of the web player and allows the audience to access any of the panos from any location in the 3D tour. Curate and set the viewpoints of these highlighted panos from the Publisher tab.

  • You can add panos to a Highlight Reel by clicking the ‘Add to Highlights’ button in the Edit Opening Panos toolbar.
  • To move a Highlight in the reel, hover the mouse pointer over a thumbnail image. Drag the image by clicking and holding the move handle in the top-left corner. Edit the name of the Highlight by clicking the pencil icon, and retake the thumbnail image by clicking the camera icon.
  • To change the initial view of a Highlight pano, first access and adjust the pano to the desired viewing angle and field of view. Click ‘Use this Viewpoint at Opening’ in the Edit Opening Panos toolbar to set the pano as displayed as the initial viewpoint. 

Use Sections for Multi-level Properties or Large Scale Sites

A Section is a collection of panos which represents a certain area of the space captured in the 3D tour. For buildings with multiple floors or levels, separate each level into a Section during site capture. For large scale sites, we recommend splitting the site into Sections for every 10,000 square feet (about 1,000 square meters). If you have multiple sections in a single 3D tour, you can set up the Web Player so people can easily navigate through the Sections. Use the Section Selector in the Publisher tab to add sections you want accessible to the viewer.

  • Add sections to display from the Section Selector. Viewers can access these sections by using the pulldown menu in the Web Player or the Review tab.
  • Hotspots or the Highlight Reel panos are accessible to different sections. Use them as another method for viewers to navigate between sections.
  • For large scale sites, combine Sections into a Group and align them to a floor plan from the Layout tab. You can create a seamless navigation experience but this method requires more advanced skills. Refer to "Combining Sections" for further details.

Camera Animation

Using the Camera Animation tool you can create an auto-playing animation from pano viewpoints set as keyframes. The animation can be set to immediately play after the 3D tour loads, or it can be started by the audience. Viewers can stop the Camera Animation at any time to explore the 3D tour.

  • To add the current pano with the viewpoint displayed onscreen as a new keyframe, click the plus button under Camera Animation.
  • Set the name, duration, and acceleration of the pano keyframe in ‘Animation Frame Parameters’. The animation is created using these selected keyframes and the associated animation parameters you set.
  • If you want the Camera Animation to automatically play after the 3D tour is loaded, switch on the Auto Camera Animation option in the Customize Player menu.
  • The Camera Animation tool can also be used to create stunning promotional videos. Use a screen recording software while the Camera Animation is playing, then edit the footage into the desired marketing video.

Embedding 3D Tours on a Web Page

You can embed 3D tours on a web page so that readers can directly view the tour on the page instead of accessing the tour on a separate page through a link. The following instructions describe how to embed a 3D tour on a web page:

  • From ‘Embed’ in the Publisher tab, copy the iframe embed code and paste it in the HTML source code of your web page. If you are using a CMS (change management system) like Wordpress, Wix, Blogger, and so forth, follow their exact instructions regarding how to insert iframe code.
  • Edit iframe parameters like display width, height, and frame border from the Embed Window. You can also set the iframe to display the 3D tour in full screen mode.