Initial commit: Three.js 项目模板

- 包含完整的 Three.js 3D 场景应用
- 支持 9 种不同几何体和交互控制
- 完整的 Docker 容器化支持
- 标准化的 Makefile 构建脚本
- 环境变量配置支持
- 实时统计信息显示

.eazy

+{
+    "version": "1.0.0",
+    "name": "Three.js 3D 场景应用",
+    "tags": ["javascript", "three.js", "3d", "webgl", "frontend"],
+    "description": "基于 Three.js 的 3D 场景应用，包含多种几何体、光照系统和交互控制",
+    "init_commands": ["make install"],
+    "start_commands": ["make run"],
+    "stop_commands": ["make stop"],
+
+    "mapping_ports": {
+        "APP_PORT_1": 8000,
+        "APP_PORT_2": 8001,
+        "APP_PORT_3": 8002,
+        "APP_PORT_4": 8003
+    },
+    
+    "deploy": [
+      {
+        "image_name": "threejs-app",
+        "app_access_entry": true,
+        "ports": [
+          {
+            "name": "APP_PORT_1",
+            "main_port": true,
+            "inner_access_env_key": "WEB_URL",
+            "open_access": true,
+            "open_access_env_key": "WEB_DOMAIN"
+          }
+        ],
+        "docker_file_dir": "./",
+        "deploy_resources": {
+          "cpu_limit": 0.5,
+          "memory_limit": 1,
+          "storage_limit": 1
+        }
+      }
+    ]
+}

.gitignore

+# 依赖
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# 构建输出
+dist/
+build/
+.next/
+out/
+
+# 环境变量
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# 日志
+logs/
+*.log
+
+# 运行时数据
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# 覆盖率目录
+coverage/
+.nyc_output/
+
+# 依赖锁定文件（可选）
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# IDE 和编辑器
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# 操作系统
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# 临时文件
+*.tmp
+*.temp
+
+# Docker
+.dockerignore

.resource/resource_deploy.json

+{}
\ No newline at end of file

.resource/resource_dev.json

+{}
\ No newline at end of file

Dockerfile

+# 使用 Node.js 22 官方镜像作为基础镜像
+FROM hb.eazytec-cloud.com/eazytec/eazydevelop-node:ubuntu22.04-node22-latest
+
+# 设置工作目录
+WORKDIR /app
+
+# 设置环境变量
+ENV NODE_ENV=production
+ENV PORT=${APP_PORT_1:-8000}
+
+# 复制 package.json 和 package-lock.json（如果存在）
+COPY package*.json ./
+
+# 安装依赖
+RUN npm ci
+
+# 复制应用代码
+COPY . .
+
+# 创建非 root 用户
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S threejs -u 1001
+
+# 更改文件所有权
+RUN chown -R threejs:nodejs /app
+USER threejs
+
+# 暴露端口
+EXPOSE ${APP_PORT_1:-8000}
+
+# 设置启动脚本
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:${APP_PORT_1:-8000} || exit 1
+
+# 启动应用
+ENTRYPOINT ["docker-entrypoint.sh"]
+CMD ["npm", "run", "serve"]

Makefile

