如何修改WebGL Globe的render函数实现自动旋转功能？

Hey, glad you're tinkering with the WebGL Globe project—it's such a cool experiment! Let's get that auto-rotation working in your render function.

First, let's break down the original code: the rotation logic is set up to ease toward a target position (usually controlled by mouse input). To make the globe spin automatically, we just need to replace that mouse-following logic with a steady, incremental rotation value.

Option 1: Basic Auto-Rotation (No Mouse Interaction) #

If you don't need to keep mouse-controlled rotation, this simple tweak will make the globe spin horizontally non-stop:

function render() {
  zoom(curZoomSpeed);
  
  // Add a fixed increment to rotation.x for automatic horizontal spin
  // Adjust 0.005 to control speed—higher = faster, negative = reverse
  rotation.x += 0.005;
  
  // Keep vertical rotation fixed (or adjust similarly if you want vertical spin)
  rotation.y = 0.2; // Or keep the original easing logic if you still want some vertical control
  
  distance += (distanceTarget - distance) * 0.3;
  
  camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
  camera.position.y = distance * Math.sin(rotation.y);
  camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
  
  camera.lookAt(globe.position);
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

Option 2: Auto-Rotation + Preserve Mouse Interaction #

If you want the globe to auto-spin normally, but pause and let users drag to reposition it, add a simple interaction flag:

// Configure auto-rotation speed (adjust these values to taste)
const autoRotateSpeed = { x: 0.005, y: 0 };
// Track if the user is actively interacting with the globe
let isUserInteracting = false;

function render() {
  zoom(curZoomSpeed);
  
  if (!isUserInteracting) {
    // Auto-spin when no user input
    rotation.x += autoRotateSpeed.x;
    rotation.y += autoRotateSpeed.y;
  } else {
    // Fall back to original easing logic when user is dragging
    rotation.x += (target.x - rotation.x) * 0.1;
    rotation.y += (target.y - rotation.y) * 0.1;
  }
  
  distance += (distanceTarget - distance) * 0.3;
  
  camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
  camera.position.y = distance * Math.sin(rotation.y);
  camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
  
  camera.lookAt(globe.position);
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

// Add mouse event listeners to toggle interaction mode
document.addEventListener('mousedown', () => { isUserInteracting = true; });
document.addEventListener('mouseup', () => { isUserInteracting = false; });

Key Notes: #

• The rotation increment (like 0.005) controls how fast the globe spins. Play around with this value to get the speed you want.
• If you want vertical auto-rotation too, just add a small increment to rotation.y (e.g., rotation.y += 0.002).
• The camera.lookAt(globe.position) line is crucial—it ensures the camera always points at the globe as it rotates, so you don't lose sight of it.

内容的提问来源于stack exchange，提问作者Roberto Meijide