Globe Testimonials

rohitg377
Mar 17, 2026 11
Animation
Live Preview

Live Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Real 3D Globe · Click for Testimonials</title>
 
</head>
<body>
  <div id="info">🌍 <span>GLOBAL TESTIMONIALS</span> · Click any red pin to read stories</div>
  
  <!-- Testimonial popup (hidden by default) -->
  <div id="testimonialPopup" class="testimonial-card">
    <button id="closePopup">✕</button>
    <div class="card-header">
      <div id="userIcon" class="user-icon">👤</div>
      <div class="user-info">
        <h3 id="userName">Sarah Johnson</h3>
        <div id="userLocation" class="user-location">New York, USA</div>
      </div>
    </div>
    <div id="testimonialText" class="testimonial-text">
      "This product transformed how we do business. Absolutely incredible!"
    </div>
    <div class="card-footer">
      ★★★★★
    </div>
  </div>

  <div id="instructions">
    <div class="instruction-item">
      <span class="instruction-icon">👆</span>
      <span>Drag to rotate</span>
    </div>
    <div class="instruction-item">
      <span class="instruction-icon">🔴</span>
      <span>Click pin for testimonial</span>
    </div>
  </div>

  <!-- Three.js library -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.128.0/build/three.module.js"
      }
    }
  </script>

  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js';

    // --- setup scene ---
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x030614);

    // --- camera ---
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 2, 15);

    // --- renderer ---
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);

    // --- controls ---
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 1.2;
    controls.enableZoom = true;
    controls.maxDistance = 20;
    controls.minDistance = 8;

    // --- stars background ---
    const starsGeometry = new THREE.BufferGeometry();
    const starsCount = 3000;
    const starsPositions = new Float32Array(starsCount * 3);
    
    for (let i = 0; i < starsCount * 3; i += 3) {
      starsPositions[i] = (Math.random() - 0.5) * 200;
      starsPositions[i+1] = (Math.random() - 0.5) * 200;
      starsPositions[i+2] = (Math.random() - 0.5) * 200;
    }
    
    starsGeometry.setAttribute('position', new THREE.BufferAttribute(starsPositions, 3));
    const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.15 });
    const stars = new THREE.Points(starsGeometry, starsMaterial);
    scene.add(stars);

    // --- create real globe with texture ---
    const geometry = new THREE.SphereGeometry(5, 64, 64);
    
    // load earth texture
    const textureLoader = new THREE.TextureLoader();
    const earthTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
    const cloudTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png');
    
    // earth material
    const material = new THREE.MeshPhongMaterial({
      map: earthTexture,
      shininess: 5
    });
    
    const earth = new THREE.Mesh(geometry, material);
    scene.add(earth);

    // --- add clouds layer ---
    const cloudGeometry = new THREE.SphereGeometry(5.02, 64, 64);
    const cloudMaterial = new THREE.MeshPhongMaterial({
      map: cloudTexture,
      transparent: true,
      opacity: 0.3,
      blending: THREE.AdditiveBlending
    });
    const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
    scene.add(clouds);

    // --- add atmosphere glow ---
    const glowGeometry = new THREE.SphereGeometry(5.1, 64, 64);
    const glowMaterial = new THREE.MeshPhongMaterial({
      color: 0x4d6dff,
      transparent: true,
      opacity: 0.1,
      side: THREE.BackSide
    });
    const glow = new THREE.Mesh(glowGeometry, glowMaterial);
    scene.add(glow);

    // --- lighting ---
    const ambientLight = new THREE.AmbientLight(0x404060);
    scene.add(ambientLight);
    
    const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
    dirLight.position.set(10, 10, 10);
    scene.add(dirLight);
    
    const backLight = new THREE.PointLight(0x4466ff, 0.5);
    backLight.position.set(-10, 0, -10);
    scene.add(backLight);

    // --- TESTIMONIAL PINS (3D) ---
    const pins = [];
    
    // testimonial data with user icons
    const testimonials = [
      { 
        name: "Sarah Johnson", 
        location: "New York, USA", 
        text: "This product transformed how we do business. Absolutely incredible!", 
        lat: 40.7, lng: -74.0, 
        color: 0xff4d6d,
        icon: "🇺🇸",
        initial: "SJ"
      },
      { 
        name: "James Wilson", 
        location: "London, UK", 
        text: "The support team is amazing. They helped us every step of the way.", 
        lat: 51.5, lng: -0.1, 
        color: 0x4d6dff,
        icon: "🇬🇧",
        initial: "JW"
      },
      { 
        name: "Yuki Tanaka", 
        location: "Tokyo, Japan", 
        text: "Game changer for our team. Productivity increased by 200%!", 
        lat: 35.7, lng: 139.7, 
        color: 0xffaa00,
        icon: "🇯🇵",
        initial: "YT"
      },
      { 
        name: "Carlos Silva", 
        location: "São Paulo, Brazil", 
        text: "Finally a solution that works for our entire organization.", 
        lat: -23.5, lng: -46.6, 
        color: 0x4dff4d,
        icon: "🇧🇷",
        initial: "CS"
      },
      { 
        name: "Thabo Mbeki", 
        location: "Cape Town, South Africa", 
        text: "The best investment we've made this year. Highly recommended!", 
        lat: -33.9, lng: 18.4, 
        color: 0xff9933,
        icon: "🇿🇦",
        initial: "TM"
      },
      { 
        name: "Emma Chen", 
        location: "Sydney, Australia", 
        text: "Incredible features and even better support. 10/10!", 
        lat: -33.9, lng: 151.2, 
        color: 0xff66cc,
        icon: "🇦🇺",
        initial: "EC"
      },
      { 
        name: "Omar Rahman", 
        location: "Dubai, UAE", 
        text: "Revolutionized our workflow. Can't imagine working without it.", 
        lat: 25.2, lng: 55.3, 
        color: 0x00ccff,
        icon: "🇦🇪",
        initial: "OR"
      }
    ];

    // convert lat/lng to 3D coordinates
    function latLngToPosition(lat, lng, radius) {
      const phi = (90 - lat) * Math.PI / 180;
      const theta = lng * Math.PI / 180;
      return new THREE.Vector3(
        radius * Math.sin(phi) * Math.cos(theta),
        radius * Math.cos(phi),
        radius * Math.sin(phi) * Math.sin(theta)
      );
    }

    // create pins
    testimonials.forEach((t, index) => {
      const pos = latLngToPosition(t.lat, t.lng, 5.15); // slightly above surface
      
      // pin group
      const pinGroup = new THREE.Group();
      pinGroup.position.copy(pos);
      
      // main pin sphere (red)
      const sphereGeo = new THREE.SphereGeometry(0.18, 16, 16);
      const sphereMat = new THREE.MeshStandardMaterial({ 
        color: t.color, 
        emissive: t.color, 
        emissiveIntensity: 0.7 
      });
      const sphere = new THREE.Mesh(sphereGeo, sphereMat);
      pinGroup.add(sphere);
      
      // outer glow ring
      const ringGeo = new THREE.TorusGeometry(0.25, 0.02, 16, 32);
      const ringMat = new THREE.MeshStandardMaterial({ 
        color: t.color, 
        emissive: t.color,
        transparent: true, 
        opacity: 0.4 
      });
      const ring = new THREE.Mesh(ringGeo, ringMat);
      ring.rotation.x = Math.PI / 2;
      ring.rotation.z = Date.now() * 0.001;
      pinGroup.add(ring);
      
      // small cone for pin look
      const coneGeo = new THREE.ConeGeometry(0.1, 0.3, 8);
      const coneMat = new THREE.MeshStandardMaterial({ color: t.color });
      const cone = new THREE.Mesh(coneGeo, coneMat);
      cone.position.y = -0.25;
      pinGroup.add(cone);
      
      // store testimonial data with pin
      pinGroup.userData = { testimonial: t };
      
      scene.add(pinGroup);
      pins.push(pinGroup);
    });

    // --- popup handling (CLICK instead of hover) ---
    const popup = document.getElementById('testimonialPopup');
    const userName = document.getElementById('userName');
    const userLocation = document.getElementById('userLocation');
    const testimonialText = document.getElementById('testimonialText');
    const userIcon = document.getElementById('userIcon');
    const closeBtn = document.getElementById('closePopup');
    
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    
    // close popup when clicking X
    closeBtn.addEventListener('click', () => {
      popup.classList.remove('active');
    });
    
    // click on globe to show testimonial
    renderer.domElement.addEventListener('click', (event) => {
      // calculate mouse position
      mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
      mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
      
      raycaster.setFromCamera(mouse, camera);
      
      // check for intersections with pins
      const intersects = raycaster.intersectObjects(pins, true); // true for recursive
      
      if (intersects.length > 0) {
        // find the parent pin group
        let pinObject = intersects[0].object;
        while (pinObject.parent && !pinObject.userData.testimonial) {
          pinObject = pinObject.parent;
        }
        
        const testimonial = pinObject.userData.testimonial;
        
        if (testimonial) {
          // update popup content
          userName.textContent = testimonial.name;
          userLocation.textContent = testimonial.location;
          testimonialText.textContent = `"${testimonial.text}"`;
          userIcon.textContent = testimonial.icon || testimonial.initial || "👤";
          
          // position popup near mouse
          popup.style.left = (event.clientX - 160) + 'px';
          popup.style.top = (event.clientY - 220) + 'px';
          
          // show popup
          popup.classList.add('active');
          
          // highlight selected pin
          pins.forEach(p => {
            p.children[0].material.emissiveIntensity = 0.3;
            p.children[1].material.opacity = 0.2;
          });
          pinObject.children[0].material.emissiveIntensity = 1;
          pinObject.children[1].material.opacity = 0.8;
        }
      } else {
        // click on empty space doesn't close popup (only X button closes)
        // just remove highlight
        pins.forEach(p => {
          p.children[0].material.emissiveIntensity = 0.7;
          p.children[1].material.opacity = 0.4;
        });
      }
    });

    // --- animation loop ---
    function animate() {
      requestAnimationFrame(animate);
      
      // rotate clouds slightly faster than earth
      clouds.rotation.y += 0.0002;
      
      // animate rings
      pins.forEach(pin => {
        if (pin.children[1]) {
          pin.children[1].rotation.z += 0.01;
        }
      });
      
      controls.update();
      renderer.render(scene, camera);
    }
    
    animate();

    // --- resize handler ---
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

    // click outside to close? we'll let X button handle it
  </script>
