Skip to content

Commit e599b6e

Browse files
atomarchatomarch
authored
Fix BabylonJS examples
1 parent f296585 commit e599b6e

File tree

5 files changed

+99
-82
lines changed

5 files changed

+99
-82
lines changed

‎examples/babylonjs/placeground/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
<link rel="stylesheet" type="text/css" href="index.css">
88

99
<!-- Babylon.js -->
10-
<script src="https://preview.babylonjs.com/babylon.js"></script>
11-
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
10+
<script src="//cdn.jsdelivr.net/npm/babylonjs@4.1.0/babylon.min.js"></script>
11+
<script src="//cdn.jsdelivr.net/npm/babylonjs-loaders@4.1.0/babylonjs.loaders.min.js"></script>
1212

1313
<!-- Javascript tweening engine -->
14-
<script src="//cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
14+
<script src="//cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
1515

1616
<!-- XR Extras - provides utilities like load screen, almost there, and error handling.
1717
See github.com/8thwall/web/xrextras -->

‎examples/babylonjs/placeground/index.js

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,39 @@
1-
const modelRootURL = './' // Directory where 3D model lives
2-
const modelFile = 'tree.glb' // 3D model to spawn at tap
3-
const startScale = new BABYLON.Vector3(0.01, 0.01, 0.01) // Initial scale value for our model
4-
const endScale = new BABYLON.Vector3(0.05, 0.05, 0.05) // Ending scale value for our model
5-
const animationMillis = 750 // Animate over 0.75 seconds
1+
/* globals BABYLON TWEEN XR8 XRExtras */
2+
3+
const modelRootURL = './' // Directory where 3D model lives
4+
const modelFile = 'tree.glb' // 3D model to spawn at tap
5+
const startScale = new BABYLON.Vector3(0.1, 0.1, -0.1) // Initial scale value for our model
6+
const endScale = new BABYLON.Vector3(2.0, 2.0, -2.0) // Ending scale value for our model
7+
const animationMillis = 750 // Animate over 0.75 seconds
68

79
let surface, engine, scene, camera
810

911
// Populates some object into an XR scene and sets the initial camera position.
10-
const initXrScene = ({ scene, camera }) => {
11-
console.log('initXrScene')
12-
13-
const directionalLight = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 1), scene)
12+
const initXrScene = () => {
13+
const directionalLight = new BABYLON.DirectionalLight(
14+
'DirectionalLight',
15+
new BABYLON.Vector3(0, -1, 1),
16+
scene
17+
)
1418
directionalLight.intensity = 1.0
1519

1620
const ground = BABYLON.Mesh.CreatePlane('ground', 100, scene)
1721
ground.rotation.x = Math.PI / 2
18-
ground.material = new BABYLON.StandardMaterial("groundMaterial", scene)
22+
ground.material = new BABYLON.StandardMaterial('groundMaterial', scene)
23+
ground.material.diffuseColor = BABYLON.Color3.Purple()
1924
ground.material.alpha = 0
2025
surface = ground
2126

2227
// Set the initial camera position relative to the scene we just laid out. This must be at a
2328
// height greater than y=0.
24-
camera.position = new BABYLON.Vector3(0,3,5)
29+
camera.position = new BABYLON.Vector3(0, 3, -5)
2530
}
2631

