208 lines
5.6 KiB
HTML
208 lines
5.6 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>SDK 调用示例 - 全局脚本方式</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
}
|
|
|
|
#app {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
#renderDom {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-bar {
|
|
width: 300px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 2px;
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loading-progress {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
|
width: 0%;
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.info-panel {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
background: rgba(30, 30, 45, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.info-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.info-item {
|
|
margin-bottom: 5px;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<canvas id="renderDom"></canvas>
|
|
<div class="loading" id="loading">
|
|
<div>加载中...</div>
|
|
<div class="loading-bar">
|
|
<div class="loading-progress" id="progress"></div>
|
|
</div>
|
|
</div>
|
|
<div class="info-panel" style="display: none;" id="info">
|
|
<div class="info-title">SDK 信息</div>
|
|
<div class="info-item">调用方式: 全局脚本</div>
|
|
<div class="info-item">SDK 地址: https://sdk.zguiy.com/zt/assets/index.global.js</div>
|
|
<div class="info-item" id="modelCount">模型数量: 0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 全局脚本方式引入 SDK -->
|
|
<script src="https://sdk.zguiy.com/zt/assets/index.global.js"></script>
|
|
<script>
|
|
// 从全局对象获取 SDK kernel
|
|
const sdkKernel = window.faceSDK && window.faceSDK.kernel;
|
|
|
|
if (!sdkKernel) {
|
|
console.error('faceSDK kernel 不可用，请确认 index.global.js 已正确加载');
|
|
alert('SDK 加载失败，请检查网络连接');
|
|
} else {
|
|
// SDK 配置
|
|
const config = {
|
|
container: 'renderDom',
|
|
// 自动加载的模型列表（从后端 API 获取）
|
|
autoLoadModels: true,
|
|
autoLoadModelsUrl: 'https://ztserver.zguiy.com/api/models/auto-load/list',
|
|
// 或者手动指定模型列表
|
|
// modelUrlList: ['https://sdk.zguiy.com/resurces/model/model.glb'],
|
|
// 环境配置
|
|
env: {
|
|
envPath: 'https://sdk.zguiy.com/resurces/hdr/hdr.env',
|
|
intensity: 1.2,
|
|
rotationY: 0.3
|
|
},
|
|
// 相机配置
|
|
camera: {
|
|
alpha: Math.PI / 2,
|
|
beta: Math.PI / 3,
|
|
radius: 50
|
|
}
|
|
};
|
|
|
|
// 初始化 SDK
|
|
sdkKernel.init(config);
|
|
|
|
// 监听加载进度
|
|
sdkKernel.on('model:load:progress', function (data) {
|
|
console.log('模型加载进度:', data);
|
|
var progress = document.getElementById('progress');
|
|
if (progress && data.progress !== undefined) {
|
|
progress.style.width = (data.progress * 100) + '%';
|
|
}
|
|
});
|
|
|
|
// 监听模型加载完成
|
|
sdkKernel.on('model:loaded', function (data) {
|
|
console.log('模型加载完成:', data);
|
|
|
|
// 隐藏加载提示
|
|
var loading = document.getElementById('loading');
|
|
if (loading) {
|
|
loading.style.display = 'none';
|
|
}
|
|
|
|
// 显示信息面板
|
|
var info = document.getElementById('info');
|
|
if (info) {
|
|
info.style.display = 'block';
|
|
}
|
|
|
|
// 更新模型数量
|
|
var modelCount = document.getElementById('modelCount');
|
|
if (modelCount && data.models) {
|
|
modelCount.textContent = '模型数量: ' + data.models.length;
|
|
}
|
|
});
|
|
|
|
// 监听模型点击事件
|
|
sdkKernel.on('model:click', function (data) {
|
|
console.log('模型被点击:', data);
|
|
var meshName = data.meshName;
|
|
var position = data.position;
|
|
var materialName = data.materialName;
|
|
|
|
alert('点击了模型:\n网格: ' + meshName + '\n材质: ' + materialName + '\n位置: [' + position.x.toFixed(2) + ', ' + position.y.toFixed(2) + ', ' + position.z.toFixed(2) + ']');
|
|
});
|
|
|
|
// 监听热点点击事件
|
|
sdkKernel.on('hotspot:click', function (event) {
|
|
console.log('热点被点击:', event);
|
|
var id = event.id;
|
|
var name = event.name;
|
|
var payload = event.payload;
|
|
|
|
if (payload && payload.skus && payload.skus.length > 0) {
|
|
console.log('热点关联的SKU列表:', payload.skus);
|
|
alert('热点: ' + name + '\nSKU数量: ' + payload.skus.length);
|
|
} else {
|
|
alert('热点: ' + name + '\n暂无关联产品');
|
|
}
|
|
});
|
|
|
|
// 监听错误事件
|
|
sdkKernel.on('error', function (error) {
|
|
console.error('SDK 错误:', error);
|
|
alert('加载失败: ' + error.message);
|
|
});
|
|
|
|
// 暴露到全局，方便调试
|
|
window.kernel = sdkKernel;
|
|
console.log('SDK 已初始化，可通过 window.kernel 访问');
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|