学习babylon.js --- [2] 项目工程搭建

本文讲述如何搭建babylonjs的项目工程。

一准备

首先创建一个目录叫MyProject，然后在这个目录里再创建三个目录：dist，public和src，如下，
在这里插入图片描述
接着在src目录里添加一个文件叫app.ts，本文使用typescript；在public目录下添加index.html，index.html内容如下，

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Babylon Tutorial</title><style>html, body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body></body>
</html>

最后回到MyProject目录下执行下面命令来产生package.json，

npm init

一路回车就行了。

由于本文使用typescript，所以在MyProject目录下还要执行下面的命令，

tsc --init

执行完后会产生tsconfig.json，打开这个文件然后替换成以下内容，

{"compilerOptions": {"target": "es6","module": "ESNext","moduleResolution": "node","noResolve": false,"noImplicitAny": false,"sourceMap": true,"preserveConstEnums":true,"lib": ["dom","es6"],"rootDir": "src"}
}

注意其中的"rootDir"，其值是我们的src目录。

最后形成的目录如下，
在这里插入图片描述

二安装webpack并配置

webpack是现代JavaScript 应用程序的静态模块打包工具，方便我们发布程序。在MyProject目录下，使用以下命令进行安装，

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

另外再安装2个插件，如下，

npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-dev-server

在运行程序后，如果有修改，这2个插件可以让程序自动更新，便于调试。

安装完毕之后，在MyProject目录下创建webpack.config.js，内容如下，

const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = fs.realpathSync(process.cwd());module.exports = {entry: path.resolve(appDirectory, "src/app.ts"), //path to the main.ts fileoutput: {filename: "js/bundleName.js", //name for the js file that is created/compiled in memoryclean: true,},resolve: {extensions: [".tsx", ".ts", ".js"],},devServer: {host: "0.0.0.0",port: 8080, //port that we're using for local host (localhost:8080)static: path.resolve(appDirectory, "public"), //tells webpack to serve from the public folderhot: true,devMiddleware: {publicPath: "/",}},module: {rules: [{test: /\.tsx?$/,use: "ts-loader",exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({inject: true,template: path.resolve(appDirectory, "public/index.html"),})],mode: "development",
};

第3行引入了html-webpack-plugin，就是刚才安装的插件之一，然后来看下module.exports，

entry指定了要执行的ts文件，这里是src/app.ts
output里的filename用于指定app.ts经过tsc编译后产生的js文件名，这里是bundleName.js，位置是js目录，而js目录是位于dist目录下，到时会自动创建
devServer指定了程序运行后的服务器地址，这里是localhost:8080，"static"是指服务器的运行起始目录，这里是public目录，可以让服务器加载静态文件
plugins里创建HtmlWebpackPlugin的对象，其template参数指向public/index.html

HTML Webpack插件可以把打包好的js文件注入到dist目录下的index.html里。

三安装babylonjs

可以参考第一篇文章第二节，按照需要的方式来安装。注意要在项目根目录下进行安装，即MyProject，这里使用ES6方式来安装，

npm install @babylonjs/core

安装完之后使用npm list来查看当前工程下安装的package，
在这里插入图片描述
注意这些package都是在当前工程下有效，不是全局安装的。如果需要全局安装，需要自行设置下。

四准备app.ts

这里推荐使用VS Code来打开MyProject目录，然后把以下内容拷贝进去，

import * as BABYLON from "@babylonjs/core"class App {constructor() {// create the canvas html element and attach it to the webpagevar canvas = document.createElement("canvas");canvas.style.width = "100%";canvas.style.height = "100%";canvas.id = "gameCanvas";document.body.appendChild(canvas);// initialize babylon scene and enginevar engine = new BABYLON.Engine(canvas, true);var scene = new BABYLON.Scene(engine);var camera: BABYLON.ArcRotateCamera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);camera.attachControl(canvas, true);var light1: BABYLON.HemisphericLight = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);var sphere: BABYLON.Mesh = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);// hide/show the Inspectorwindow.addEventListener("keydown", (ev) => {// Shift+Ctrl+Alt+Iif (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.key === 'i') {if (scene.debugLayer.isVisible()) {scene.debugLayer.hide();} else {scene.debugLayer.show();}}});// run the main render loopengine.runRenderLoop(() => {scene.render();});}
}
new App();

五打包项目并运行

打开package.json，找到"scripts"，如下，
在这里插入图片描述

然后替换成如下语句，

"scripts": {"build": "webpack","start": "webpack-dev-server --port 8080"},

接着构建并运行server，执行以下2个命令即可，

npm run build
npm run start

执行过程如下，
在这里插入图片描述
最后打开浏览器，地址栏输入127.0.0.1:8080并回车，可以看到如下效果，鼠标左键按着不放然后移动，可以看到变化

此时打开dist目录，可以看到生成的文件符合之前的设置，
在这里插入图片描述
打开index.html，可以看到其引入了生成的bundleName.js

六总结

本文讲述了如何搭建babylonjs的项目工程，也是参考的官方文档，略有改动。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1098.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！