normalmap.js 使用教程

1. 项目的目录结构及介绍

normalmap.js 项目是一个用于创建简单交互式光照效果的JavaScript库，基于WebGL技术。项目的目录结构如下：

normalmap.js/
├── demos/             # 示例文件夹，包含使用normalmap.js的示例代码
├── doc/               # 文档文件夹，包含API文档和更新日志
├── scripts/           # 脚本文件夹，包含构建和测试的脚本文件
├── src/               # 源代码文件夹，包含normalmap.js的核心代码
├── tests/             # 测试文件夹，包含自动化测试的代码
├── .editorconfig       # 编辑器配置文件
├── .gitignore         # Git忽略文件列表
├── .jshintrc           # JSHint配置文件
├── .npmignore         # NPM忽略文件列表
├── CONTRIBUTING.md    # 贡献指南
├── LICENSE            # 项目许可证文件
├── README.md          # 项目说明文件
├── bower.json         # Bower配置文件
├── gulpfile.js        # Gulp构建脚本
├── package-lock.json  # NPM锁文件
└── package.json       # NPM项目配置文件

2. 项目的启动文件介绍

normalmap.js 的使用不需要特定的启动文件。它是一个库，可以通过NPM或Bower安装，然后在你的项目中通过require或<script>标签引入。

如果你是通过NPM安装的，你可以在你的JavaScript文件中这样引入：

var normalmap = require('normalmap');

如果你是通过Bower安装的，或者直接下载了zip文件，你可以在HTML文件中这样引入：

<script src="path/to/normalmap.js"></script>

引入之后，你可以按照API文档中的说明使用normalmap.js。

3. 项目的配置文件介绍

normalmap.js 的配置主要通过其API中的参数进行。以下是一些基本的配置参数：

• canvas: 指定用于渲染的HTML5 <canvas> 元素。
• normalMap: 指定用于光照效果的法线图。
• baseColor: 指定基础颜色，格式为数组 [R, G, B]。

例如，创建一个normalmap对象的基本配置如下：

var lights = normalmap({
  canvas: document.getElementById('myCanvas'),
  normalMap: normalMapImage, // 这应该是一个Image对象
  baseColor: [0.5, 0.4, 0.5]
});

normalmap.js 的更多配置和API使用方法可以参考项目中的doc/API.md文件。