SG Navy Virtual Tour

Dentsu IsobarFront-end development2017

Explore a Navy ship in 360°.

The Republic of Singapore Navy wanted to give audiences a closer look inside one of its warships through an immersive digital experience.

Republic of Singapore Navy Virtual Tour title screen with ships at sea. — The virtual tour’s opening screen.

Brief

An immersive 360-degree virtual tour that let audiences explore a Republic of Singapore Navy warship directly from the browser.

Role

Custom 360° engine and front-end development

360°Browser-based exploration

Approach

Developed during Naveen’s time with Dentsu Isobar, the browser-based 360° tour let users move between areas of the vessel, look around and discover contextual details.

The project used a custom 360° engine rather than an off-the-shelf virtual tour platform.

The Experience

**Explore the ship’s working deck**Looking around the ship’s working deck, with location thumbnails and interactive hotspots in view.

The browser-based tour let visitors move between locations aboard the ship, look around each 360° scene and open contextual points.

A restrained interface kept navigation simple across desktop, mobile and tablet while leaving the ship in focus.

The Build

The tour used a custom 360° engine built with Three.js and GSAP to control navigation, transitions and interactive elements.

A 3D mapping tool positioned labels and hotspots within each scene.

**Discover details through hotspots**A hotspot opens an information panel inside the ship’s accommodation.

Interactive 360° demo

Step inside a sample submarine interior.

Sample U-434 / B-515 submarine interior with yellow instrument panels, pipes and control wheels.

Mouse: drag to pan and tilt. Touch: drag left or right to pan. With the panorama focused: arrow keys pan and tilt, + and − zoom, Home resets. The buttons work too. Vertical touch gestures and the mouse wheel scroll the page.

The sample panorama becomes interactive as you approach it.

Sample: U-434 / B-515 submarine interior. © Tim Rademacher / Wikimedia Commons (CC BY-SA 4.0). Resized and compressed. Demonstration imagery; not from the SG Navy project.

Challenge

The custom tour had to balance image quality, interaction and performance across devices and browsers.

As a Singapore Government project, it also had technical, accessibility and security requirements. The experience was tested across devices and browsers and underwent penetration testing.

**Move through the ship**The tour moves from a lounge to the ship’s command centre.

Results

The ship, open to explore.

The tour offered a browser-based way to explore the ship through 360° scenes and interactive points.

Keyboard shortcuts

Objects & materials