1
This commit is contained in:
@ -2,70 +2,185 @@
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SDK 模块化加载示例</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>3D Model Showcase SDK - TS</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;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
#progress-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#progress-bar {
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
background: linear-gradient(90deg, #4CAF50, #45a049);
|
||||
border-radius: 5px;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
#progress-text {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
<div id="app">
|
||||
<canvas id="renderDom"></canvas>
|
||||
<div id="progress-container" style="display: none;">
|
||||
<div id="progress-bar"></div>
|
||||
<div id="progress-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
}
|
||||
<script type="module">
|
||||
// import { kernel } from './src/main.ts';
|
||||
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js';
|
||||
|
||||
#renderDom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<canvas id="renderDom"></canvas>
|
||||
// const config = {
|
||||
// container: document.querySelector('#renderDom'),
|
||||
// modelUrlList: ['/assets/model.glb'],
|
||||
// env: { envPath: '/assets/hdr.env', intensity: 1.2, rotationY: 0.3, background: false },
|
||||
// };
|
||||
|
||||
<!-- 模块化：Dev 使用 /src/main.ts，构建后改为 /assets/index.js -->
|
||||
<script type="module">
|
||||
const config = {
|
||||
container: document.querySelector('#renderDom'),
|
||||
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, background: true },
|
||||
};
|
||||
|
||||
import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js';
|
||||
const config = {
|
||||
container: 'renderDom',
|
||||
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 },
|
||||
};
|
||||
|
||||
kernel.init(config);
|
||||
|
||||
|
||||
kernel.on('model:load:progress', (data) => {
|
||||
console.log('模型加载事件', data);
|
||||
});
|
||||
kernel.init(config);
|
||||
|
||||
|
||||
|
||||
kernel.on('model:loaded', (data) => {
|
||||
console.log('模型加载完成', data);
|
||||
});
|
||||
kernel.on('model:load:progress', (data) => {
|
||||
console.log('模型加载事件', data);
|
||||
|
||||
|
||||
|
||||
kernel.on('model:click', (data) => {
|
||||
console.log('模型点击事件', data);
|
||||
});
|
||||
const progress = data.progress || 0;
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const progressContainer = document.getElementById('progress-container');
|
||||
|
||||
if (progressContainer) {
|
||||
progressContainer.style.display = 'block';
|
||||
}
|
||||
if (progressBar) {
|
||||
progressBar.style.width = `${progress * 100}%`;
|
||||
}
|
||||
if (progressText) {
|
||||
progressText.textContent = `${Math.round(progress * 100)}%`;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
kernel.on('model:loaded', (data) => {
|
||||
console.log('模型加载完成', data);
|
||||
// 隐藏进度条
|
||||
const progressContainer = document.getElementById('progress-container');
|
||||
if (progressContainer) {
|
||||
progressContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
kernel.on('all:ready', (data) => {
|
||||
console.log('所有模块加载完,', data);
|
||||
kernel.material.apply({
|
||||
target: 'Material__2',
|
||||
attribute: 'alpha',
|
||||
value: 0.5,
|
||||
});
|
||||
|
||||
|
||||
kernel.hotspot.render([
|
||||
{
|
||||
id: "h1",
|
||||
name: "卷帘门",
|
||||
meshName: "Valve_01",
|
||||
icon: "./btn_热点.png",
|
||||
offset: [25, 25, 0],
|
||||
radius: 20,
|
||||
color: "#21c7ff",
|
||||
payload: { type: "valve", code: "A" },
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
kernel.on('model:click', (data) => {
|
||||
console.log('模型点击事件', data);
|
||||
console.log(data);
|
||||
|
||||
});
|
||||
|
||||
kernel.on('hotspot:click', (data) => {
|
||||
console.log('热点被点击:', data);
|
||||
const { id, name } = data
|
||||
if (name === "卷帘门") {
|
||||
kernel.door.toggle({ upY: 28, downY: 0, speed: 12 });
|
||||
|
||||
// Y轴剖切，只作用于卷帘门网格，保留下方，剖掉上方
|
||||
const clipHeight = 28; // 调整这个值找到合适的剖切高度
|
||||
console.log('设置剖切:', clipHeight);
|
||||
kernel.clipping.setY(clipHeight, true, ['Box005.001', 'Box006.001']);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 添加模型到场景
|
||||
await kernel.model.add('/models/car.glb');
|
||||
|
||||
// 销毁模型
|
||||
kernel.model.destroy('car');
|
||||
|
||||
// 替换模型
|
||||
await kernel.model.replace('car', '/models/new-car.glb');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user