1

2026-05-13 10:43:06 +08:00
parent 6cefd063f2
commit 223fa5dd4e
19 changed files with 2282 additions and 104 deletions
--- a/examples/drag-example.html
+++ b/examples/drag-example.html
@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模型拖拽示例</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+        }
+        #canvas {
+            width: 100vw;
+            height: 100vh;
+            display: block;
+        }
+        .controls {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            max-width: 300px;
+        }
+        .controls h3 {
+            margin-top: 0;
+        }
+        .controls button {
+            margin: 5px;
+            padding: 8px 15px;
+            cursor: pointer;
+            border: none;
+            border-radius: 4px;
+            background: #4CAF50;
+            color: white;
+            font-size: 14px;
+        }
+        .controls button:hover {
+            background: #45a049;
+        }
+        .controls button.active {
+            background: #2196F3;
+        }
+        .info {
+            margin-top: 15px;
+            font-size: 12px;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+
+    <div class="controls">
+        <h3>模型拖拽控制</h3>
+
+        <div>
+            <strong>切换轴向：</strong><br>
+            <button id="axisX" onclick="switchAxis('x')">X 轴</button>
+            <button id="axisY" onclick="switchAxis('y')" class="active">Y 轴</button>
+            <button id="axisZ" onclick="switchAxis('z')">Z 轴</button>
+        </div>
+
+        <div style="margin-top: 15px;">
+            <strong>拖拽控制：</strong><br>
+            <button onclick="toggleDrag()">启用/禁用拖拽</button>
+        </div>
+
+        <div class="info">
+            <strong>使用说明：</strong><br>
+            • 点击并拖动模型进行移动<br>
+            • 当前只能沿一个轴移动<br>
+            • 使用按钮切换激活的轴向<br>
+            • 键盘快捷键：X/Y/Z 键切换轴向
+        </div>
+
+        <div class="info" style="margin-top: 10px;">
+            <strong>当前状态：</strong><br>
+            <span id="status">拖拽已启用 | 激活轴：Y</span>
+        </div>
+    </div>
+
+    <script type="module">
+        import { MainApp } from '../dist/assets/index.js';
+
+        let mainApp;
+        let currentAxis = 'y';
+        let dragEnabled = true;
+
+        // 初始化应用
+        async function init() {
+            mainApp = new MainApp();
+
+            // 加载配置
+            mainApp.loadAConfig({
+                container: document.getElementById('canvas'),
+                modelUrlList: []
+            });
+
+            // 初始化场景
+            await mainApp.Awake();
+
+            // 添加可拖拽的模型
+            await mainApp.appModel.add({
+                modelId: 'draggableModel',
+                modelUrl: 'path/to/your/model.glb', // 替换为实际模型路径
+                drag: {
+                    enable: true,
+                    axis: 'y',
+                    step: 0.1,
+                }
+            });
+
+            console.log('场景初始化完成');
+        }
+
+        // 切换轴向
+        window.switchAxis = function(axis) {
+            if (!mainApp) return;
+
+            currentAxis = axis;
+            mainApp.appModelDrag.switchAxis('draggableModel', axis);
+
+            // 更新按钮状态
+            document.querySelectorAll('.controls button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.getElementById('axis' + axis.toUpperCase()).classList.add('active');
+
+            // 更新状态显示
+            updateStatus();
+            console.log(`切换到 ${axis.toUpperCase()} 轴`);
+        };
+
+        // 切换拖拽启用状态
+        window.toggleDrag = function() {
+            if (!mainApp) return;
+
+            dragEnabled = !dragEnabled;
+            mainApp.appModelDrag.setDragEnabled('draggableModel', dragEnabled);
+
+            updateStatus();
+            console.log(`拖拽${dragEnabled ? '已启用' : '已禁用'}`);
+        };
+
+        // 更新状态显示
+        function updateStatus() {
+            const status = document.getElementById('status');
+            status.textContent = `拖拽${dragEnabled ? '已启用' : '已禁用'} | 激活轴：${currentAxis.toUpperCase()}`;
+        }
+
+        // 键盘快捷键
+        window.addEventListener('keydown', (e) => {
+            const key = e.key.toLowerCase();
+            if (key === 'x' || key === 'y' || key === 'z') {
+                switchAxis(key);
+            }
+        });
+
+        // 启动应用
+        init().catch(console.error);
+    </script>
+</body>
+</html>