【亲测免费】交互式计算机图形学——基于WebGL的自顶向下方法（第七版）项目教程

2026-01-22 05:04:29作者：牧宁李

1. 项目目录结构及介绍

项目的主要目录结构如下：

ICG-WebGL/
├── chapter01/
│   └── e1/
├── chapter02/
├── chapter03/
├── chapter04/
├── chapter05/
├── chapter06/
├── chapter07/
│   └── render3/
├── chapter08/
├── chapter09/
├── chapter10/
├── chapter11/
├── chapter12/
├── common/
├── docs/
├── glsl/
├── misc/
├── scripts/
├── src/
├── vendor/
├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
└── webpack.config.js

目录说明

chapter01/chapter02/.../chapter12: 各章节的示例代码和练习题参考实现。
common: 公共代码库。
docs: 项目文档。
glsl: GLSL着色器文件。
misc: 杂项文件。
scripts: 脚本文件。
src: 源代码文件。
vendor: 第三方库文件。
.babelrc: Babel配置文件。
.eslintignore: ESLint忽略文件配置。
.eslintrc.js: ESLint配置文件。
.gitignore: Git忽略文件配置。
LICENSE: 许可证文件。
README.md: 项目说明文件。
jsconfig.json: JavaScript配置文件。
package-lock.json: npm包锁定文件。
package.json: npm包配置文件。
webpack.config.js: Webpack配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是通过package.json中的脚本进行管理。以下是主要的启动命令：

启动项目:
```
npm start
```
该命令会启动本地开发服务器，并可以通过浏览器访问 http://localhost:3000 查看项目。
运行特定章节的例子:
```
npm run chapter02
```
该命令会运行第二章的示例代码。可以通过替换chapter02为其他章节名称来运行其他章节的代码。

3. 项目的配置文件介绍

3.1 Babel配置文件 (.babelrc)

Babel配置文件用于设置JavaScript代码的转换规则，使得项目可以使用最新的JavaScript语法而不担心浏览器兼容性问题。

{
  "presets": ["@babel/preset-env"]
}

3.2 ESLint配置文件 (.eslintrc.js)

ESLint配置文件用于定义代码风格和错误检查规则，确保代码质量和一致性。

module.exports = {
  "extends": "eslint-config-sprite",
  "rules": {
    // 自定义规则
  }
};

3.3 Webpack配置文件 (webpack.config.js)

Webpack配置文件用于定义项目的构建过程，包括模块打包、加载器配置等。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.glsl$/,
        use: 'glsl-shader-loader'
      },
      // 其他加载器配置
    ]
  },
  // 其他配置
};

3.4 npm包配置文件 (package.json)

package.json文件定义了项目的依赖、脚本、版本等信息。

{
  "name": "icg-webgl",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open",
    "chapter02": "webpack --config chapter02/webpack.config.js"
  },
  "dependencies": {
    "gl-matrix": "^3.4.3",
    "transform-gl-matrix": "^1.0.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.14.5",
    "eslint-config-sprite": "^1.0.0",
    "glsl-shader-loader": "^0.0.1",
    "webpack": "^5.38.1",
    "webpack-dev-server": "^3.11.2"
  }
}