GLTF Viewer with Three.js

一个轻量级的 GLTF 模型查看器，基于 Three.js 构建。

🌐 代码仓库

• GitHub: https://github.com/ViewSuSu/Su.ThreeJS.Demo
• Gitee: https://gitee.com/SususuChang/su.-three-js.-demo

🎬 Demo 演示

✨ 功能特性

• 🎯 模型加载 - 支持 GLTF/GLB 格式的 3D 模型加载和显示
• 🔄 交互操作 - 支持模型旋转查看
• 🎯 选中定位 - 点击模型进行选中和自动定位
• 💡 高亮显示 - 选中模型时高亮显示
• ℹ️ 信息面板 - 可停靠的信息显示界面
• 🌳 结构树 - 模型层级结构树控件
• 📦 轻量依赖 - 最小化依赖，专注于核心功能
• 🗂️ 数模一体 - 数据与模型一体化存储

🚀 快速开始

运行项目

直接打开 index.html 文件即可运行：

# 在浏览器中直接打开
双击 index.html 文件

💡 技术特点

数模一体化存储

与市面上大多数将数据以 JSON 导出并与模型分离的解决方案不同，本项目利用 GLTF 文件格式的特性，在保存为 .glb 文件时通过增加数据节点来直接存储模型相关数据。这种方式避免了额外文件的维护，实现了数据与模型的统一管理。

📁 项目结构

项目根目录/
├── .git/               # Git 版本控制目录
├── models/             # 模型文件目录
│   └── basic_sample_project.glb  # 示例 GLB 模型文件
├── index.html          # 主页面文件
├── README.md           # 项目说明文档
├── script.js           # JavaScript 主程序
└── style.css           # 样式文件

🛠 技术栈

• Three.js - 3D 图形库
• GLTF/GLB 格式支持
• 纯前端实现，无需后端服务

🎮 操作指南

• 鼠标左键拖拽: 旋转相机
• 鼠标滚轮: 缩放视图
• 点击模型: 选中并高亮
• 结构树点击: 浏览模型组件

🤝 贡献

欢迎提交 Issue 和 Pull Request！