2732
const placeObjectTouchHandler = (e) => {
2833
// console.log('placeObjectTouchHandler')
2934
// Call XrController.recenter() when the canvas is tapped with two fingers. This resets the
3035
// AR camera to the position specified by XrController.updateCameraProjectionMatrix() above.
31-
if (e.touches.length == 2) {
36+
if (e.touches.length === 2) {
3237
XR8.XrController.recenter()
3338
}
3439

@@ -37,60 +42,52 @@ const placeObjectTouchHandler = (e) => {
3742
}
3843

3944
// If the canvas is tapped with one finger and hits the "surface", spawn an object.
40-
4145
const pickResult = scene.pick(e.touches[0].clientX, e.touches[0].clientY)
42-
if (pickResult.hit && pickResult.pickedMesh == surface) {
43-
44-
const gltf = BABYLON.SceneLoader.LoadAssetContainer(
46+
if (pickResult.hit && pickResult.pickedMesh === surface) {
47+
BABYLON.SceneLoader.ImportMesh(
48+
'',
4549
modelRootURL,
4650
modelFile,
4751
scene,
48-
function (container) { // onSuccess
49-
const scale = Object.assign({}, startScale)
50-
const yRot = Math.random() * 360
51-
for (i = 0; i < container.meshes.length; i++) {
52-
container.meshes[i]._position.x = pickResult.pickedPoint.x
53-
container.meshes[i]._position.z = pickResult.pickedPoint.z
54-
container.meshes[i]._rotation.y = yRot
55-
container.meshes[i]._scaling.x = scale.x
56-
container.meshes[i]._scaling.y = scale.y
57-
container.meshes[i]._scaling.z = scale.z
58-
}
59-
// Adds all elements to the scene
60-
container.addAllToScene()
52+
(newMeshes) => { // onSuccess
53+
const mesh = newMeshes[0]
54+
mesh.scaling = new BABYLON.Vector3(startScale.x, startScale.y, startScale.z)
6155

56+
const yRot = Math.random() * Math.PI
57+
mesh.position = new BABYLON.Vector3(pickResult.pickedPoint.x, 0, pickResult.pickedPoint.z)
58+
mesh.rotation = new BABYLON.Vector3(0, yRot, 0)
59+
60+
const scale = Object.assign({}, startScale)
6261
new TWEEN.Tween(scale)
63-
.to(endScale, animationMillis)
64-
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
65-
.onUpdate(() => {
66-
for (i = 0; i < container.meshes.length; i++) {
67-
container.meshes[i]._scaling.x = scale.x
68-
container.meshes[i]._scaling.y = scale.y
69-
container.meshes[i]._scaling.z = scale.z
70-
}
71-
})
72-
.start() // Start the tween immediately.
62+
.to(endScale, animationMillis)
63+
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
64+
.onUpdate(() => {
65+
mesh.scaling.x = scale.x
66+
mesh.scaling.y = scale.y
67+
mesh.scaling.z = scale.z
68+
})
69+
.start() // Start the tween immediately.
7370
},
74-
function (xhr) { //onProgress
75-
console.log(`${(xhr.loaded / xhr.total * 100 )}% loaded`)
71+
(xhr) => { // onProgress
72+
console.log(`${(xhr.loaded / xhr.total * 100)}% loaded`)
7673
},
77-
function (error) { //onError
74+
() => { // onError
7875
console.log('Error loading model')
79-
},
76+
}
8077
)
8178
}
8279
}
8380

8481
const startScene = () => {
8582
const canvas = document.getElementById('renderCanvas')
8683

87-
engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true)
84+
engine = new BABYLON.Engine(canvas, true, {stencil: true, preserveDrawingBuffer: true})
8885
engine.enableOfflineSupport = false
8986

9087
scene = new BABYLON.Scene(engine)
9188
camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, 0), scene)
9289

93-
initXrScene({ scene, camera }) // Add objects to the scene and set starting camera position.
90+
initXrScene() // Add objects to the scene and set starting camera position.
9491

9592
// Connect the camera to the XR engine and show camera feed
9693
camera.addBehavior(XR8.Babylonjs.xrCameraBehavior(), true)
@@ -109,16 +106,21 @@ const startScene = () => {
109106
}
110107

111108
const onxrloaded = () => {
112-
XR8.addCameraPipelineModules([ // Add camera pipeline modules.
113-
XRExtras.AlmostThere.pipelineModule(), // Detects unsupported browsers and gives hints.
114-
XRExtras.FullWindowCanvas.pipelineModule(), // Modifies the canvas to fill the window.
115-
XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup.
116-
XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error.
109+
XR8.addCameraPipelineModules([ // Add camera pipeline modules.
110+
XRExtras.AlmostThere.pipelineModule(), // Detects unsupported browsers and gives hints.
111+
XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup.
112+
XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error.
117113
])
118114

119115
startScene()
120116
}
121117

122118
// Show loading screen before the full XR library has been loaded.
123119
const load = () => { XRExtras.Loading.showLoading({onxrloaded}) }
124-
window.onload = () => { window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load) }
120+
window.onload = () => {
121+
if (window.XRExtras) {
122+
load()
123+
} else {
124+
window.addEventListener('xrextrasloaded', load)
125+
}
126+
}

‎examples/babylonjs/placeground/tree.glb

624 Bytes
Binary file not shown.

‎gettingstarted/xrbabylonjs/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" type="text/css" href="index.css">
88

99
<!-- Babylon.js -->
10-
<script src="https://preview.babylonjs.com/babylon.js"></script>
10+
<script src="//cdn.jsdelivr.net/npm/babylonjs@4.1.0/babylon.min.js"></script>
1111

1212
<!-- XR Extras - provides utilities like load screen, almost there, and error handling.
1313
See github.com/8thwall/web/xrextras -->
@@ -20,7 +20,7 @@
2020
<script src="index.js"></script>
2121

2222
</head>
23-
<body>
23+
<body>
2424
<canvas id="renderCanvas"></canvas>
25-
</body>
25+
</body>
2626
</html>

‎gettingstarted/xrbabylonjs/index.js

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,70 @@
1+
/* globals BABYLON XR8 XRExtras */
2+
13
let box, engine, scene, camera
24

35
// Populates some object into an XR scene and sets the initial camera position.
4-
const initXrScene = ({ scene, camera }) => {
5-
6-
const directionalLight = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 1), scene)
6+
const initXrScene = () => {
7+
const directionalLight = new BABYLON.DirectionalLight(
8+
'DirectionalLight',
9+
new BABYLON.Vector3(0, -1, 1),
10+
scene
11+
)
712
directionalLight.intensity = 1.0
813

9-
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", {diameter: 1}, scene)
10-
sphere.material = new BABYLON.StandardMaterial("sphereMaterial", scene)
14+
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 1}, scene)
15+
sphere.material = new BABYLON.StandardMaterial('sphereMaterial', scene)
1116
sphere.material.diffuseColor = BABYLON.Color3.Red()
1217
sphere.position = new BABYLON.Vector3(1, 0.5, 0)
1318

14-
const cone = BABYLON.MeshBuilder.CreateCylinder("cone1", {height: 1, diameterBottom: 1, diameterTop: 0}, scene)
15-
cone.material = new BABYLON.StandardMaterial("coneMaterial", scene)
19+
const cone = BABYLON.MeshBuilder.CreateCylinder(
20+
'cone',
21+
{height: 1, diameterBottom: 1, diameterTop: 0},
22+
scene
23+
)
24+
cone.material = new BABYLON.StandardMaterial('coneMaterial', scene)
1625
cone.material.diffuseColor = BABYLON.Color3.Green()
1726
cone.position = new BABYLON.Vector3(-1, 0.5, 0.5)
1827

1928
const ground = BABYLON.MeshBuilder.CreatePlane('ground', {size: 4}, scene)
2029
ground.rotation.x = Math.PI / 2
21-
ground.material = new BABYLON.StandardMaterial("groundMaterial", scene)
30+
ground.material = new BABYLON.StandardMaterial('groundMaterial', scene)
2231
ground.material.diffuseColor = BABYLON.Color3.Purple()
2332
ground.material.alpha = 0.5
33+
ground.position = new BABYLON.Vector3(0, 0, 0)
2434

25-
box = BABYLON.MeshBuilder.CreateBox("box", {size: 0.5}, scene)
26-
box.material = new BABYLON.StandardMaterial("coneMaterial", scene)
35+
box = BABYLON.MeshBuilder.CreateBox('box', {size: 0.5}, scene)
36+
box.material = new BABYLON.StandardMaterial('boxMaterial', scene)
2737
box.material.diffuseColor = BABYLON.Color3.Teal()
2838
box.position = new BABYLON.Vector3(0, 0.25, -1)
2939
box.rotation.y = 45
3040

31-
// Set the initial camera position relative to the scene we just laid out. This must be at a
32-
// height greater than y=0.
41+
// Set the initial camera position relative to the scene we just laid out.
42+
// This must be at a height greater than y=0.
3343
camera.position = new BABYLON.Vector3(0, 3, -5)
3444
}
3545

3646
const recenterTouchHandler = (e) => {
37-
// Call XrController.recenter() when the canvas is tapped with two fingers. This resets the
38-
// AR camera to the position specified by XrController.updateCameraProjectionMatrix() above.
39-
if (e.touches.length == 2) {
47+
// Call XrController.recenter() when the canvas is tapped with two fingers.
48+
// This resets the AR camera to the position specified by
49+
// XrController.updateCameraProjectionMatrix() above.
50+
if (e.touches.length === 2) {
4051
XR8.XrController.recenter()
4152
}
4253
}
4354

4455
const startScene = () => {
45-
console.log("startScene")
4656
const canvas = document.getElementById('renderCanvas')
4757

48-
engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true })
58+
engine = new BABYLON.Engine(canvas, true, {stencil: true, preserveDrawingBuffer: true})
4959
engine.enableOfflineSupport = false
5060

5161
scene = new BABYLON.Scene(engine)
5262
camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, 0), scene)
5363

