招代理网站怎么做,wordpress .mo .po,北京代理记账公司招聘,做网站需要的资质本文讲述如何搭建babylonjs的项目工程。 一 准备
首先创建一个目录叫MyProject#xff0c;然后在这个目录里再创建三个目录#xff1a;dist#xff0c;public和src#xff0c;如下#xff0c; 接着在src目录里添加一个文件叫app.ts#xff0c;本文使用typescript#…本文讲述如何搭建babylonjs的项目工程。 一 准备
首先创建一个目录叫MyProject然后在这个目录里再创建三个目录distpublic和src如下 接着在src目录里添加一个文件叫app.ts本文使用typescript在public目录下添加index.htmlindex.html内容如下
!DOCTYPE html
htmlheadmeta charsetUTF-8titleBabylon Tutorial/titlestylehtml, body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}/style/headbody/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 were 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.tsoutput里的filename用于指定app.ts经过tsc编译后产生的js文件名这里是bundleName.js位置是js目录而js目录是位于dist目录下到时会自动创建devServer指定了程序运行后的服务器地址这里是localhost:8080static是指服务器的运行起始目录这里是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/coreclass 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) {// ShiftCtrlAltIif (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的项目工程也是参考的官方文档略有改动。
