实战教学：为WordPress网站添加在线虚拟试衣间与产品3D展示功能

引言：拥抱Web 3.0时代的交互式购物体验

在电子商务竞争日益激烈的今天，静态图片和文字描述已难以满足消费者的购物需求。据统计，提供3D产品展示的电商网站转化率平均提升40%，退货率降低25%。对于时尚电商而言，虚拟试衣间功能更是能将用户参与度提升300%以上。

本教程将深入讲解如何通过WordPress代码二次开发，为您的网站添加在线虚拟试衣间和产品3D展示功能。无论您是WordPress开发者、电商店主还是技术爱好者，都能通过本文学会如何将这些前沿技术整合到您的网站中。

第一部分：技术选型与环境准备

1.1 核心技术与工具评估

在开始开发前，我们需要评估几种主流技术方案：

3D展示技术选项：

• Three.js：最流行的WebGL库，功能强大，社区活跃
• Babylon.js：微软开发的3D引擎，对商业应用友好
• Model-Viewer：Google推出的Web组件，简单易用
• A-Frame：基于Three.js的VR框架，适合沉浸式体验

虚拟试衣间技术方案：

• 2D图像融合：使用Canvas API处理服装与用户图像的合成
• 3D人体建模：基于参数化人体模型调整服装
• AR试穿：通过摄像头实现增强现实试穿效果

开发环境要求：

• WordPress 5.0+版本
• PHP 7.4+环境
• 支持HTML5和WebGL的现代浏览器
• 基本的JavaScript和PHP知识

1.2 创建开发环境

首先，我们需要设置一个安全的开发环境：

// 创建专用插件目录结构
/*
- virtual-fitting-room/
  - virtual-fitting-room.php (主插件文件)
  - includes/
    - class-3d-viewer.php
    - class-virtual-fitting.php
    - class-asset-manager.php
  - assets/
    - js/
      - three.min.js
      - fitting-room.js
    - css/
      - fitting-room.css
    - models/ (3D模型文件)
  - templates/ (前端模板)
  - admin/ (后台管理界面)
*/

在主插件文件中添加基础结构：

