/
main.ts
99 lines (86 loc) · 2.74 KB
/
main.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import "./style.css";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera.js";
import { AxesViewer } from "@babylonjs/core/Debug/axesViewer";
import { Color3 } from "@babylonjs/core/Maths/math.color.js";
import { Engine } from "@babylonjs/core/Engines/engine.js";
import { EnvironmentHelper } from "@babylonjs/core/Helpers/environmentHelper";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight.js";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder.js";
import { Scene } from "@babylonjs/core/scene.js";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
import { Tools } from "@babylonjs/core/Misc";
import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
// Required for EnvironmentHelper
import "@babylonjs/core/Materials/Textures/Loaders";
// Enable GLTF/GLB loader
import "@babylonjs/loaders/glTF";
// Get canvas element for rendering
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
// Create engine and a scene
const babylonEngine = new Engine(canvas, true);
const scene = new Scene(babylonEngine);
// Add a basic light
new HemisphericLight("light1", new Vector3(0, 2, 0), scene);
// Create a default environment (skybox, ground mesh, etc)
new EnvironmentHelper(
{
skyboxSize: 30,
groundColor: new Color3(0.5, 0.5, 0.5)
},
scene
);
// Setup resize handler
const onResize = () => {
babylonEngine.resize(true);
};
window.addEventListener("resize", onResize);
scene.onDisposeObservable.add(() =>
window.removeEventListener("resize", onResize)
);
// Add a camera for the non-VR view in browser
const camera = new ArcRotateCamera(
"Camera",
Tools.ToRadians(-45),
Tools.ToRadians(45),
5,
new Vector3(0, 2, 0),
scene
);
camera.attachControl(true);
// Add a sphere to have something to look at
const sphereD = 1.0;
const sphere = MeshBuilder.CreateSphere(
"xSphere",
{ segments: 16, diameter: sphereD },
scene
);
sphere.position.x = 0;
sphere.position.y = sphereD * 2;
sphere.position.z = 0;
const rMat = new StandardMaterial("matR", scene);
rMat.diffuseColor = new Color3(1.0, 0, 0);
sphere.material = rMat;
// Axes viewer
const axes = new AxesViewer(scene, 1);
axes.xAxis.parent = sphere;
axes.yAxis.parent = sphere;
axes.zAxis.parent = sphere;
// Run render loop
babylonEngine.runRenderLoop(() => {
scene.render();
});
//Uncomment to use Babylon Debug/Inspector.
//Will also need to install: `npm i @babylonjs/inspector@X.Y.Z -D`
//-----
// void Promise.all([
// import("@babylonjs/core/Legacy/legacy"),
// import("@babylonjs/core/Debug/debugLayer"),
// import("@babylonjs/inspector")
// ]).then(() =>
// scene.debugLayer.show({
// handleResize: true,
// embedMode: true,
// overlay: true
// })
// );
//-----