</body>
</html>
  body {
      margin: 0;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #030614;
    }
    
    #info {
      position: absolute;
      top: 20px;
      left: 20px;
      color: white;
      z-index: 10;
      background: rgba(0,0,0,0.7);
      padding: 12px 24px;
      border-radius: 40px;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255,255,255,0.2);
      pointer-events: none;
      font-size: 14px;
      letter-spacing: 0.5px;
    }
    
    #info span {
      color: #ff4d6d;
      font-weight: bold;
    }
    
    #instructions {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.8);
      z-index: 10;
      background: rgba(0,0,0,0.5);
      padding: 10px 24px;
      border-radius: 40px;
      font-size: 14px;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex;
      gap: 16px;
    }
    
    .instruction-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .instruction-icon {
      background: #ff4d6d;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    
    /* testimonial popup - appears on click */
    .testimonial-card {
      position: absolute;
      background: rgba(20, 28, 45, 0.98);
      backdrop-filter: blur(15px);
      color: white;
      padding: 24px;
      border-radius: 24px;
      width: 320px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 77, 109, 0.3);
      z-index: 1000;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: scale(0.9);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    
    .testimonial-card.active {
      transform: scale(1);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    
    .card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }
    
    .user-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff4d6d, #ff8c42);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      color: white;
      box-shadow: 0 10px 20px rgba(255, 77, 109, 0.4);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .user-info h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    
    .user-location {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .user-location::before {
      content: "📍";
      font-size: 12px;
    }
    
    .testimonial-text {
      font-size: 15px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 16px;
      font-style: italic;
      padding-left: 12px;
      border-left: 3px solid #ff4d6d;
    }
    
    .card-footer {
      display: flex;
      justify-content: flex-end;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 18px;
      transition: all 0.2s;
    }
    
    .close-btn:hover {
      background: #ff4d6d;
      transform: scale(1.1);
    }
    
    /* close button for popup */
    #closePopup {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    
    #closePopup:hover {
      background: #ff4d6d;
      transform: rotate(90deg);
    }
ENCODED
Categories

Globe Testimonials

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

AI Code Assistant
