169 lines
4.8 KiB
HTML
169 lines
4.8 KiB
HTML
<!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>
|