+# Three.js 项目模板 Makefile
+# 用于构建、运行 Three.js 应用
+
+# 变量定义
+APP_NAME = threejs-template
+NODE_VERSION = 22
+APP_PORT = $(or $(APP_PORT_1),8000)
+LOG_FILE = $(abspath $(dir $(lastword $(MAKEFILE_LIST))))/.logs/app.log
+PID_FILE = $(abspath $(dir $(lastword $(MAKEFILE_LIST))))/.logs/app.pid
+RESOURCE_PATH = $(abspath $(dir $(lastword $(MAKEFILE_LIST))))/.resource/resource_dev.json
+
+# Node.js命令
+NODE = node
+NPM = npm
+
+# 默认目标
+.DEFAULT_GOAL := install
+
+# 安装命令
+.PHONY: install
+install:
+	@echo "🎨 初始化 Three.js 应用项目..."
+	@echo "检查 Node.js 版本..."
+	@$(NODE) --version
+	@echo "检查 NPM 版本..."
+	@$(NPM) --version
+	@echo "安装项目依赖..."
+	@if [ -f "package.json" ]; then \
+		$(NPM) install; \
+		echo "✅ 依赖安装完成"; \
+	else \
+		echo "❌ package.json 不存在"; \
+		exit 1; \
+	fi
+	@echo "✅ Three.js 应用项目安装完成！"
+
+# 运行命令
+.PHONY: run
+run: install
+	@echo "🎨 启动 Three.js 应用服务器..."
+	@mkdir -p $(dir $(LOG_FILE))
+	@if [ -f "$(PID_FILE)" ]; then \
+		echo "服务器已在运行中，PID: $$(cat $(PID_FILE))"; \
+		exit 1; \
+	fi
+	@echo "构建项目..."
+	@$(NPM) run build
+	@echo "启动服务器在端口 $(APP_PORT)..."
+	@RESOURCE_PATH=$(RESOURCE_PATH) nohup $(NPM) run serve > $(LOG_FILE) 2>&1 & echo $$! > $(PID_FILE)
+	@sleep 3
+	@echo "✅ Three.js 应用服务器已启动，PID: $$(cat $(PID_FILE))"
+	@echo "🎯 应用访问地址: http://localhost:$(APP_PORT)/"
+	@echo "📋 查看日志: tail -f $(LOG_FILE)"
+
+# 停止命令
+.PHONY: stop
+stop:
+	@echo "🛑 停止 Three.js 应用服务器..."
+	@if [ -f "$(PID_FILE)" ]; then \
+		PID=$$(cat $(PID_FILE)); \
+		if ps -p $$PID > /dev/null 2>&1; then \
+			echo "正在停止进程 $$PID..."; \
+			kill -TERM $$PID; \
+			sleep 2; \
+			if ps -p $$PID > /dev/null 2>&1; then \
+				echo "强制停止进程 $$PID..."; \
+				kill -9 $$PID; \
+			fi; \
+			echo "✅ 服务器已停止"; \
+		else \
+			echo "服务器进程不存在"; \
+		fi; \
+		rm -f $(PID_FILE); \
+	else \
+		echo "服务器未运行"; \
+	fi
+
+# 清理命令
+.PHONY: clean
+clean:
+	@echo "🧹 清理 Three.js 应用项目文件..."
+	@rm -rf node_modules
+	@rm -rf .logs
+	@rm -rf dist
+	@rm -rf build
+	@rm -f package-lock.json
+	@echo "✅ 清理完成！"
+

README.md

