从零开始用TS开发babylonjs - 本机环境搭建

新建目录babylonjs，进入文件夹中执行：

npm init

后生成一个package.json文件，再执行：

npm install --save-dev @babylonjs/core

npm install --save-dev @babylonjs/inspector

生成【node_modules文件夹】内含各种依赖包

执行：

npx tsc --init 或 tsc --init

生成tsconfig.json文件后，安装webpack：

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

如遇报错，试试再执行一次

创建webpack.config.js 内容：

const path = require("path");
const fs = require("fs");
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 javascript file that is created/compiled in memory},resolve: {extensions: [".tsx", ".ts", ".js"],},module: {rules: [{test: /\.tsx?$/,use: "ts-loader",exclude: /node_modules/,},],},mode: "development",
};

执行：

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

npm install --save-dev webpack-dev-server

执行后，需要配置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.join(appDirectory, "dist"), //tells webpack to serve from the public folder//    hot: true,//    devMiddleware: {//        publicPath: "/",//    }//},module: {rules: [{test: /\.tsx?$/,use: "ts-loader",exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({inject: true,template: path.join(appDirectory, "dist/index.html"),})],mode: "development",
};

配置package.config.js中script：

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

根据配置新建src/app.ts，引用babylongjs基础内容：

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, Mesh, MeshBuilder } 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 Engine(canvas, true);var scene = new Scene(engine);var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);camera.attachControl(canvas, true);var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);var sphere: Mesh = 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();

试运行：

npm run build

生成文件夹dist内有index.html和js文件

即可开始babylonjs之旅

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！