├── .buckconfig ├── .bundle └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .ruby-version ├── .watchmanconfig ├── App.tsx ├── CREATE.md ├── Gemfile ├── README.md ├── __tests__ └── App-test.tsx ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── babylonreactnativesample │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── babylonreactnativesample │ │ │ ├── MainActivity.java │ │ │ ├── MainApplication.java │ │ │ └── newarchitecture │ │ │ ├── MainApplicationReactNativeHost.java │ │ │ ├── components │ │ │ └── MainComponentsRegistry.java │ │ │ └── modules │ │ │ └── MainApplicationTurboModuleManagerDelegate.java │ │ ├── jni │ │ ├── Android.mk │ │ ├── MainApplicationModuleProvider.cpp │ │ ├── MainApplicationModuleProvider.h │ │ ├── MainApplicationTurboModuleManagerDelegate.cpp │ │ ├── MainApplicationTurboModuleManagerDelegate.h │ │ ├── MainComponentsRegistry.cpp │ │ ├── MainComponentsRegistry.h │ │ └── OnLoad.cpp │ │ └── res │ │ ├── drawable │ │ └── rn_edit_text_material.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── docs ├── ANDROID_EMULATOR.md └── Images │ ├── AndroidEmulatorGLES.jpeg │ ├── ControlsButtonLocation.png │ └── ToolWindowLocation.png ├── index.js ├── ios ├── .xcode.env ├── BabylonReactNativeSample.xcodeproj │ ├── project.pbxproj │ ├── project.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ └── xcshareddata │ │ └── xcschemes │ │ └── BabylonReactNativeSample.xcscheme ├── BabylonReactNativeSample.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── BabylonReactNativeSample │ ├── AppDelegate.h │ ├── AppDelegate.mm │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m ├── BabylonReactNativeSampleTests │ ├── BabylonReactNativeSampleTests.m │ └── Info.plist ├── Podfile └── Podfile.lock ├── metro.config.js ├── msbuild.binlog ├── package-lock.json ├── package.json ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | overrides: [ 7 | { 8 | files: ['*.ts', '*.tsx'], 9 | rules: { 10 | '@typescript-eslint/no-shadow': ['error'], 11 | 'no-shadow': 'off', 12 | 'no-undef': 'off', 13 | }, 14 | }, 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | 34 | # node.js 35 | # 36 | node_modules/ 37 | npm-debug.log 38 | yarn-error.log 39 | 40 | # BUCK 41 | buck-out/ 42 | \.buckd/ 43 | *.keystore 44 | !debug.keystore 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://docs.fastlane.tools/best-practices/source-control/ 52 | 53 | **/fastlane/report.xml 54 | **/fastlane/Preview.html 55 | **/fastlane/screenshots 56 | **/fastlane/test_output 57 | 58 | # Bundle artifact 59 | *.jsbundle 60 | 61 | # Ruby / CocoaPods 62 | /ios/Pods/ 63 | /vendor/bundle/ 64 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.5 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * Generated with the TypeScript template 6 | * https://github.com/react-native-community/react-native-template-typescript 7 | * 8 | * @format 9 | */ 10 | 11 | import React, { 12 | FunctionComponent, 13 | useEffect, 14 | useCallback, 15 | useState, 16 | } from 'react'; 17 | 18 | import {SafeAreaView, View, Button, ViewProps, StatusBar} from 'react-native'; 19 | 20 | import {EngineView, useEngine} from '@babylonjs/react-native'; 21 | import {SceneLoader} from '@babylonjs/core/Loading/sceneLoader'; 22 | import {Camera} from '@babylonjs/core/Cameras/camera'; 23 | import {ArcRotateCamera} from '@babylonjs/core/Cameras/arcRotateCamera'; 24 | import '@babylonjs/loaders/glTF'; 25 | import {Scene} from '@babylonjs/core/scene'; 26 | import {WebXRSessionManager, WebXRTrackingState} from '@babylonjs/core/XR'; 27 | 28 | const EngineScreen: FunctionComponent = (props: ViewProps) => { 29 | const engine = useEngine(); 30 | const [camera, setCamera] = useState(); 31 | const [xrSession, setXrSession] = useState(); 32 | const [trackingState, setTrackingState] = useState(); 33 | const [scene, setScene] = useState(); 34 | 35 | const onToggleXr = useCallback(() => { 36 | (async () => { 37 | if (xrSession) { 38 | await xrSession.exitXRAsync(); 39 | } else { 40 | if (scene !== undefined) { 41 | const xr = await scene.createDefaultXRExperienceAsync({ 42 | disableDefaultUI: true, 43 | disableTeleportation: true, 44 | }); 45 | const session = await xr.baseExperience.enterXRAsync( 46 | 'immersive-ar', 47 | 'unbounded', 48 | xr.renderTarget, 49 | ); 50 | setXrSession(session); 51 | session.onXRSessionEnded.add(() => { 52 | setXrSession(undefined); 53 | setTrackingState(undefined); 54 | }); 55 | 56 | setTrackingState(xr.baseExperience.camera.trackingState); 57 | xr.baseExperience.camera.onTrackingStateChanged.add( 58 | newTrackingState => { 59 | setTrackingState(newTrackingState); 60 | }, 61 | ); 62 | } 63 | } 64 | })(); 65 | }, [scene, xrSession]); 66 | 67 | useEffect(() => { 68 | if (engine) { 69 | const url = 70 | 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF/BoxAnimated.gltf'; 71 | SceneLoader.LoadAsync(url, undefined, engine).then(loadScene => { 72 | setScene(loadScene); 73 | loadScene.createDefaultCameraOrLight(true, undefined, true); 74 | (loadScene.activeCamera as ArcRotateCamera).alpha += Math.PI; 75 | (loadScene.activeCamera as ArcRotateCamera).radius = 10; 76 | setCamera(loadScene.activeCamera!); 77 | }); 78 | } 79 | }, [engine]); 80 | 81 | return ( 82 | <> 83 | 84 |