Babylon.js AR scene
  • Create a Babylon.js scene
1
createScene = async (
2
engine: Engine,
3
canvas: HTMLCanvasElement
4
): Promise<Scene> => {
5
// This creates a basic Babylon Scene object (non-mesh)
6
const scene = new Scene(engine);
Copied!
  • Add camera
1
// This creates and positions a free camera (non-mesh)
2
const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);
3
​
4
// This targets the camera to scene origin
5
camera.setTarget(Vector3.Zero());
6
​
7
// This attaches the camera to the canvas
8
camera.attachControl(canvas, true);
Copied!
  • Add light
1
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
2
const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
3
​
4
// Default intensity is 1. Let's dim the light a small amount
5
light.intensity = 0.7;
Copied!
  • Add Objects
1
​
2
// Our built-in 'sphere' shape.
3
const sphere = Mesh.CreateSphere(
4
"sphere", 32, 2,
5
scene
6
);
7
​
8
// Move the sphere upward 1/2 its height
9
sphere.position.y = 2;
10
sphere.position.z = 5;
Copied!
  • Add Material
1
// Load a texture to be used as the ground material
2
const groundMaterial = new StandardMaterial("ground material", scene);
3
groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
4
// Assign it to an object like sphere.material = groundMaterial;
Copied!
  • Add WebXR
1
const xr = await scene.createDefaultXRExperienceAsync({
2
// ask for an ar-session
3
uiOptions: {
4
sessionMode: "immersive-ar",
5
referenceSpaceType: "local-floor"
6
},
7
optionalFeatures: true,
8
});
9
​
10
const featuresManager = xr.baseExperience.featuresManager;
Copied!
1
import { Engine } from "@babylonjs/core/Engines/engine";
2
import { Scene } from "@babylonjs/core/scene";
3
import { FreeCamera, WebXRHitTest } from '@babylonjs/core';
4
​
5
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
6
import { Quaternion, Vector3 } from "@babylonjs/core/Maths/math.vector";
7
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
8
import { StandardMaterial } from "@babylonjs/core";
9
import { CreateSceneClass } from "../createScene";
10
​
11
import { getTokenOrRefresh } from "../utils/token_util";
12
import { ResultReason } from "microsoft-cognitiveservices-speech-sdk";
13
​
14
// If you don't need the standard material you will still need to import it since the scene requires it.
15
// import "@babylonjs/core/Materials/standardMaterial";
16
import { Texture } from "@babylonjs/core";
17
​
18
import grassTextureUrl from "../../assets/grass.jpg";
19
import { Mesh, MeshBuilder } from "@babylonjs/core/Meshes";
20
​
21
export class DefaultSceneWithTexture implements CreateSceneClass {
22
​
23
createScene = async (
24
engine: Engine,
25
canvas: HTMLCanvasElement
26
): Promise<Scene> => {
27
// This creates a basic Babylon Scene object (non-mesh)
28
const scene = new Scene(engine);
29
​
30
// This creates and positions a free camera (non-mesh)
31
const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);
32
​
33
// This targets the camera to scene origin
34
camera.setTarget(Vector3.Zero());
35
​
36
// This attaches the camera to the canvas
37
camera.attachControl(canvas, true);
38
​
39
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
40
const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
41
​
42
// Default intensity is 1. Let's dim the light a small amount
43
light.intensity = 0.7;
44
​
45
// Our built-in 'sphere' shape.
46
const sphere = Mesh.CreateSphere(
47
"sphere", 32, 2,
48
scene
49
);
50
​
51
// Move the sphere upward 1/2 its height
52
sphere.position.y = 2;
53
sphere.position.z = 5;
54
​
55
// Load a texture to be used as the ground material
56
const groundMaterial = new StandardMaterial("ground material", scene);
57
groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
58
// ground.material = groundMaterial;
59
60
// eslint-disable-next-line @typescript-eslint/no-unused-vars
61
const xr = await scene.createDefaultXRExperienceAsync({
62
// ask for an ar-session
63
uiOptions: {
64
sessionMode: "immersive-ar",
65
referenceSpaceType: "local-floor"
66
},
67
optionalFeatures: true,
68
});
69
​
70
const featuresManager = xr.baseExperience.featuresManager;
71
​
72
​
73
const marker = MeshBuilder.CreateTorus("marker", { diameter: 0.1, thickness: 0.05 }, scene);
74
marker.rotationQuaternion = new Quaternion();
75
​
76
​
77
return scene;
78
};
79
}
80
​
81
export default new DefaultSceneWithTexture();
Copied!
Export as PDF
Copy link