Implementing Touch Interactions for Canvas with Scrolling and Rotation

To implement a system similar to Model-Viewer that allows both vertical scrolling and touch-based 3D rotation on mobile devices, you'll need to carefully manage touch events and determine user intent.

Here's how you can approach this:

Key Implementation Strategies

1. Differentiate between gestures - Determine whether the user intends to scroll the page or rotate the 3D object
2. Use touch event listeners - Implement proper event handling for touch interactions
3. Apply thresholds - Set movement thresholds to distinguish between scrolling and rotation

Implementation Example

JAVASCRIPTCopied
class TouchInteractionManager {
  constructor(canvas, scrollContainer) {
    this.canvas = canvas;
    this.scrollContainer = scrollContainer;
    this.isRotating = false;
    this.lastTouchX = 0;
    this.lastTouchY = 0;
    this.touchStartTime = 0;
    this.initialTouchY = 0;
    this.movementThreshold = 10; // pixels
    this.timeThreshold = 300; // milliseconds
    this.verticalMovement = 0;
    this.horizontalMovement = 0;
    
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
    this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: false });
    this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
  }
  
  handleTouchStart(event) {
    if (event.touches.length === 1) {
      const touch = event.touches[0];
      this.lastTouchX = touch.clientX;
      this.lastTouchY = touch.clientY;
      this.initialTouchY = touch.clientY;
      this.touchStartTime = Date.now();
      this.verticalMovement = 0;
      this.horizontalMovement = 0;
      this.isRotating = false;
    }
  }
  
  handleTouchMove(event) {
    if (event.touches.length === 1) {
      const touch = event.touches[0];
      const deltaX = touch.clientX - this.lastTouchX;
      const deltaY = touch.clientY - this.lastTouchY;
      
      this.horizontalMovement += Math.abs(deltaX);
      this.verticalMovement += Math.abs(deltaY);
      
      // Determine if this is a rotation or scroll
      if (!this.isRotating) {
        // If horizontal movement is significantly more than vertical, it's likely rotation
        if (this.horizontalMovement > this.movementThreshold && 
            this.horizontalMovement > this.verticalMovement * 1.5) {
          this.isRotating = true;
        }
        // If vertical movement is significant and more than horizontal, it's likely scrolling
        else if (this.verticalMovement > this.movementThreshold && 
                this.verticalMovement > this.horizontalMovement * 1.2) {
          // Allow default scrolling behavior
          return;
        }
      }
      
      if (this.isRotating) {
        // Prevent scrolling when rotating
        event.preventDefault();
        
        // Handle rotation logic here
        this.rotateObject(deltaX, deltaY);
      }
      
      this.lastTouchX = touch.clientX;
      this.lastTouchY = touch.clientY;
    }
  }
  
  handleTouchEnd(event) {
    const touchDuration = Date.now() - this.touchStartTime;
    
    // Handle quick taps separately
    if (touchDuration < this.timeThreshold && 
        this.horizontalMovement < this.movementThreshold && 
        this.verticalMovement < this.movementThreshold) {
      // This is a tap - handle tap logic here
      this.handleTap();
    }
    
    this.isRotating = false;
  }
  
  rotateObject(deltaX, deltaY) {
    // Implement your 3D rotation logic here
    // For example, if using Three.js:
    // this.object.rotation.y += deltaX * 0.01;
    // this.object.rotation.x += deltaY * 0.01;
    
    console.log('Rotating object by', deltaX, deltaY);
  }
  
  handleTap() {
    // Handle tap interaction
    console.log('Object tapped');
  }
}

// Usage
const canvas = document.getElementById('my-3d-canvas');
const scrollContainer = document.body;
const interactionManager = new TouchInteractionManager(canvas, scrollContainer);

Additional Considerations

1. Multi-touch gestures: You might want to add pinch-to-zoom functionality
2. Performance optimization: Use requestAnimationFrame for smooth animations
3. Accessibility: Ensure keyboard controls are also available

This approach uses movement thresholds and directional analysis to determine user intent, similar to how Model-Viewer handles these interactions. The key is finding the right balance in the threshold values to create a natural feeling interaction.