threejs-sandbox 项目教程
1. 项目的目录结构及介绍
threejs-sandbox/
├── LICENSE
├── README.md
├── editorconfig
├── eslintrc.json
├── gitignore
├── package-lock.json
├── package.json
└── src/
├── css/
├── js/
├── shaders/
└── index.html
- LICENSE: 项目的许可证文件。
- README.md: 项目的说明文档。
- editorconfig: 编辑器配置文件。
- eslintrc.json: ESLint 配置文件。
- gitignore: Git 忽略文件配置。
- package-lock.json: 锁定依赖版本的文件。
- package.json: 项目的依赖和脚本配置文件。
- src/: 源代码目录。
- css/: 存放 CSS 文件。
- js/: 存放 JavaScript 文件。
- shaders/: 存放着色器文件。
- index.html: 项目的主页面。
2. 项目的启动文件介绍
项目的启动文件是 index.html
,它位于 src/
目录下。这个文件是项目的入口点,包含了基本的 HTML 结构和引入的 JavaScript 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Sandbox</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
<link rel="stylesheet" href="css/main.css">
: 引入了主要的 CSS 文件。<script src="js/main.js"></script>
: 引入了主要的 JavaScript 文件。
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖和脚本配置。以下是一些关键部分:
{
"name": "threejs-sandbox",
"version": "1.0.0",
"description": "Set of experiments and extensions to THREE.js",
"main": "src/index.html",
"scripts": {
"start": "http-server src -p 8080"
},
"dependencies": {
"three": "^0.127.0"
},
"devDependencies": {
"eslint": "^7.23.0",
"http-server": "^0.12.3"
}
}
"name"
: 项目名称。"version"
: 项目版本。"description"
: 项目描述。"main"
: 项目的主入口文件。"scripts"
: 包含可执行的脚本命令,例如npm start
会启动一个 HTTP 服务器。"dependencies"
: 项目运行时的依赖。"devDependencies"
: 开发时的依赖。
eslintrc.json
eslintrc.json
文件是 ESLint 的配置文件,用于代码风格检查。
{
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
}
"env"
: 指定代码运行的环境。"extends"
: 继承的 ESLint 配置。"parserOptions"
: 解析器选项。"rules"
: 自定义规则。
.gitignore
.gitignore
文件指定了 Git 忽略的文件和目录。
node_modules/
dist/
*.log
node_modules/
: 忽略 Node.js 模块目录。dist/
: 忽略构建输出目录。*.log
: 忽略