Creating a 360° Product Viewer with Three.js

For your WooCommerce product rotation viewer, Three.js offers several approaches to implement this functionality. Based on your requirements of using multiple 2D PNG images for horizontal rotation, I'll outline a solution using Three.js controls.

Approach: Using OrbitControls with Image Sequence

You can create a simple 360° product viewer by mapping your sequence of images onto a plane and using OrbitControls to handle the rotation interaction.

Basic Implementation

JAVASCRIPTCopied
// Import necessary Three.js modules
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Setup scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true }); // Alpha for transparent background
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('product-viewer-container').appendChild(renderer.domElement);

// Camera position
camera.position.z = 5;

// Product images array (paths to your PNG sequence)
const productImages = [
  '/path/to/image1.png',
  '/path/to/image2.png',
  // ... add all your product rotation images
];

// Variables to track current image
let currentImageIndex = 0;
const totalImages = productImages.length;

// Create a texture loader
const textureLoader = new THREE.TextureLoader();

// Load the first image
let texture = textureLoader.load(productImages[0]);
const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
const geometry = new THREE.PlaneGeometry(4, 4); // Adjust size as needed
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// Setup OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false; // Disable zoom if not needed
controls.enablePan = false; // Disable panning
controls.enableDamping = true; // Smooth rotation
controls.dampingFactor = 0.05;

// Restrict vertical rotation if you only want horizontal rotation
controls.minPolarAngle = Math.PI / 2;
controls.maxPolarAngle = Math.PI / 2;

// Track rotation to update images
let previousAngle = controls.getAzimuthalAngle();

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  controls.update();
  
  // Check if we need to update the image based on rotation
  const currentAngle = controls.getAzimuthalAngle();
  const angleDifference = currentAngle - previousAngle;
  
  if (Math.abs(angleDifference) > (Math.PI * 2 / totalImages)) {
    // Determine direction of rotation
    if (angleDifference > 0 || (angleDifference < 0 && angleDifference < -Math.PI)) {
      // Rotating right
      currentImageIndex = (currentImageIndex + 1) % totalImages;
    } else {
      // Rotating left
      currentImageIndex = (currentImageIndex - 1 + totalImages) % totalImages;
    }
    
    // Update texture
    texture = textureLoader.load(productImages[currentImageIndex]);
    material.map = texture;
    material.needsUpdate = true;
    
    previousAngle = currentAngle;
  }
  
  renderer.render(scene, camera);
}

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

animate();

Alternative: Using DragControls

If you prefer a more direct dragging interaction, you can use DragControls:

JAVASCRIPTCopied
import * as THREE from 'three';
import { DragControls } from 'three/examples/jsm/controls/DragControls.js';

// Similar setup as above, but with DragControls
const controls = new DragControls([plane], camera, renderer.domElement);

// Track drag movement
let dragStartX = 0;
let dragThreshold = 20; // Pixels to move before changing image

controls.addEventListener('dragstart', function(event) {
  dragStartX = event.clientX;
});

controls.addEventListener('drag', function(event) {
  const dragDelta = event.clientX - dragStartX;
  
  if (Math.abs(dragDelta) > dragThreshold) {
    // Determine direction
    if (dragDelta > 0) {
      // Dragging right
      currentImageIndex = (currentImageIndex - 1 + totalImages) % totalImages;
    } else {
      // Dragging left
      currentImageIndex = (currentImageIndex + 1) % totalImages;
    }
    
    // Update texture
    texture = textureLoader.load(productImages[currentImageIndex]);
    material.map = texture;
    material.needsUpdate = true;
    
    // Reset drag start position
    dragStartX = event.clientX;
  }
});

Integration with WordPress/WooCommerce

To integrate this with WordPress:

1. Enqueue Three.js and your custom script in your plugin
2. Create a shortcode or block that adds the container element
3. Pass the product image URLs from PHP to JavaScript

Here's a simplified example of how you might set this up in your plugin:

PHPCopied
// Enqueue scripts
function enqueue_product_viewer_scripts() {
    if (is_product()) {
        wp_enqueue_script('threejs', 'path/to/three.min.js', array(), '1.0.0', true);
        wp_enqueue_script('orbit-controls', 'path/to/OrbitControls.js', array('threejs'), '1.0.0', true);
        wp_enqueue_script('product-viewer', 'path/to/your-script.js', array('threejs', 'orbit-controls'), '1.0.0', true);
        
        // Get product images
        global $product;
        $image_ids = $product->get_gallery_image_ids();
        $image_urls = array();
        
        foreach ($image_ids as $image_id) {
            $image_urls[] = wp_get_attachment_url($image_id);
        }
        
        wp_localize_script('product-viewer', 'productViewerData', array(
            'images' => $image_urls
        ));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_product_viewer_scripts');

// Add shortcode
function product_viewer_shortcode() {
    return '<div id="product-viewer-container" style="width: 100%; height: 400px;"></div>';
}
add_shortcode('product_viewer', 'product_viewer_shortcode');

This approach should give you a good starting point for implementing a 360° product viewer in your WooCommerce plugin using Three.js.