前端代码：商品3D展示效果，电商产品创意展示模板

3D 球鞋互动陈列（Spline + Tailwind）前端demo模板

让用户在浏览器里“抓取”3D 球鞋的沉浸式首屏，KS主题定制中文文案与品牌露出，全量本地资源，无网也能演示。

亮点卖点

• Spline 真 3D：基于本地 scene.splinecode 与 @splinetool/runtime，可旋转、切视角，加载流畅。
• 轻量 UI：Tailwind 实现玻璃拟态导航、底部旋转提示和右侧商品卡片，排版简洁。
• 品牌即插即用：顶部 KS徽标、底部 CTA 链接官网，适合直接对外展示。
• 全离线：Tailwind、runtime、ES Module Shims、场景文件全部打包到 assets/，无外链。
• 模块化扩展：Import Map + 原生 ES Module，方便替换场景或增加交互。

设计风格

• 浅紫背景烘托白色卡片与 Indigo 主色按钮，凸显科技感与年轻运动调性。
• 右侧信息卡分层玻璃质感，价格与卖点突出，CTA 圆角按钮强化动作。
• 中心旋转控件自带提示文字，暗示用户可操作 3D 视角。

适用场景

• 球鞋/运动装备/数码潮品新品页与活动首屏。
• 线下展厅或大屏互动的快速 Demo。
• 想在页面里嵌入 Spline 3D 资产的品牌落地页与策展网站。

使用方式

1. 直接双击 index.html（离线可用）；如需跨域扩展建议用本地服务器。
2. 鼠标悬停或点击 3D 场景，可拖动/旋转观察细节；点击按钮可重置视角（示例动画）。
3. 替换场景：把新的 .splinecode 放入 assets/scene/ 并修改 index.html 中 app.load 路径。
4. 修改文案/价格/CTA：编辑右侧 <aside> 文案和链接即可。

文件结构

• index.html：页面结构、Import Map、本地脚本引用。
• style.css：基础字体与 KS 徽标样式。
• script.js：简单交互示例（按钮色切换，可扩展为自定义行为）。
• assets/css/tailwind.min.css：本地 Tailwind 样式。
• assets/js/es-module-shims.js：本地 ES Module Shims。
• assets/js/spline-runtime.js：本地 Spline Runtime。
• assets/scene/scene.splinecode：3D 场景文件。

自定义提示

• 想换配色：在 index.html 中调整 Tailwind 类名（如 bg-indigo-600 改为其它色系）。
• 想加按钮/介绍：使用 Tailwind 工具类快速组合，或在 style.css 写少量定制。
• 如果场景较大，建议在 Spline 中优化贴图体积再导出到 assets/scene/。

本地运行教程