ClayGL 项目教程

1. 项目目录结构及介绍

ClayGL 项目的目录结构如下：

claygl/
├── asset/
├── build/
├── dist/
├── example/
├── screenshot/
├── src/
├── test/
├── tools/
├── typescript/
├── .gitignore
├── .jshintignore
├── .jshintrc
├── .npmignore
├── LICENSE
├── README.md
├── circle.yml
├── index.d.ts
├── index.js
├── jsconfig.json
├── package.json
├── rollup.config.js
└── test.js

目录介绍：

• asset/: 存放项目资源文件，如图片、模型等。
• build/: 存放构建生成的文件。
• dist/: 存放编译后的发布文件。
• example/: 存放示例代码，展示如何使用 ClayGL。
• screenshot/: 存放项目截图。
• src/: 存放源代码文件。
• test/: 存放测试代码。
• tools/: 存放项目使用的工具脚本。
• typescript/: 存放 TypeScript 类型定义文件。
• .gitignore: Git 忽略文件配置。
• .jshintignore: JSHint 忽略文件配置。
• .jshintrc: JSHint 配置文件。
• .npmignore: npm 发布时忽略的文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• circle.yml: CircleCI 配置文件。
• index.d.ts: TypeScript 类型定义入口文件。
• index.js: 项目入口文件。
• jsconfig.json: JavaScript 配置文件。
• package.json: npm 包配置文件。
• rollup.config.js: Rollup 打包配置文件。
• test.js: 测试入口文件。

2. 项目启动文件介绍

ClayGL 项目的启动文件是 index.js。该文件是项目的入口点，负责初始化应用并启动渲染循环。

index.js 文件内容概览：

import { Application } from 'claygl';

const app = new Application('#main', {
    width: window.innerWidth,
    height: window.innerHeight,
    init(app) {
        // 初始化代码
    },
    loop(app) {
        // 渲染循环代码
    }
});

启动流程：

1. 初始化应用: 通过 Application 类创建应用实例，并传入初始化参数。
2. 初始化函数: init 函数中可以添加初始化代码，如创建相机、灯光、模型等。
3. 渲染循环: loop 函数中可以添加每帧执行的代码，如更新模型位置、旋转等。

3. 项目的配置文件介绍

ClayGL 项目的主要配置文件是 package.json 和 rollup.config.js。

package.json 文件介绍：

package.json 是 npm 包的配置文件，包含了项目的元数据、依赖项、脚本等信息。

{
  "name": "claygl",
  "version": "1.0.0",
  "description": "A WebGL graphic library for building scalable Web3D applications",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "dependencies": {
    "some-dependency": "^1.0.0"
  },
  "devDependencies": {
    "rollup": "^2.0.0"
  }
}

rollup.config.js 文件介绍：

rollup.config.js 是 Rollup 打包工具的配置文件，用于配置项目的打包方式。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/claygl.js',
    format: 'umd',
    name: 'claygl'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

配置文件作用：

• package.json: 管理项目的依赖、脚本、版本等信息。
• rollup.config.js: 配置 Rollup 打包工具，指定输入文件、输出文件格式、插件等。

通过这些配置文件，开发者可以方便地管理项目的依赖、打包和发布。