ES6: ES6 - Babylon.js Documentation
Tutorial: Babylon.js Documentation
yarn add @babylonjs/core Typescript declaration も含まれる。
Getting started
First Steps - Babylon.js Documentationを参考に触ってみる。Typescriptを使いたいのでとりあえずparcelでプロジェクトを立ててみる。
yarn add parcel @babylonjs/core typescript
package.json
{
"private": true,
"scripts": {
"start": "parcel serve watch src/*.html --open"
},
"dependencies": {
"@babylonjs/core": "^4.0.3",
"parcel": "^1.12.4",
"typescript": "^3.6.4"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<title>Babylon Playground</title>
<script defer src="./app.ts"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas>
</body>
</html>
app.ts
import {
Engine,
Scene,
ArcRotateCamera,
Vector3,
HemisphericLight,
MeshBuilder,
} from '@babylonjs/core';
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true);
const scene = new Scene(engine);
const camera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new Vector3(0,0,5), scene);
new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);
camera.attachControl(canvas, true);
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener("resize", () => {
engine.resize();
});
玉が表示される。最初、玉を動かしてると思ったがよく読んだらカメラを動かしている。
FPSを表示する
engine.getFps().toFixed() で現在のFPSを取得する。RenderLoopで$.innerHTMLとかするとそれじたいがFPSを大きく下げるのでダメ。canvas上にUIを設置するか。もしくは仮想DOMライブラリでUIを表現するのがよさそう。