Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
#
.DS_Store

# Visual Studio Code
#
.vscode

# Android Studio
.project
.classpath
Expand Down
7 changes: 7 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": [
"msjsdiag.vscode-react-native",
]
}
38 changes: 38 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Build & Debug Android",
"cwd": "${workspaceFolder}/Apps/Playground",
"type": "reactnativedirect",
"request": "launch",
"platform": "android"
},
{
"name": "Build & Debug iOS on Device",
"cwd": "${workspaceFolder}/Apps/Playground",
"type": "reactnativedirect",
"request": "launch",
"platform": "ios",
"port": 9221,
"target": "device"
},
{
"name": "Attach to Android",
"cwd": "${workspaceFolder}/Apps/Playground",
"type": "reactnativedirect",
"request": "attach"
},
{
"name": "Attach to iOS on Device",
"cwd": "${workspaceFolder}/Apps/Playground",
"type": "reactnativedirect",
"request": "attach",
"platform": "ios",
"port": 9221
},
]
}
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"react-native-tools.projectRoot": "./Apps/Playground"
}
15 changes: 14 additions & 1 deletion Apps/Playground/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React, { useState, FunctionComponent, useEffect, useCallback } from 'reac
import { SafeAreaView, StatusBar, Button, View, Text, ViewProps, Image } from 'react-native';

import { EngineView, useEngine, EngineViewCallbacks } from '@babylonjs/react-native';
import { Scene, Vector3, ArcRotateCamera, Camera, WebXRSessionManager, SceneLoader, TransformNode, DeviceSourceManager, DeviceType, DeviceSource, PointerInput } from '@babylonjs/core';
import { Scene, Vector3, ArcRotateCamera, Camera, WebXRSessionManager, SceneLoader, TransformNode, DeviceSourceManager, DeviceType, DeviceSource, PointerInput, WebXRTrackingState } from '@babylonjs/core';
import '@babylonjs/loaders';
import Slider from '@react-native-community/slider';

Expand All @@ -26,6 +26,7 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
const [scale, setScale] = useState<number>(defaultScale);
const [snapshotData, setSnapshotData] = useState<string>();
const [engineViewCallbacks, setEngineViewCallbacks] = useState<EngineViewCallbacks>();
const [trackingState, setTrackingState] = useState<WebXRTrackingState>();

useEffect(() => {
if (engine) {
Expand Down Expand Up @@ -74,16 +75,27 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
}
}, [rootNode, scale]);

const trackingStateToString = (trackingState: WebXRTrackingState | undefined) : string => {
return trackingState === undefined ? "" : WebXRTrackingState[trackingState];
};

const onToggleXr = useCallback(() => {
(async () => {
if (xrSession) {
await xrSession.exitXRAsync();
setXrSession(undefined);
setTrackingState(undefined);
} else {
if (rootNode !== undefined && scene !== undefined) {
const xr = await scene.createDefaultXRExperienceAsync({ disableDefaultUI: true, disableTeleportation: true })
const session = await xr.baseExperience.enterXRAsync("immersive-ar", "unbounded", xr.renderTarget);
setXrSession(session);

setTrackingState(xr.baseExperience.camera.trackingState);
xr.baseExperience.camera.onTrackingStateChanged.add((newTrackingState) => {
setTrackingState(newTrackingState);
});

// TODO: Figure out why getFrontPosition stopped working
//box.position = (scene.activeCamera as TargetCamera).getFrontPosition(2);
const cameraRay = scene.activeCamera!.getForwardRay(1);
Expand Down Expand Up @@ -119,6 +131,7 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
}
<EngineView style={props.style} camera={camera} onInitialized={onInitialized} />
<Slider style={{position: 'absolute', minHeight: 50, margin: 10, left: 0, right: 0, bottom: 0}} minimumValue={0.2} maximumValue={2} value={defaultScale} onValueChange={setScale} />
<Text style={{fontSize: 12, color: 'yellow', position: 'absolute', margin: 10}}>{trackingStateToString(trackingState)}</Text>
</View>
}
{ toggleView &&
Expand Down
2 changes: 1 addition & 1 deletion Apps/Playground/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ SPEC CHECKSUMS:
React-jsi: b32a31da32e030f30bbf9a8d3a9c8325df9e793f
React-jsiexecutor: 7ab9cdcdd18d57652fb041f8a147fe9658d4e00a
React-jsinspector: 2e28bb487e42dda6c94dbfa0c648d1343767a0fb
react-native-babylon: cbcec38c3e3d9fc1aee538508a1f751619bb335b
react-native-babylon: 05685525bfa89aae82b2fccd0a56351e954df545
react-native-slider: b34d943dc60deb96d952ba6b6b249aa8091e86da
React-RCTActionSheet: 1702a1a85e550b5c36e2e03cb2bd3adea053de95
React-RCTAnimation: ddda576010a878865a4eab83a78acd92176ef6a1
Expand Down