Hello WebXR 项目启动与配置教程

2025-05-21 16:57:01作者：蔡丛锟

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

Hello WebXR 项目是一个用于展示 WebXR 功能的演示项目。以下是项目的目录结构及其介绍：

hello-webxr/
├── assets/                     # 存放项目所需的资源文件，如模型、纹理等
├── res/                        # 存放项目配置文件和元数据
├── src/                        # 源代码目录，包含 JavaScript 和 GLSL 文件
├── .gitignore                  # 指定 Git 忽略的文件和目录
├── LICENSE                     # 项目许可证文件
├── README.md                   # 项目说明文件
├── bundle.js                   # 打包后的 JavaScript 文件
├── bundle.js.map               # 打包后的 JavaScript 文件映射
├── index.html                  # 项目的主 HTML 文件
├── package-lock.json           # npm 包锁定文件
├── package.json                # npm 包配置文件
├── packshaders.py              # 脚本文件，用于打包着色器
└── webpack.config.js           # Webpack 配置文件

2. 项目的启动文件介绍

项目的启动文件是 index.html，它定义了页面的基本结构和加载 WebXR 演示所需的脚本。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello WebXR</title>
</head>
<body>
    <!-- 添加 WebXR 演示相关的内容 -->
    <script src="bundle.js"></script>
</body>
</html>

在 index.html 文件中，通过 <script> 标签引入了打包后的 JavaScript 文件 bundle.js，该文件包含了项目的主要逻辑。

3. 项目的配置文件介绍

package.json

package.json 文件是 npm 包的配置文件，它定义了项目的依赖、脚本和元数据。

{
  "name": "hello-webxr",
  "version": "1.0.0",
  "description": "A WebXR demo made to celebrate the WebXR spec release.",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    // 项目依赖列表
  },
  "devDependencies": {
    // 开发依赖列表
  }
}

在 scripts 部分，定义了两个 npm 脚本：

start：使用 webpack 的开发服务器启动项目，并自动在浏览器中打开。
build：构建项目，生成生产环境的打包文件。

webpack.config.js

webpack.config.js 文件是 Webpack 的配置文件，它定义了项目的打包规则和插件。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.glsl$/,
        use: 'raw-loader'
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080
  }
};

在这个配置文件中，定义了入口文件 src/index.js，输出文件 dist/bundle.js，以及处理 JavaScript 和 GLSL 文件的加载器。同时，配置了开发服务器的端口和内容基础路径。

登录后查看全文