import { AR } from 'expo' ; import { GraphicsView } from 'expo-graphics' ; import { Renderer , THREE } from 'expo-three' ; import { BackgroundTexture , Camera } from 'expo-three-ar' ; import * as React from 'react' ; import { Platform , View } from 'react-native' ; let renderer , scene , camera ; export default function App ( ) { if ( Platform . OS !== 'ios' ) return null ; const onContextCreate = async ( { gl , pixelRatio , width , height } ) => { AR . setPlaneDetection ( AR . PlaneDetectionTypes . Horizontal ) ; renderer = new Renderer ( { gl , pixelRatio , width , height } ) ; scene = new THREE . Scene ( ) ; scene . background = new BackgroundTexture ( renderer ) ; camera = new Camera ( width , height , 0.01 , 1000 ) ; const geometry = new THREE . BoxGeometry ( 0.1 , 0.1 , 0.1 ) ; const material = new THREE . MeshPhongMaterial ( { color : 0xff00ff } ) ; const cube = new THREE . Mesh ( geometry , material ) ; cube . position . z = - 0.4 ; scene . add ( cube ) ; scene . add ( new THREE . AmbientLight ( 0xffffff ) ) ; } ; const onResize = ( { scale , width , height } ) => { camera . aspect = width / height ; camera . updateProjectionMatrix ( ) ; renderer . setPixelRatio ( scale ) ; renderer . setSize ( width , height ) ; } ; const onRender = delta => { renderer . render ( scene , camera ) ; } ; return ( < View style = { { flex : 1 } } > < GraphicsView style = { { flex : 1 } } onContextCreate = { onContextCreate } onRender = { onRender } onResize = { onResize } isArEnabled isArRunningStateEnabled isArCameraStateEnabled / > < /View>); }