minimal-gltf-loader 项目使用教程

minimal-gltf-loader 项目使用教程

minimal-gltf-loader A minimal, engine-agnostic JavaScript glTF Loader. 项目地址: https://gitcode.com/gh_mirrors/mi/minimal-gltf-loader

1. 项目目录结构及介绍

minimal-gltf-loader/
├── build/
│   └── minimal-gltf-loader.js
├── examples/
│   ├── img/
│   ├── webgl2-renderer.html
│   └── ...
├── src/
│   ├── glTFLoader.ts
│   └── ...
├── textures/
├── third-party-license/
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── gulpfile.js
├── package.json
└── webpack.config.js

目录结构介绍

• build/: 存放编译后的 JavaScript 文件，minimal-gltf-loader.js 是主要的加载器文件。
• examples/: 包含项目的示例文件，webgl2-renderer.html 是一个使用 WebGL 2 渲染的示例。
• src/: 存放 TypeScript 源代码，glTFLoader.ts 是主要的 TypeScript 文件。
• textures/: 存放项目中使用的纹理文件。
• third-party-license/: 存放第三方库的许可证文件。
• .gitignore: Git 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明。
• gulpfile.js: Gulp 构建工具配置文件。
• package.json: 项目依赖和脚本配置文件。
• webpack.config.js: Webpack 打包配置文件。

2. 项目启动文件介绍

启动文件

• examples/webgl2-renderer.html: 这是一个使用 WebGL 2 渲染的示例文件，展示了如何使用 minimal-gltf-loader 加载和渲染 glTF 模型。

使用方法

1. 打开 examples/webgl2-renderer.html 文件。
2. 在浏览器中运行该文件，即可看到 glTF 模型的渲染效果。

3. 项目配置文件介绍

配置文件

• package.json: 项目依赖和脚本配置文件。
• webpack.config.js: Webpack 打包配置文件。
• gulpfile.js: Gulp 构建工具配置文件。

package.json

{
  "name": "minimal-gltf-loader",
  "version": "1.0.0",
  "description": "A minimal engine-agnostic JavaScript glTF Loader",
  "main": "build/minimal-gltf-loader.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "gl-matrix": "^3.3.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/glTFLoader.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'minimal-gltf-loader.js',
    path: path.resolve(__dirname, 'build')
  }
};

gulpfile.js

const gulp = require('gulp');
const ts = require('gulp-typescript');

const tsProject = ts.createProject('tsconfig.json');

gulp.task('scripts', () => {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest('build'));
});

gulp.task('default', gulp.series('scripts'));

通过以上配置文件，可以完成项目的构建、打包和自动化任务。

minimal-gltf-loader A minimal, engine-agnostic JavaScript glTF Loader. 项目地址: https://gitcode.com/gh_mirrors/mi/minimal-gltf-loader