How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum

360° panorama is a cost‑effective virtual reality solution that lets users explore real‑world environments such as hotels, real‑estate, and interior design without leaving their seats, improving user experience and conversion rates.

CSS3 Method

By leveraging CSS3 transforms, a 3D cube is built where each of the six faces displays one of the panorama images.

Create a 3D cube using transform‑style: preserve-3d and perspective.

Assign the six exported images to the six faces of the cube.

Adjust translateZ and rotation angles to achieve the panoramic effect.

Add touch or mouse events to rotate the cube.

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">front</div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

Three.js Method

Three.js provides a WebGL‑based engine to create a skybox or sphere that displays panoramic textures.

const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x156289 });
const skyBox = new THREE.Mesh(geometry, material);

Replace the solid color with six texture images:

const textureLoader = new THREE.TextureLoader();
const textures = [
  'https://img.alicdn.com/.../px.jpg',
  'https://img.alicdn.com/.../nx.jpg',
  'https://img.alicdn.com/.../py.jpg',
  'https://img.alicdn.com/.../ny.jpg',
  'https://img.alicdn.com/.../pz.jpg',
  'https://img.alicdn.com/.../nz.jpg'
];
const materials = textures.map(url => new THREE.MeshBasicMaterial({ map: textureLoader.load(url) }));
const skyBox = new THREE.Mesh(geometry, materials);
skyBox.geometry.scale(-1, 1, 1); // flip for interior view

Optional camera and control settings improve interaction:

camera.position.z = 0.01;
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.enableDamping = true;
controls.rotateSpeed = -0.25;

Pannellum Method

Pannellum is a lightweight, open‑source WebGL panorama viewer supporting cubemap and equirectangular projections.

pannellum.viewer('container', {
  type: 'cubemap',
  cubeMap: [
    'https://img.alicdn.com/.../front.jpg',
    'https://img.alicdn.com/.../right.jpg',
    'https://img.alicdn.com/.../back.jpg',
    'https://img.alicdn.com/.../left.jpg',
    'https://img.alicdn.com/.../top.jpg',
    'https://img.alicdn.com/.../bottom.jpg'
  ]
});

krpano Note

krpano is a professional, feature‑rich panorama engine that requires XML configuration and a commercial license; for simple hotel‑detail pages the team chose the lighter Pannellum instead.

embedpano({
  xml: 'https://raw.githubusercontent.com/.../config.xml',
  target: 'container',
  html5: 'auto',
  mobilescale: 1.0
});

Conclusion

The article presented four ways to implement 360° panorama—CSS3, Three.js, Pannellum, and krpano—explaining cube and sphere projection techniques, providing demo code, and recommending the Pannellum‑based @ali/rmpi‑cube component for Alibaba’s travel‑hotel product.