+# Three.js 项目模板
+
+一个功能完整的 Three.js 项目模板，包含基础 3D 场景、光照系统、材质、交互控制和容器化部署支持。
+
+## 🚀 特性
+
+- ✨ **完整的 3D 场景**: 包含多种几何体、光照系统和材质
+- 🎮 **交互控制**: 鼠标拖拽旋转、滚轮缩放、点击交互
+- 🎨 **现代 UI**: 响应式设计，美观的加载动画和信息面板
+- 📊 **实时统计**: FPS、物体数量、顶点数量实时显示
+- 🐳 **容器化支持**: 完整的 Docker 配置和部署脚本
+- 📱 **响应式设计**: 支持移动端和桌面端
+- 🔧 **开发友好**: 完整的构建工具链和开发环境
+
+## 📁 项目结构
+
+```
+three.js-template/
+├── index.html          # 主页面
+├── main.js             # Three.js 主逻辑
+├── styles.css          # 样式文件
+├── package.json        # 项目配置
+├── Dockerfile          # Docker 配置
+├── docker-entrypoint.sh # Docker 启动脚本
+├── Makefile            # 构建脚本
+└── README.md           # 项目说明
+```
+
+## 🛠️ 技术栈
+
+- **Three.js**: 3D 图形库
+- **JavaScript ES6+**: 现代 JavaScript 语法
+- **CSS3**: 现代样式和动画
+- **Docker**: 容器化部署
+- **Node.js**: 运行时环境
+
+## 🚀 快速开始
+
+### 方式一：本地开发
+
+1. **克隆项目**
+   ```bash
+   git clone <repository-url>
+   cd three.js-template
+   ```
+
+2. **安装依赖**
+   ```bash
+   npm install
+   ```
+
+3. **启动开发服务器**
+   ```bash
+   npm run dev
+   ```
+
+4. **访问应用**
+   打开浏览器访问 `http://localhost:5173`
+
+### 方式二：Docker 部署
+
+1. **构建镜像**
+   ```bash
+   make docker-build
+   ```
+
+2. **运行容器**
+   ```bash
+   make docker-run
+   ```
+
+3. **访问应用**
+   打开浏览器访问 `http://localhost:8000`
+
+### 方式三：一键启动
+
+```bash
+make start
+```
+
+## 🎮 控制说明
+
+| 操作 | 说明 |
+|------|------|
+| 鼠标左键拖拽 | 旋转视角 |
+| 鼠标滚轮 | 缩放场景 |
+| 鼠标右键拖拽 | 平移视角 |
+| 点击物体 | 查看物体信息 |
+
+## 📋 可用命令
+
+### 开发命令
+
+```bash
+make install     # 安装依赖
+make dev         # 启动开发服务器
+make serve       # 启动生产服务器
+make build       # 构建项目
+make check       # 检查项目状态
+make lint        # 代码检查
+make test        # 运行测试
+```
+
+### Docker 命令
+
+```bash
+make docker-build    # 构建 Docker 镜像
+make docker-run      # 运行 Docker 容器
+make docker-stop     # 停止 Docker 容器
+make docker-logs     # 查看容器日志
+make docker-shell    # 进入容器 shell
+```
+
+### 部署命令
+
+```bash
+make deploy      # 构建并部署
+make restart     # 重启容器
+make status      # 检查服务状态
+make start       # 快速启动
+```
+
+### 清理命令
+
+```bash
+make clean           # 清理构建文件
+make clean-docker    # 清理 Docker 资源
+make reset           # 完全重置项目
+```
+
+## 🔧 自定义配置
+
+### 修改端口
+
+在 `package.json` 中修改启动脚本：
+
+```json
+{
+  "scripts": {
+    "serve": "python3 -m http.server 8000"
+  }
+}
+```
+
+### 添加新的几何体
+
+在 `main.js` 的 `createGeometry()` 方法中添加：
+
+```javascript
+{
+  type: 'your-geometry',
+  position: [x, y, z],
+  color: 0xhexcolor
+}
+```
+
+### 自定义光照
+
+在 `createLights()` 方法中修改光照参数：
+
+```javascript
+const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+directionalLight.position.set(10, 10, 5);
+```
+
+## 📊 性能优化
+
+### 几何体优化
+
+- 使用 `BufferGeometry` 减少内存占用
+- 合并相似几何体减少绘制调用
+- 使用 LOD（细节层次）系统
+
+### 材质优化
+
+- 使用 `MeshBasicMaterial` 用于简单场景
+- 合并材质减少状态切换
+- 使用纹理压缩
+
+### 渲染优化
+
+- 启用视锥体剔除
+- 使用遮挡剔除
+- 合理设置阴影质量和范围
+
+## 🐛 故障排除
+
+### 常见问题
+
+1. **依赖安装失败**
+   ```bash
+   rm -rf node_modules package-lock.json
+   npm install
+   ```
+
+2. **Docker 构建失败**
+   ```bash
+   docker system prune -a
+   make docker-build
+   ```
+
+3. **端口被占用**
+   ```bash
+   # 查看端口占用
+   lsof -i :8000
+   # 杀死进程
+   kill -9 <PID>
+   ```
+
+### 性能问题
+
+1. **帧率过低**
+   - 减少几何体复杂度
+   - 降低阴影质量
+   - 减少同时渲染的物体数量
+
+2. **内存占用过高**
+   - 使用几何体合并
+   - 及时释放不需要的资源
+   - 使用纹理压缩
+
+## 📚 学习资源
+
+- [Three.js 官方文档](https://threejs.org/docs/)
+- [Three.js 示例](https://threejs.org/examples/)
+- [WebGL 基础教程](https://webglfundamentals.org/)
+- [3D 数学基础](https://www.khanacademy.org/math/geometry-home)
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request 来改进这个模板！
+
+## 📄 许可证
+
+MIT License - 详见 [LICENSE](LICENSE) 文件
+
+## 🎯 下一步
+
+- [ ] 添加更多几何体类型
+- [ ] 实现纹理加载
+- [ ] 添加音频支持
+- [ ] 实现场景切换
+- [ ] 添加 VR/AR 支持
+
+---
+
+**享受 Three.js 开发的乐趣！** 🎉

docker-entrypoint.sh

+#!/bin/bash
+
+# Three.js 项目启动脚本
+# 用于 Docker 容器启动时的环境配置和服务启动
+
+set -e
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 日志函数
+log_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+log_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+log_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# 检查 Node.js 版本
+check_node_version() {
+    log_info "检查 Node.js 版本..."
+    node_version=$(node --version)
+    log_success "Node.js 版本: $node_version"
+}
+
+# 检查 npm 版本
+check_npm_version() {
+    log_info "检查 npm 版本..."
+    npm_version=$(npm --version)
+    log_success "npm 版本: $npm_version"
+}
+
+# 检查项目依赖
+check_dependencies() {
+    log_info "检查项目依赖..."
+    if [ ! -f "package.json" ]; then
+        log_error "package.json 文件不存在！"
+        exit 1
+    fi
+    
+    if [ ! -d "node_modules" ]; then
+        log_warning "node_modules 目录不存在，正在安装依赖..."
+        npm install
+    fi
+    
+    log_success "依赖检查完成"
+}
+
+# 检查必要文件
+check_required_files() {
+    log_info "检查必要文件..."
+    
+    required_files=("index.html" "main.js" "styles.css")
+    
+    for file in "${required_files[@]}"; do
+        if [ ! -f "$file" ]; then
+            log_error "必要文件 $file 不存在！"
+            exit 1
+        fi
+    done
+    
+    log_success "所有必要文件检查完成"
+}
+
+# 设置权限
+set_permissions() {
+    log_info "设置文件权限..."
+    chmod -R 755 /app
+    log_success "权限设置完成"
+}
+
+# 创建日志目录
+create_log_dir() {
+    log_info "创建日志目录..."
+    mkdir -p /app/logs
+    chmod 755 /app/logs
+    log_success "日志目录创建完成"
+}
+
+# 启动健康检查
+start_health_check() {
+    log_info "启动健康检查..."
+    
+        # 在后台启动健康检查
+    (
+        sleep 5
+        while true; do
+            if curl -f http://localhost:${APP_PORT_1:-8000} > /dev/null 2>&1; then
+                log_success "应用运行正常"
+            else
+                log_warning "应用可能未正常启动"
+            fi
+            sleep 30
+        done
+    ) &
+    
+    log_success "健康检查已启动"
+}
+
+# 显示启动信息
+show_startup_info() {
+    echo ""
+    echo "=========================================="
+    echo "    Three.js 项目模板启动成功！"
+    echo "=========================================="
+    echo ""
+    echo "🌐 访问地址: http://localhost:${APP_PORT_1:-8000}"
+    echo "📁 项目目录: /app"
+    echo "📊 Node.js: $(node --version)"
+    echo "📦 npm: $(npm --version)"
+    echo ""
+    echo "🎮 控制说明:"
+    echo "   - 鼠标左键拖拽: 旋转视角"
+    echo "   - 鼠标滚轮: 缩放"
+    echo "   - 鼠标右键拖拽: 平移视角"
+    echo "   - 点击物体: 查看信息"
+    echo ""
+    echo "=========================================="
+    echo ""
+}
+
+# 清理函数
+cleanup() {
+    log_info "正在清理资源..."
+    # 这里可以添加清理逻辑
+    log_success "清理完成"
+}
+
+# 设置信号处理
+trap cleanup EXIT INT TERM
+
+# 主函数
+main() {
+    log_info "开始启动 Three.js 项目..."
+    
+    # 执行检查
+    check_node_version
+    check_npm_version
+    check_dependencies
+    check_required_files
+    set_permissions
+    create_log_dir
+    
+    # 显示启动信息
+    show_startup_info
+    
+    # 启动健康检查
+    start_health_check
+    
+    log_success "Three.js 项目启动完成！"
+    
+    # 执行传入的命令
+    exec "$@"
+}
+
+# 如果直接运行此脚本
+if [ "${BASH_SOURCE[0]}" == "${0}" ]; then
+    main "$@"
+fi

index.html

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js 项目模板</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="container">
+        <div id="loading">
+            <div class="loader"></div>
+            <p>正在加载 Three.js 场景...</p>
+        </div>
+        
+        <div id="info">
+            <h1>Three.js 项目模板</h1>
+            <div id="controls">
+                <p>控制说明：</p>
+                <ul>
+                    <li>鼠标左键拖拽：旋转视角</li>
+                    <li>鼠标滚轮：缩放</li>
+                    <li>鼠标右键拖拽：平移视角</li>
+                    <li>点击物体：查看信息</li>
+                </ul>
+            </div>
+            
+            <div id="stats">
+                <p>FPS: <span id="fps">0</span></p>
+                <p>物体数量: <span id="objects">0</span></p>
+                <p>顶点数量: <span id="vertices">0</span></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- 使用 ES6 模块方式引入 Three.js -->
+    <script type="module" src="main.js"></script>
+</body>
+</html>

main.js

+/**
+ * Three.js 项目模板
+ * 包含基础 3D 场景、光照、材质和交互功能
+ */
+
+import * as THREE from 'three';
+
+/**
+ * 主应用类
+ * 负责管理 Three.js 场景、渲染器和交互控制
+ */
+class ThreeJSApp {
+    constructor() {
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.meshes = [];
+        this.clock = new THREE.Clock();
+        this.frameCount = 0;
+        this.lastTime = 0;
+        this.stats = {
+            fps: 0,
+            objects: 0,
+            vertices: 0
+        };
+        
+        this.init();
+    }
+
+    /**
+     * 初始化 Three.js 应用
+     */
+    init() {
+        this.createScene();
+        this.createCamera();
+        this.createRenderer();
+        this.createLights();
+        this.createGeometry();
+        this.setupControls();
+        this.setupEventListeners();
+        this.hideLoading();
+        this.updateStats(); // 初始化统计信息
+        this.animate();
+    }
+
+    /**
+     * 创建场景
+     */
+    createScene() {
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x222222);
+        this.scene.fog = new THREE.Fog(0x222222, 10, 100);
+    }
+
+    /**
+     * 创建相机
+     */
+    createCamera() {
+        this.camera = new THREE.PerspectiveCamera(
+            75,
+            window.innerWidth / window.innerHeight,
+            0.1,
+            1000
+        );
+        this.camera.position.set(5, 5, 5);
+        this.camera.lookAt(0, 0, 0);
+    }
+
+    /**
+     * 创建渲染器
+     */
+    createRenderer() {
+        this.renderer = new THREE.WebGLRenderer({ 
+            antialias: true,
+            alpha: true 
+        });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+        
+        document.getElementById('container').appendChild(this.renderer.domElement);
+    }
+
+    /**
+     * 创建光照系统
+     */
+    createLights() {
+        // 环境光
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+        this.scene.add(ambientLight);
+
+        // 方向光（太阳光）
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(10, 10, 5);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.camera.near = 0.5;
+        directionalLight.shadow.camera.far = 50;
+        directionalLight.shadow.camera.left = -10;
+        directionalLight.shadow.camera.right = 10;
+        directionalLight.shadow.camera.top = 10;
+        directionalLight.shadow.camera.bottom = -10;
+        this.scene.add(directionalLight);
+
+        // 点光源
+        const pointLight = new THREE.PointLight(0x3498db, 0.8, 100);
+        pointLight.position.set(-5, 5, 5);
+        this.scene.add(pointLight);
+
+        // 聚光灯
+        const spotLight = new THREE.SpotLight(0xff6b6b, 0.5, 100, Math.PI / 6, 0.3);
+        spotLight.position.set(0, 10, 0);
+        spotLight.target.position.set(0, 0, 0);
+        this.scene.add(spotLight);
+        this.scene.add(spotLight.target);
+    }
+
+    /**
+     * 创建几何体和材质
+     */
+    createGeometry() {
+        // 创建各种几何体
+        const geometries = [
+            { type: 'box', position: [0, 1, 0], color: 0xff6b6b },
+            { type: 'sphere', position: [-3, 1, 0], color: 0x4ecdc4 },
+            { type: 'cone', position: [3, 1, 0], color: 0x45b7d1 },
+            { type: 'cylinder', position: [0, 1, -3], color: 0x96ceb4 },
+            { type: 'torus', position: [0, 1, 3], color: 0xfeca57 },
+            { type: 'octahedron', position: [-3, 1, 3], color: 0xff9ff3 },
+            { type: 'tetrahedron', position: [3, 1, 3], color: 0xffa726 },
+            { type: 'dodecahedron', position: [-3, 1, -3], color: 0xab47bc },
+            { type: 'icosahedron', position: [3, 1, -3], color: 0x26a69a }
+        ];
+
+        geometries.forEach((geo, index) => {
+            let geometry;
+            
+            switch (geo.type) {
+                case 'box':
+                    geometry = new THREE.BoxGeometry(1, 1, 1);
+                    break;
+                case 'sphere':
+                    geometry = new THREE.SphereGeometry(0.7, 32, 32);
+                    break;
+                case 'cone':
+                    geometry = new THREE.ConeGeometry(0.7, 1.5, 32);
+                    break;
+                case 'cylinder':
+                    geometry = new THREE.CylinderGeometry(0.7, 0.7, 1.5, 32);
+                    break;
+                case 'torus':
+                    geometry = new THREE.TorusGeometry(0.7, 0.3, 16, 100);
+                    break;
+                case 'octahedron':
+                    geometry = new THREE.OctahedronGeometry(0.7);
+                    break;
+                case 'tetrahedron':
+                    geometry = new THREE.TetrahedronGeometry(0.7);
+                    break;
+                case 'dodecahedron':
+                    geometry = new THREE.DodecahedronGeometry(0.7);
+                    break;
+                case 'icosahedron':
+                    geometry = new THREE.IcosahedronGeometry(0.7);
+                    break;
+            }
+
+            // 创建材质
+            const material = new THREE.MeshPhongMaterial({
+                color: geo.color,
+                shininess: 100,
+                transparent: true,
+                opacity: 0.9
+            });
+
+            // 创建网格
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(...geo.position);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            mesh.userData = { 
+                type: geo.type, 
+                color: geo.color,
+                index: index 
+            };
+
+            this.meshes.push(mesh);
+            this.scene.add(mesh);
+        });
+
+        // 创建地面
+        const groundGeometry = new THREE.PlaneGeometry(20, 20);
+        const groundMaterial = new THREE.MeshLambertMaterial({ 
+            color: 0x333333,
+            transparent: true,
+            opacity: 0.8
+        });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        this.scene.add(ground);
+
+        // 更新统计信息
+        this.updateStats();
+    }
+
+    /**
+     * 设置控制器
+     */
+    setupControls() {
+        // 简单的鼠标控制实现
+        this.mouse = new THREE.Vector2();
+        this.raycaster = new THREE.Raycaster();
+        this.isMouseDown = false;
+        this.mouseDownPosition = new THREE.Vector2();
+        this.cameraPosition = new THREE.Vector3();
+        
+        // 保存初始相机位置
+        this.cameraPosition.copy(this.camera.position);
+    }
+
+    /**
+     * 设置事件监听器
+     */
+    setupEventListeners() {
+        // 窗口大小调整
+        window.addEventListener('resize', () => this.onWindowResize());
+        
+        // 鼠标事件
+        this.renderer.domElement.addEventListener('mousedown', (event) => this.onMouseDown(event));
+        this.renderer.domElement.addEventListener('mousemove', (event) => this.onMouseMove(event));
+        this.renderer.domElement.addEventListener('mouseup', () => this.onMouseUp());
+        this.renderer.domElement.addEventListener('wheel', (event) => this.onMouseWheel(event));
+        this.renderer.domElement.addEventListener('click', (event) => this.onMouseClick(event));
+    }
+
+    /**
+     * 鼠标按下事件
+     */
+    onMouseDown(event) {
+        this.isMouseDown = true;
+        this.mouseDownPosition.set(event.clientX, event.clientY);
+    }
+
+    /**
+     * 鼠标移动事件
+     */
+    onMouseMove(event) {
+        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+        if (this.isMouseDown) {
+            const deltaX = event.clientX - this.mouseDownPosition.x;
+            const deltaY = event.clientY - this.mouseDownPosition.y;
+            
+            // 旋转相机
+            const spherical = new THREE.Spherical();
+            spherical.setFromVector3(this.camera.position);
+            spherical.theta -= deltaX * 0.01;
+            spherical.phi += deltaY * 0.01;
+            spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi));
+            
+            this.camera.position.setFromSpherical(spherical);
+            this.camera.lookAt(0, 0, 0);
+            
+            this.mouseDownPosition.set(event.clientX, event.clientY);
+        }
+    }
+
+    /**
+     * 鼠标释放事件
+     */
+    onMouseUp() {
+        this.isMouseDown = false;
+    }
+
+    /**
+     * 鼠标滚轮事件
+     */
+    onMouseWheel(event) {
+        const scale = event.deltaY > 0 ? 1.1 : 0.9;
+        this.camera.position.multiplyScalar(scale);
+    }
+
+    /**
+     * 鼠标点击事件
+     */
+    onMouseClick(event) {
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.meshes);
+        
+        if (intersects.length > 0) {
+            const object = intersects[0].object;
+            console.log('点击了物体:', object.userData);
+            
+            // 简单的点击反馈
+            object.material.emissive.setHex(0x444444);
+            setTimeout(() => {
+                object.material.emissive.setHex(0x000000);
+            }, 200);
+        }
+    }
+
+    /**
+     * 窗口大小调整
+     */
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    /**
+     * 隐藏加载界面
+     */
+    hideLoading() {
+        const loading = document.getElementById('loading');
+        if (loading) {
+            loading.style.display = 'none';
+        }
+    }
+
+    /**
+     * 更新统计信息
+     */
+    updateStats() {
+        // 只统计网格对象，不包括光照、相机等
+        let meshCount = 0;
+        let vertices = 0;
+        
+        this.scene.traverse((child) => {
+            if (child.isMesh && child.geometry) {
+                meshCount++;
+                if (child.geometry.attributes.position) {
+                    vertices += child.geometry.attributes.position.count;
+                }
+            }
+        });
+        
+        this.stats.objects = meshCount;
+        this.stats.vertices = vertices;
+        
+        // 更新 DOM 显示
+        document.getElementById('objects').textContent = this.stats.objects;
+        document.getElementById('vertices').textContent = this.stats.vertices;
+    }
+
+    /**
+     * 动画循环
+     */
+    animate() {
+        requestAnimationFrame(() => this.animate());
+        
+        const elapsedTime = this.clock.getElapsedTime();
+        const currentTime = performance.now();
+        
+        // 旋转所有网格
+        this.meshes.forEach((mesh, index) => {
+            mesh.rotation.x = elapsedTime * 0.5 + index * 0.5;
+            mesh.rotation.y = elapsedTime * 0.3 + index * 0.3;
+        });
+        
+        // 计算 FPS（使用更稳定的方法）
+        this.frameCount++;
+        if (currentTime >= this.lastTime + 1000) {
+            this.stats.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastTime));
+            document.getElementById('fps').textContent = this.stats.fps;
+            this.frameCount = 0;
+            this.lastTime = currentTime;
+        }
+        
+        // 每60帧更新一次统计信息（减少计算频率）
+        if (this.frameCount % 60 === 0) {
+            this.updateStats();
+        }
+        
+        // 渲染场景
+        this.renderer.render(this.scene, this.camera);
+    }
+}
+
+// 启动应用
+document.addEventListener('DOMContentLoaded', () => {
+    new ThreeJSApp();
+});

