-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
124 lines (99 loc) · 3.4 KB
/
index.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- babylon-webxr/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Babylon WebXR Demo</title>
<!-- Embed latest version of Babylon.js. -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<!-- Embed Babylon loader scripts for .gltf and other filetypes. -->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Embed pep.js for consistent cross-browser pointer events. -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#render-canvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="render-canvas"></canvas>
<!-- Our Babylon.js implementation. -->
<script>
// Identify canvas element to script.
const canvas = document.getElementById('render-canvas');
// Initialize Babylon.js variables.
let engine,
scene,
sceneToRender;
const createDefaultEngine = function () {
return new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true
});
};
// Create scene and create XR experience.
const createScene = async function () {
// Create a basic Babylon Scene object.
let scene = new BABYLON.Scene(engine);
// Create and position a free camera.
let camera = new BABYLON.FreeCamera('camera-1', new BABYLON.Vector3(0, 5, -10), scene);
// Point the camera at scene origin.
camera.setTarget(BABYLON.Vector3.Zero());
// Attach camera to canvas.
camera.attachControl(canvas, true);
// Create a light and aim it vertically to the sky (0, 1, 0).
let light = new BABYLON.HemisphericLight('light-1', new BABYLON.Vector3(0, 1, 0), scene);
// Set light intensity to a lower value (default is 1).
light.intensity = 0.5;
// Add one of Babylon's built-in sphere shapes.
let sphere = BABYLON.MeshBuilder.CreateSphere('sphere-1', {
diameter: 2,
segments: 32
}, scene);
// Position the sphere up by half of its height.
sphere.position.y = 1;
// Create a default environment for the scene.
scene.createDefaultEnvironment();
// Initialize XR experience with default experience helper.
const xrHelper = await scene.createDefaultXRExperienceAsync();
if (!xrHelper.baseExperience) {
// XR support is unavailable.
console.log('WebXR support is unavailable');
} else {
// XR support is available; proceed.
return scene;
}
};
// Create engine.
engine = createDefaultEngine();
if (!engine) {
throw 'Engine should not be null';
}
// Create scene.
scene = createScene();
scene.then(function (returnedScene) {
sceneToRender = returnedScene;
});
// Run render loop to render future frames.
engine.runRenderLoop(function () {
if (sceneToRender) {
sceneToRender.render();
}
});
// Handle browser resize.
window.addEventListener('resize', function () {
engine.resize();
});
</script>
</body>
</html>