BabylonJS TS开发环境配置

时间：2024-03-16 12:46:58

最近接触了Web3D引擎BabylonJS，引擎虽好但每次搭建TS的开发环境都十分繁琐，思来想去还是用批处理写个自动化的生产工具吧，一了百了。批处理以前没怎么用过，写的也是痛苦无比，而且不够灵活，虽然有大神告诉我可以写个简单的EXE来弄，但不会啊，这个留待后续研究吧，本着先实现在完善的想法，暂且先用批处理的凑活用吧。同时也把配置的步骤记录下。

环境要求：

平台：Windows，visual studio code（开发时用）
工具：Node.js 安装说明看这里

批处理工具：

把批处理工具放到一个空文件夹双击运行就可以了，环境搭建好后会运行一个示例工程，这就证明走通了，可以开发了。
批处理工具git地址

示例工程效果图:BabylonJS TS开发环境配置

配置步骤：

1.用vs code 打开一个空的文件夹在vs code终端中输入下面的命令生成package.json文件。

npm init -y

2.同样在vs code的终端中输入以下命令使用Node.js安装依赖项：typescript，webpack，ts-loader，webpack-cli

npm install --save-dev typescript webpack ts-loader webpack-cli

3.新建webpack.config.js文件并填写以下配置项index.ts是开发脚本，index.js是index.ts编译出来的js代码

const path = require("path");
module.exports = {
    entry: './index.ts',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".ts"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    },
    mode: "development"
};

4.新建tsconfig.json文件

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "noResolve": false,
      "noImplicitAny": false,
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true,
      "experimentalDecorators": true,
      "isolatedModules": false,
      "lib": [
          "dom",
          "es2015.promise",
          "es5"
      ],
      "declaration": true,
      "outDir": "./dist"
  }
}

5.安装babylon.js

npm install --save babylonjs

6.新建html文件，命名index.html，它是网页的入口会调起编译出来的index.js脚本

<!DOCTYPE html>
<html>

    <head>
        <style>
            html,
            body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>

    <body>
        <canvas id="renderCanvas"></canvas>
        <script src="dist/index.js"></script>
    </body>

</html>

7.在根目录创建index.ts用来保存编写的ts代码
8.index.ts中导入BABYLON命名空间，以及可能会用到的变量

import * as BABYLON from 'babylonjs';
import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder, Mesh } from "babylonjs";

9.在package.json的Script属性中添加build运行webpack，捆绑babylonjs文件，最终打包出来的js文件中将包含babylonjs引擎文件。

"scripts": {
        "build": "webpack"
},

10.点击菜单栏终端->运行任务->npm:build 或者在终端中输入npm run build构建js工程。

npm run build

相关文章