package.json

+{
+  "name": "threejs-template",
+  "version": "1.0.0",
+  "description": "Three.js 项目模板，包含基础 3D 场景和交互功能",
+  "main": "main.js",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "vite --port ${APP_PORT_1:-5173}",
+    "build": "vite build",
+    "preview": "vite preview --port ${APP_PORT_1:-5173}",
+    "serve": "vite preview --port ${APP_PORT_1:-8000} --host 0.0.0.0"
+  },
+  "keywords": [
+    "three.js",
+    "3d",
+    "webgl",
+    "javascript",
+    "template"
+  ],
+  "author": "Template Tool",
+  "license": "MIT",
+  "dependencies": {
+    "three": "0.160.0"
+  },
+  "devDependencies": {
+    "vite": "5.0.0",
+    "terser": "5.24.0"
+  }
+}

styles.css

+/* 全局样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    overflow: hidden;
+    height: 100vh;
+}
+
+#container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+}
+
+/* 加载动画样式 */
+#loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: white;
+    z-index: 1000;
+}
+
+.loader {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 信息面板样式 */
+#info {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+    z-index: 100;
+    max-width: 300px;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+#info h1 {
+    margin-bottom: 15px;
+    color: #3498db;
+    font-size: 18px;
+}
+
+#controls ul {
+    list-style-type: none;
+    margin-top: 10px;
+}
+
+#controls li {
+    margin: 5px 0;
+    padding-left: 15px;
+    position: relative;
+}
+
+#controls li:before {
+    content: "•";
+    color: #3498db;
+    position: absolute;
+    left: 0;
+}
+
+/* 统计信息样式 */
+#stats {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#stats p {
+    margin: 5px 0;
+    display: flex;
+    justify-content: space-between;
+}
+
+#stats span {
+    color: #3498db;
+    font-weight: bold;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    #info {
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        max-width: none;
+        font-size: 12px;
+        padding: 15px;
+    }
+    
+    #info h1 {
+        font-size: 16px;
+    }
+}
+
+/* Canvas 样式 */
+canvas {
+    display: block;
+    cursor: grab;
+}
+
+canvas:active {
+    cursor: grabbing;
+}

vite.config.js

+import { defineConfig } from 'vite'
+
+/**
+ * Vite 配置文件
+ * 用于开发环境的热重载和构建优化
+ */
+export default defineConfig({
+  // 开发服务器配置
+  server: {
+    host: '0.0.0.0',
+    port: parseInt(process.env.APP_PORT_1) || 5173,
+    open: true,
+    cors: true
+  },
+  
+  // 构建配置
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: true,
+    minify: 'terser',
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'three': ['three']
+        }
+      }
+    }
+  },
+  
+  // 优化配置
+  optimizeDeps: {
+    include: ['three']
+  },
+  
+  // 别名配置
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
+})