Creating a 360° Virtual Tour with Three.js

Based on the available documentation, I can provide some guidance on implementing a 360° virtual tour with smooth transitions using Three.js. While I don't have specific information about the exact implementation used by Metareal, I can suggest approaches using Three.js capabilities.

Recommended Approach

For creating a 360° virtual tour with smooth transitions, you'll want to use a combination of:

1. Controls for navigation - OrbitControls or similar
2. Panoramic images - Using spherical textures
3. Scene transitions - Using animation techniques
4. Optional VR support - For immersive experiences

Implementation Steps

1. Setting up the basic panoramic viewer

First, create a basic panoramic viewer using a spherical geometry:

JAVASCRIPTCopied
// Create a sphere geometry (inside-out)
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // Flip the geometry inside-out

// Load panoramic image
const texture = new THREE.TextureLoader().load('path/to/panorama.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });

// Create the panoramic sphere
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

2. Adding camera controls

Use OrbitControls to allow users to look around:

JAVASCRIPTCopied
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false; // Disable zooming for typical 360 tours
controls.enablePan = false;  // Disable panning
controls.rotateSpeed = 0.5;  // Adjust rotation speed

3. Implementing scene transitions

For smooth transitions between panoramas, you can use animation techniques:

JAVASCRIPTCopied
function transitionToNewPanorama(newPanoramaPath) {
    // Load the new texture
    const newTexture = new THREE.TextureLoader().load(newPanoramaPath);
    const newMaterial = new THREE.MeshBasicMaterial({ 
        map: newTexture,
        opacity: 0,
        transparent: true 
    });
    
    // Create a new sphere with the new panorama
    const newSphere = new THREE.Mesh(geometry.clone(), newMaterial);
    scene.add(newSphere);
    
    // Animate the transition
    const duration = 1.5; // seconds
    let startTime = null;
    
    function animate(time) {
        if (!startTime) startTime = time;
        const elapsed = (time - startTime) / 1000;
        const progress = Math.min(elapsed / duration, 1);
        
        // Fade out old panorama, fade in new one
        sphere.material.opacity = 1 - progress;
        newSphere.material.opacity = progress;
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            // Cleanup after transition
            scene.remove(sphere);
            sphere = newSphere;
            sphere.material.opacity = 1;
            sphere.material.transparent = false;
        }
        
        renderer.render(scene, camera);
    }
    
    // Start the animation
    requestAnimationFrame(animate);
}

4. Adding hotspots for navigation

Create interactive hotspots to navigate between scenes:

JAVASCRIPTCopied
function createHotspot(position, targetPanorama) {
    const hotspotGeometry = new THREE.SphereGeometry(10, 32, 32);
    const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);
    
    hotspot.position.copy(position);
    scene.add(hotspot);
    
    // Make hotspot interactive
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    
    window.addEventListener('click', (event) => {
        // Calculate mouse position in normalized device coordinates
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        
        // Update the picking ray with the camera and mouse position
        raycaster.setFromCamera(mouse, camera);
        
        // Calculate objects intersecting the picking ray
        const intersects = raycaster.intersectObject(hotspot);
        
        if (intersects.length > 0) {
            transitionToNewPanorama(targetPanorama);
        }
    });
}

5. Optional: VR Support

If you want to add VR support, you can use the WebXR API with Three.js:

JAVASCRIPTCopied
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';

// Add VR button to the document
document.body.appendChild(VRButton.createButton(renderer));

// Enable XR rendering
renderer.xr.enabled = true;

Advanced Features

For more advanced features like the ones seen in the Metareal example, you might want to explore:

1. Post-processing for visual effects during transitions
2. Animation system for more complex animations
3. Color management for consistent visuals across different scenes

These topics are covered in the advanced section of the Three.js documentation.

I hope this helps you get started with your 360° virtual tour project. Let me know if you need more specific guidance on any of these aspects!