<?php
/**
 * Plugin Name: 虚拟试衣间与3D展示
 * Plugin URI: https://yourwebsite.com/
 * Description: 为WordPress产品添加虚拟试衣间和3D展示功能
 * Version: 1.0.0
 * Author: 您的名称
 * License: GPL v2 or later
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 定义插件常量
define('VFR_VERSION', '1.0.0');
define('VFR_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('VFR_PLUGIN_URL', plugin_dir_url(__FILE__));

// 自动加载类文件
spl_autoload_register(function ($class) {
    $prefix = 'VFR_';
    $base_dir = VFR_PLUGIN_DIR . 'includes/';
    
    $len = strlen($prefix);
    if (strncmp($prefix, $class, $len) !== 0) {
        return;
    }
    
    $relative_class = substr($class, $len);
    $file = $base_dir . 'class-' . str_replace('_', '-', strtolower($relative_class)) . '.php';
    
    if (file_exists($file)) {
        require $file;
    }
});

// 初始化插件
function vfr_init() {
    // 检查WordPress版本
    if (version_compare(get_bloginfo('version'), '5.0', '<')) {
        add_action('admin_notices', function() {
            echo '<div class="notice notice-error"><p>虚拟试衣间插件需要WordPress 5.0或更高版本。</p></div>';
        });
        return;
    }
    
    // 初始化核心类
    $vfr_3d_viewer = new VFR_3D_Viewer();
    $vfr_virtual_fitting = new VFR_Virtual_Fitting();
    $vfr_asset_manager = new VFR_Asset_Manager();
}
add_action('plugins_loaded', 'vfr_init');

第二部分：实现3D产品展示功能

2.1 集成Three.js 3D引擎

首先，我们需要将Three.js集成到WordPress中：

// includes/class-asset-manager.php
class VFR_Asset_Manager {
    public function __construct() {
        add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
        add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
    }
    
    public function enqueue_frontend_assets() {
        // 加载Three.js库
        wp_enqueue_script(
            'three-js',
            VFR_PLUGIN_URL . 'assets/js/three.min.js',
            array(),
            'r128',
            true
        );
        
        // 加载OrbitControls（相机控制）
        wp_enqueue_script(
            'three-orbit-controls',
            VFR_PLUGIN_URL . 'assets/js/OrbitControls.js',
            array('three-js'),
            '1.0',
            true
        );
        
        // 加载GLTFLoader（3D模型加载器）
        wp_enqueue_script(
            'three-gltf-loader',
            VFR_PLUGIN_URL . 'assets/js/GLTFLoader.js',
            array('three-js'),
            '1.0',
            true
        );
        
        // 加载自定义3D查看器脚本
        wp_enqueue_script(
            'vfr-3d-viewer',
            VFR_PLUGIN_URL . 'assets/js/3d-viewer.js',
            array('three-js', 'three-orbit-controls', 'three-gltf-loader'),
            VFR_VERSION,
            true
        );
        
        // 加载样式
        wp_enqueue_style(
            'vfr-frontend-style',
            VFR_PLUGIN_URL . 'assets/css/frontend.css',
            array(),
            VFR_VERSION
        );
        
        // 传递数据到JavaScript
        wp_localize_script('vfr-3d-viewer', 'vfr_ajax', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('vfr_nonce')
        ));
    }
}

2.2 创建3D查看器核心功能

// assets/js/3d-viewer.js
class Product3DViewer {
    constructor(containerId, modelPath, options = {}) {
        this.container = document.getElementById(containerId);
        this.modelPath = modelPath;
        this.options = Object.assign({
            backgroundColor: 0xf0f0f0,
            showControls: true,
            autoRotate: true,
            enableZoom: true
        }, options);
        
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.model = null;
        
        this.init();
    }
    
    init() {
        // 创建场景
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(this.options.backgroundColor);
        
        // 创建相机
        this.camera = new THREE.PerspectiveCamera(
            45,
            this.container.clientWidth / this.container.clientHeight,
            0.1,
            1000
        );
        this.camera.position.set(5, 5, 5);
        
        // 创建渲染器
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.container.appendChild(this.renderer.domElement);
        
        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        this.scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(10, 20, 5);
        this.scene.add(directionalLight);
        
        // 添加轨道控制
        if (this.options.showControls) {
            this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
            this.controls.enableZoom = this.options.enableZoom;
            this.controls.autoRotate = this.options.autoRotate;
        }
        
        // 加载3D模型
        this.loadModel();
        
        // 开始动画循环
        this.animate();
        
        // 处理窗口大小变化
        window.addEventListener('resize', () => this.onWindowResize());
    }
    
    loadModel() {
        const loader = new THREE.GLTFLoader();
        
        loader.load(
            this.modelPath,
            (gltf) => {
                this.model = gltf.scene;
                this.scene.add(this.model);
                
                // 调整模型位置和大小
                const box = new THREE.Box3().setFromObject(this.model);
                const center = box.getCenter(new THREE.Vector3());
                const size = box.getSize(new THREE.Vector3());
                
                // 居中模型
                this.model.position.x += (this.model.position.x - center.x);
                this.model.position.y += (this.model.position.y - center.y);
                this.model.position.z += (this.model.position.z - center.z);
                
                // 缩放模型到合适大小
                const maxDim = Math.max(size.x, size.y, size.z);
                const scale = 5 / maxDim;
                this.model.scale.multiplyScalar(scale);
                
                console.log('3D模型加载成功');
            },
            (progress) => {
                // 加载进度回调
                const percent = (progress.loaded / progress.total * 100).toFixed(2);
                console.log(`模型加载进度: ${percent}%`);
            },
            (error) => {
                console.error('3D模型加载失败:', error);
            }
        );
    }
    
    animate() {
        requestAnimationFrame(() => this.animate());
        
        if (this.controls && this.options.autoRotate) {
            this.controls.update();
        }
        
        this.renderer.render(this.scene, this.camera);
    }
    
    onWindowResize() {
        this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
    }
    
    // 公共方法：更换模型
    changeModel(newModelPath) {
        if (this.model) {
            this.scene.remove(this.model);
        }
        this.modelPath = newModelPath;
        this.loadModel();
    }
    
    // 公共方法：更改背景颜色
    setBackgroundColor(color) {
        this.scene.background = new THREE.Color(color);
    }
}

// WordPress集成
document.addEventListener('DOMContentLoaded', function() {
    // 查找所有3D查看器容器
    const viewers = document.querySelectorAll('.vfr-3d-container');
    
    viewers.forEach(container => {
        const modelPath = container.getAttribute('data-model');
        const options = {
            backgroundColor: container.getAttribute('data-bg-color') || 0xf0f0f0,
            autoRotate: container.getAttribute('data-auto-rotate') !== 'false',
            enableZoom: container.getAttribute('data-enable-zoom') !== 'false'
        };
        
        new Product3DViewer(container.id, modelPath, options);
    });
});

2.3 创建WordPress短代码和Gutenberg块

// includes/class-3d-viewer.php
class VFR_3D_Viewer {
    public function __construct() {
        // 注册短代码
        add_shortcode('3d_product_viewer', array($this, 'render_3d_viewer_shortcode'));
        
        // 注册Gutenberg块
        add_action('init', array($this, 'register_gutenberg_block'));
        
        // 添加产品编辑页面元框
        add_action('add_meta_boxes', array($this, 'add_3d_model_meta_box'));
        add_action('save_post_product', array($this, 'save_3d_model_meta'));
    }
    
    // 短代码渲染
    public function render_3d_viewer_shortcode($atts) {
        $atts = shortcode_atts(array(
            'model' => '',
            'width' => '100%',
            'height' => '500px',
            'bg_color' => '#f0f0f0',
            'auto_rotate' => 'true',
            'enable_zoom' => 'true'
        ), $atts, '3d_product_viewer');
        
        // 生成唯一ID
        $viewer_id = 'vfr-3d-viewer-' . uniqid();
        
        // 构建HTML
        $output = '<div class="vfr-3d-container" id="' . esc_attr($viewer_id) . '" ';
        $output .= 'data-model="' . esc_url($atts['model']) . '" ';
        $output .= 'data-bg-color="' . esc_attr($atts['bg_color']) . '" ';
        $output .= 'data-auto-rotate="' . esc_attr($atts['auto_rotate']) . '" ';
        $output .= 'data-enable-zoom="' . esc_attr($atts['enable_zoom']) . '" ';
        $output .= 'style="width:' . esc_attr($atts['width']) . ';height:' . esc_attr($atts['height']) . ';"></div>';
        
        return $output;
    }
    
    // 注册Gutenberg块
    public function register_gutenberg_block() {
        if (!function_exists('register_block_type')) {
            return;
        }
        
        register_block_type('vfr/3d-viewer', array(
            'editor_script' => 'vfr-gutenberg-editor',
            'render_callback' => array($this, 'render_gutenberg_3d_viewer'),
            'attributes' => array(
                'modelUrl' => array('type' => 'string'),
                'width' => array('type' => 'string', 'default' => '100%'),
                'height' => array('type' => 'string', 'default' => '500px'),
                'backgroundColor' => array('type' => 'string', 'default' => '#f0f0f0'),
                'autoRotate' => array('type' => 'boolean', 'default' => true),
                'enableZoom' => array('type' => 'boolean', 'default' => true)
            )
        ));
    }
    
    // 渲染Gutenberg块
    public function render_gutenberg_3d_viewer($attributes) {
        return $this->render_3d_viewer_shortcode(array(
            'model' => $attributes['modelUrl'],
            'width' => $attributes['width'],
            'height' => $attributes['height'],
            'bg_color' => $attributes['backgroundColor'],
            'auto_rotate' => $attributes['autoRotate'] ? 'true' : 'false',
            'enable_zoom' => $attributes['enableZoom'] ? 'true' : 'false'
        ));
    }
    
    // 添加3D模型元框
    public function add_3d_model_meta_box() {
        add_meta_box(
            'vfr_3d_model',
            '3D模型设置',
            array($this, 'render_3d_model_meta_box'),
            'product',
            'side',
            'default'
        );
    }
    
    // 渲染元框内容
    public function render_3d_model_meta_box($post) {
        wp_nonce_field('vfr_3d_model_nonce', 'vfr_3d_model_nonce_field');
        
        $model_url = get_post_meta($post->ID, '_vfr_3d_model_url', true);
        ?>
        <div class="vfr-meta-box">
            <p>
                <label for="vfr_3d_model_url">3D模型URL (GLTF/GLB格式):</label>
                <input type="url" id="vfr_3d_model_url" name="vfr_3d_model_url" 
                       value="<?php echo esc_url($model_url); ?>" 
                       style="width:100%; margin-top:5px;">
            </p>
            <p class="description">
                上传GLTF或GLB格式的3D模型文件，然后在此处粘贴URL。
            </p>
            <button type="button" class="button vfr-upload-model" style="width:100%;">
                上传/选择3D模型
            </button>
        </div>
        
        <script>
        jQuery(document).ready(function($) {
            $('.vfr-upload-model').click(function(e) {
                e.preventDefault();
                
                var frame = wp.media({
                    title: '选择3D模型文件',
                    button: { text: '使用此文件' },
                    multiple: false,
                    library: { type: ['application/octet-stream', 'model/gltf-binary'] }
                });
                
                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    $('#vfr_3d_model_url').val(attachment.url);
                });
                
                frame.open();
            });
        });
        </script>
        <?php
    }
    
    // 保存元数据
    public function save_3d_model_meta($post_id) {
        // 安全检查
        if (!isset($_POST['vfr_3d_model_nonce_field']) || 
            !wp_verify_nonce($_POST['vfr_3d_model_nonce_field'], 'vfr_3d_model_nonce')) {
            return;
        }
        
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return;
        }
        
        if (!current_user_can('edit_post', $post_id)) {
            return;
        }
        
        // 保存3D模型URL
        if (isset($_POST['vfr_3d_model_url'])) {

vfr_3d_model_url']));

    }
}

}

## 第三部分：实现虚拟试衣间功能

### 3.1 虚拟试衣间核心架构设计

虚拟试衣间需要处理用户图像与服装图像的智能合成。我们将采用以下技术路径：

1. **用户身体测量**：通过上传照片或输入尺寸获取用户体型数据
2. **服装变形算法**：根据用户体型调整服装图像
3. **图像合成**：将调整后的服装与用户图像自然融合

// includes/class-virtual-fitting.php
class VFR_Virtual_Fitting {

private $upload_dir;

public function __construct() {
    $this->upload_dir = wp_upload_dir();
    
    // 注册AJAX处理
    add_action('wp_ajax_vfr_process_fitting', array($this, 'process_fitting'));
    add_action('wp_ajax_nopriv_vfr_process_fitting', array($this, 'process_fitting'));
    
    // 注册短代码
    add_shortcode('virtual_fitting_room', array($this, 'render_fitting_room'));
    
    // 添加服装尺寸管理
    add_action('init', array($this, 'register_clothing_size_taxonomy'));
}

// 注册服装尺寸分类法
public function register_clothing_size_taxonomy() {
    $labels = array(
        'name' => '服装尺寸',
        'singular_name' => '尺寸',
        'search_items' => '搜索尺寸',
        'all_items' => '所有尺寸',
        'edit_item' => '编辑尺寸',
        'update_item' => '更新尺寸',
        'add_new_item' => '添加新尺寸',
        'new_item_name' => '新尺寸名称',
        'menu_name' => '尺寸'
    );
    
    register_taxonomy('clothing_size', 'product', array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'size'),
    ));
}

// 渲染虚拟试衣间界面
public function render_fitting_room($atts) {
    $atts = shortcode_atts(array(
        'product_id' => 0,
        'width' => '800px',
        'height' => '600px'
    ), $atts, 'virtual_fitting_room');
    
    // 获取当前用户ID
    $user_id = get_current_user_id();
    
    // 获取用户保存的身体尺寸
    $user_measurements = $user_id ? get_user_meta($user_id, 'vfr_body_measurements', true) : array();
    
    // 获取产品信息
    $product = $atts['product_id'] ? wc_get_product($atts['product_id']) : null;
    
    ob_start();
    ?>
    <div class="vfr-fitting-room-container" style="width:<?php echo esc_attr($atts['width']); ?>; max-width:100%;">
        
        <!-- 用户控制面板 -->
        <div class="vfr-control-panel">
            <div class="vfr-tabs">
                <button class="vfr-tab active" data-tab="upload">上传照片</button>
                <button class="vfr-tab" data-tab="measurements">身体尺寸</button>
                <button class="vfr-tab" data-tab="clothing">选择服装</button>
                <button class="vfr-tab" data-tab="result">试穿效果</button>
            </div>
            
            <!-- 上传照片标签页 -->
            <div class="vfr-tab-content active" id="tab-upload">
                <div class="vfr-upload-area" id="vfr-upload-area">
                    <div class="vfr-upload-instructions">
                        <i class="dashicons dashicons-format-image" style="font-size:48px;color:#ccc;"></i>
                        <p>点击或拖拽上传全身照片</p>
                        <p class="vfr-upload-hint">建议：正面站立，背景简单，光线充足</p>
                    </div>
                    <input type="file" id="vfr-user-photo" accept="image/*" style="display:none;">
                </div>
                <div class="vfr-preview-container" id="vfr-user-preview" style="display:none;">
                    <img id="vfr-user-image" src="" alt="用户照片">
                    <button type="button" class="vfr-remove-image">重新上传</button>
                </div>
            </div>
            
            <!-- 身体尺寸标签页 -->
            <div class="vfr-tab-content" id="tab-measurements">
                <form id="vfr-measurements-form">
                    <div class="vfr-measurement-row">
                        <label>身高 (cm):</label>
                        <input type="number" name="height" value="<?php echo esc_attr($user_measurements['height'] ?? ''); ?>" min="100" max="250">
                    </div>
                    <div class="vfr-measurement-row">
                        <label>胸围 (cm):</label>
                        <input type="number" name="chest" value="<?php echo esc_attr($user_measurements['chest'] ?? ''); ?>" min="50" max="150">
                    </div>
                    <div class="vfr-measurement-row">
                        <label>腰围 (cm):</label>
                        <input type="number" name="waist" value="<?php echo esc_attr($user_measurements['waist'] ?? ''); ?>" min="40" max="150">
                    </div>
                    <div class="vfr-measurement-row">
                        <label>臀围 (cm):</label>
                        <input type="number" name="hips" value="<?php echo esc_attr($user_measurements['hips'] ?? ''); ?>" min="50" max="150">
                    </div>
                    <div class="vfr-measurement-row">
                        <label>肩宽 (cm):</label>
                        <input type="number" name="shoulders" value="<?php echo esc_attr($user_measurements['shoulders'] ?? ''); ?>" min="30" max="80">
                    </div>
                    <button type="button" id="vfr-save-measurements" class="button button-primary">保存尺寸</button>
                    <button type="button" id="vfr-auto-detect" class="button">自动检测</button>
                </form>
            </div>
            
            <!-- 选择服装标签页 -->
            <div class="vfr-tab-content" id="tab-clothing">
                <?php if ($product): ?>
                <div class="vfr-product-selection">
                    <h4>当前产品: <?php echo esc_html($product->get_name()); ?></h4>
                    <div class="vfr-clothing-options">
                        <div class="vfr-color-options">
                            <label>颜色:</label>
                            <?php
                            if ($product->is_type('variable')) {
                                $colors = $product->get_available_variations();
                                foreach ($colors as $color) {
                                    echo '<button type="button" class="vfr-color-option" data-color="' . esc_attr($color['attributes']['attribute_color']) . '">' . esc_html($color['attributes']['attribute_color']) . '</button>';
                                }
                            }
                            ?>
                        </div>
                        <div class="vfr-size-options">
                            <label>尺寸:</label>
                            <?php
                            $sizes = get_terms(array('taxonomy' => 'clothing_size', 'hide_empty' => false));
                            foreach ($sizes as $size) {
                                echo '<button type="button" class="vfr-size-option" data-size="' . esc_attr($size->slug) . '">' . esc_html($size->name) . '</button>';
                            }
                            ?>
                        </div>
                    </div>
                </div>
                <?php else: ?>
                <p>请选择要试穿的产品</p>
                <?php endif; ?>
            </div>
            
            <!-- 试穿效果标签页 -->
            <div class="vfr-tab-content" id="tab-result">
                <div class="vfr-result-container">
                    <canvas id="vfr-fitting-canvas" width="400" height="600"></canvas>
                    <div class="vfr-result-controls">
                        <button type="button" id="vfr-download-result" class="button">下载图片</button>
                        <button type="button" id="vfr-share-result" class="button">分享</button>
                        <button type="button" id="vfr-try-another" class="button">试穿其他</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 试衣预览区域 -->
        <div class="vfr-preview-area">
            <div class="vfr-preview-wrapper">
                <div class="vfr-original-preview">
                    <h4>原始照片</h4>
                    <div id="vfr-original-container"></div>
                </div>
                <div class="vfr-fitted-preview">
                    <h4>试穿效果</h4>
                    <div id="vfr-fitted-container"></div>
                </div>
            </div>
            <div class="vfr-loading" id="vfr-loading" style="display:none;">
                <div class="vfr-spinner"></div>
                <p>正在处理中...</p>
            </div>
        </div>
    </div>
    
    <script>
    // 虚拟试衣间JavaScript逻辑将在下面实现
    </script>
    <?php
    
    return ob_get_clean();
}

// 处理试衣请求
public function process_fitting() {
    // 验证nonce
    if (!check_ajax_referer('vfr_nonce', 'nonce', false)) {
        wp_die('安全验证失败', 403);
    }
    
    // 获取POST数据
    $user_image = $_POST['user_image'] ?? '';
    $product_id = intval($_POST['product_id'] ?? 0);
    $measurements = $_POST['measurements'] ?? array();
    $color = sanitize_text_field($_POST['color'] ?? '');
    $size = sanitize_text_field($_POST['size'] ?? '');
    
    // 验证数据
    if (empty($user_image) || $product_id <= 0) {
        wp_send_json_error('缺少必要数据');
    }
    
    // 解码base64图像
    $user_image = str_replace('data:image/png;base64,', '', $user_image);
    $user_image = str_replace(' ', '+', $user_image);
    $user_image_data = base64_decode($user_image);
    
    // 保存临时文件
    $temp_dir = $this->upload_dir['basedir'] . '/vfr_temp/';
    if (!file_exists($temp_dir)) {
        wp_mkdir_p($temp_dir);
    }
    
    $user_image_path = $temp_dir . uniqid('user_') . '.png';
    file_put_contents($user_image_path, $user_image_data);
    
    // 获取产品图像
    $product = wc_get_product($product_id);
    $product_image_id = $product->get_image_id();
    $product_image_path = get_attached_file($product_image_id);
    
    // 调用图像处理函数
    $result = $this->process_clothing_fitting($user_image_path, $product_image_path, $measurements);
    
    if ($result['success']) {
        // 将结果图像转换为base64
        $result_image = base64_encode(file_get_contents($result['path']));
        
        // 清理临时文件
        unlink($user_image_path);
        unlink($result['path']);
        
        // 保存用户尺寸（如果用户已登录）
        if (is_user_logged_in() && !empty($measurements)) {
            update_user_meta(get_current_user_id(), 'vfr_body_measurements', $measurements);
        }
        
        wp_send_json_success(array(
            'image' => 'data:image/png;base64,' . $result_image,
            'message' => '试穿处理完成'
        ));
    } else {
        wp_send_json_error($result['message']);
    }
}

// 服装试穿处理核心算法
private function process_clothing_fitting($user_image_path, $clothing_image_path, $measurements) {
    // 这里实现图像处理算法
    // 实际项目中可能需要使用OpenCV、ImageMagick或深度学习模型
    
    // 简化版实现：使用PHP GD库进行基本图像处理
    $user_image = imagecreatefrompng($user_image_path);
    $clothing_image = imagecreatefrompng($clothing_image_path);
    
    if (!$user_image || !$clothing_image) {
        return array('success' => false, 'message' => '图像加载失败');
    }
    
    // 获取图像尺寸
    $user_width = imagesx($user_image);
    $user_height = imagesy($user_image);
    
    // 根据用户尺寸调整服装图像
    $scale_factor = $this->calculate_scale_factor($measurements, $user_height);
    $clothing_width = imagesx($clothing_image) * $scale_factor;
    $clothing_height = imagesy($clothing_image) * $scale_factor;
    
    // 创建新图像
    $result_image = imagecreatetruecolor($user_width, $user_height);
    
    // 复制用户图像
    imagecopy($result_image, $user_image, 0, 0, 0, 0, $user_width, $user_height);
    
    // 调整服装图像大小
    $scaled_clothing = imagescale($clothing_image, $clothing_width, $clothing_height);
    
    // 计算服装位置（简化版：居中放置）
    $x_position = ($user_width - $clothing_width) / 2;
    $y_position = $user_height * 0.3; // 假设服装从30%高度开始
    
    // 合并图像（使用alpha混合）
    $this->image_alpha_merge($result_image, $scaled_clothing, $x_position, $y_position, 0, 0, $clothing_width, $clothing_height, 100);
    
    // 保存结果
    $result_path = $this->upload_dir['basedir'] . '/vfr_temp/result_' . uniqid() . '.png';
    imagepng($result_image, $result_path);
    
    // 释放内存
    imagedestroy($user_image);
    imagedestroy($clothing_image);
    imagedestroy($result_image);
    imagedestroy($scaled_clothing);
    
    return array('success' => true, 'path' => $result_path);
}

// 计算缩放因子
private function calculate_scale_factor($measurements, $user_height) {
    // 简化算法：根据身高比例缩放
    $standard_height = 170; // 标准身高170cm
    $height = $measurements['height'] ?? $user_height;
    
    return $height / $standard_height;
}

// Alpha通道图像合并
private function image_alpha_merge($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct) {
    // 创建临时图像
    $tmp_im = imagecreatetruecolor($src_w, $src_h);
    
    // 复制源图像到临时图像
    imagecopy($tmp_im, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h);
    imagecopy($tmp_im, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h);
    imagecopymerge($dst_im, $tmp_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct);
    
    // 释放临时图像
    imagedestroy($tmp_im);
}

}

### 3.2 虚拟试衣间前端交互实现

// assets/js/fitting-room.js
class VirtualFittingRoom {

constructor() {
    this.userImage = null;
    this.measurements = {};
    this.selectedProduct = null;
    this.selectedColor = null;
    this.selectedSize = null;
    
    this.init();
}

init() {
    this.setupEventListeners();
    this.setupDragAndDrop();
    this.loadSavedMeasurements();
}

setupEventListeners() {
    // 标签页切换
    document.querySelectorAll('.vfr-tab').forEach(tab => {
        tab.addEventListener('click', (e) => {
            this.switchTab(e.target.dataset.tab);
        });
    });
    
    // 上传区域点击
    document.getElementById('vfr-upload-area').addEventListener('click', () => {
        document.getElementById('vfr-user-photo').click();
    });
    
    // 文件选择
    document.getElementById('vfr-user-photo').addEventListener('change', (e) => {
        this.handleImageUpload(e.target.files[0]);
    });
    
    // 保存尺寸
    document.getElementById('vfr-save-measurements').addEventListener('click', () => {
        this.saveMeasurements();
    });
    
    // 自动检测
    document.getElementById('vfr-auto-detect').addEventListener('click', () => {
        this.autoDetectMeasurements();
    });
    
    // 颜色选择
    document.querySelectorAll('.vfr-color-option').forEach(option => {
        option.addEventListener('click', (e) => {
            this.selectColor(e.target.dataset.color);
        });
    });
    
    // 尺寸选择
    document.querySelectorAll('.vfr-size-option').forEach(option => {
        option.addEventListener('click', (e) => {
            this.selectSize(e.target.dataset.size);
        });
    });
    
    // 处理试衣
    document.getElementById('vfr-process-fitting').addEventListener('click', () => {
        this.processFitting();
    });
}

setupDragAndDrop() {
    const uploadArea = document.getElementById