54-
initXrScene({ scene, camera }) // Add objects to the scene and set starting camera position.
64+
initXrScene() // Add objects to the scene and set starting camera position.
5565

5666
// Connect the camera to the XR engine and show camera feed
57-
camera.addBehavior(XR8.Babylonjs.xrCameraBehavior())
67+
camera.addBehavior(XR8.Babylonjs.xrCameraBehavior(), true)
5868

5969
canvas.addEventListener('touchstart', recenterTouchHandler, true) // Add touch listener.
6070

@@ -71,16 +81,21 @@ const startScene = () => {
7181
}
7282

7383
const onxrloaded = () => {
74-
XR8.addCameraPipelineModules([ // Add camera pipeline modules.
75-
XRExtras.AlmostThere.pipelineModule(), // Detects unsupported browsers and gives hints.
76-
XRExtras.FullWindowCanvas.pipelineModule(), // Modifies the canvas to fill the window.
77-
XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup.
78-
XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error.
84+
XR8.addCameraPipelineModules([ // Add camera pipeline modules.
85+
XRExtras.AlmostThere.pipelineModule(), // Detects unsupported browsers and gives hints.
86+
XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup.
87+
XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error.
7988
])
8089

8190
startScene()
8291
}
8392

8493
// Show loading screen before the full XR library has been loaded.
8594
const load = () => { XRExtras.Loading.showLoading({onxrloaded}) }
86-
window.onload = () => { window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load) }
95+
window.onload = () => {
96+
if (window.XRExtras) {
97+
load()
98+
} else {
99+
window.addEventListener('xrextrasloaded', load)
100+
}
101+
}

0 commit comments

Comments
 (0)