Three.js Hero Selector Implementation

Based on your description, I recommend going with the second approach - using a single scene with all models. This is much more efficient for performance reasons. Here's how you could implement this effectively:

Single Scene Approach

Creating multiple scenes is resource-intensive and can lead to performance issues as you've noticed. Instead, use a single scene and manage the models within it:

1. Create one main scene
2. Load all your hero models (or at least the visible ones plus a few preloaded ones)
3. Position them in a circular or linear arrangement
4. Use transformations to rotate/move the entire group when selecting different heroes

Implementation Suggestions

1. Model Organization

JAVASCRIPTCopied
// Create a parent group for all heroes
const heroesGroup = new THREE.Group();
scene.add(heroesGroup);

// Add each hero model to the group with proper spacing
function addHeroToScene(heroModel, index) {
  // Position heroes in a circle or line
  const angle = (index / totalHeroes) * Math.PI * 2; // For circular arrangement
  const radius = 10; // Distance from center
  
  heroModel.position.set(
    Math.sin(angle) * radius,
    0,
    Math.cos(angle) * radius
  );
  
  heroesGroup.add(heroModel);
  heroes.push(heroModel);
}

2. Interaction Handling

JAVASCRIPTCopied
// Track which hero is currently selected
let selectedHeroIndex = 0;

// Function to rotate to a specific hero
function selectHero(index) {
  const previousIndex = selectedHeroIndex;
  selectedHeroIndex = index;
  
  // Animate the rotation of the entire group
  gsap.to(heroesGroup.rotation, {
    y: -((index / totalHeroes) * Math.PI * 2),
    duration: 1,
    ease: "power2.out"
  });
  
  // Update any UI or state
  updateHeroSelection(previousIndex, selectedHeroIndex);
}

// Handle click on next/previous buttons
function onNextHero() {
  selectHero((selectedHeroIndex + 1) % totalHeroes);
}

function onPreviousHero() {
  selectHero((selectedHeroIndex - 1 + totalHeroes) % totalHeroes);
}

3. Interaction Zones

For your red zone (rotate current hero) and green zone (change selection):

JAVASCRIPTCopied
// Set up raycaster for interaction
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// Handle mouse/touch events
function onPointerDown(event) {
  // Calculate normalized device coordinates
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // Check if we're in the center "red" zone
  if (isInCenterZone(mouse)) {
    enableOrbitControls(); // Allow rotation of current hero
  } else {
    // We're in the "green" zone
    if (mouse.x > 0) {
      onNextHero();
    } else {
      onPreviousHero();
    }
  }
}

function isInCenterZone(mousePos) {
  // Define your center zone boundaries
  const centerZoneRadius = 0.3; // Adjust as needed
  return (Math.sqrt(mousePos.x * mousePos.x + mousePos.y * mousePos.y) < centerZoneRadius);
}

4. Performance Optimization

To further optimize performance:

JAVASCRIPTCopied
// Only render models that are visible or about to become visible
function updateModelVisibility() {
  heroes.forEach((hero, index) => {
    // Calculate distance from selected hero (in terms of index)
    const distance = Math.min(
      Math.abs(index - selectedHeroIndex),
      totalHeroes - Math.abs(index - selectedHeroIndex)
    );
    
    // Only show heroes that are within a certain range
    if (distance <= 3) {
      hero.visible = true;
      // If it's close, use high detail
      if (distance <= 1) {
        setHighDetail(hero);
      } else {
        setLowDetail(hero);
      }
    } else {
      hero.visible = false;
    }
  });
}

This approach gives you the best of both worlds - good performance with the flexibility to handle interactions in different zones. You can use helpers like GridHelper or AxesHelper during development to visualize the positioning and rotation of your models.