# Su.ThreeJS.Demo

**Repository Path**: SususuChang/su.-three-js.-demo

## Basic Information

- **Project Name**: Su.ThreeJS.Demo
- **Description**: Gltf模型与Three.js的最佳实践！无任何第三方依赖！对新手极为友好！实现了大部分功能如：高亮选中、定位、结构树控件、信息停靠面板灯
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-21
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![License](https://img.shields.io/badge/license-MIT-blue)

# 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 演示

<div align="center">
  <img src="./Three.jsHD.gif" alt="Demo演示" width="80%">
</div>

## ✨ 功能特性

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

## 🚀 快速开始

### 运行项目

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

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

## 💡 技术特点

### 数模一体化存储

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

## 📁 项目结构

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

## 🛠 技术栈

- [Three.js](https://threejs.org/) - 3D 图形库
- GLTF/GLB 格式支持
- 纯前端实现，无需后端服务

## 🎮 操作指南

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

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！