|
1 |
| - |
2 | 1 | ### Features
|
3 | 2 |
|
4 |
| - |
5 |
| - |
6 | 3 | - Remote and local assets
|
7 |
| - |
8 | 4 | - Augmented Faces
|
9 |
| - |
10 | 5 | - Cloud anchors
|
11 |
| - |
12 | 6 | - Plane detection
|
13 |
| - |
14 | 7 | - Feature quality indicator
|
15 |
| - |
16 | 8 | - Depth API
|
17 |
| - |
18 | 9 | - Location anchors
|
19 |
| - |
20 | 10 | - Video recording
|
21 |
| - |
22 | 11 | - Screenshots
|
23 | 12 |
|
24 |
| - |
25 |
| - |
26 | 13 | # react-native-sceneform
|
27 | 14 |
|
28 |
| - |
29 |
| - |
30 | 15 | 
|
31 | 16 |
|
32 | 17 | | Location markers | Augmented Faces | Object placing | Cloud anchors |
|
33 | 18 | |--|--|--|--|
|
34 | 19 | |||||
|
35 | 20 |
|
36 |
| - |
37 | 21 | # Requirements
|
38 | 22 |
|
39 | 23 | This package requires your app to target Android SDK 24 at least and react-native 0.66+
|
40 | 24 |
|
41 |
| - |
42 |
| - |
43 | 25 | Also, this package does not handle permissions, be sure to request:
|
44 | 26 |
|
45 | 27 | - CAMERA: for AR view.
|
46 |
| - |
47 | 28 | - WRITE_EXTERNAL_STORAGE: for screenshots.
|
48 |
| - |
49 | 29 | - RECORD_AUDIO: for recording video.
|
50 |
| - |
51 | 30 | - ACCESS_FINE_LOCATION/ACCESS_COARSE_LOCATION: for location-based AR.
|
52 | 31 |
|
53 |
| - |
54 |
| - |
55 | 32 | # Installation
|
56 | 33 |
|
57 |
| - |
58 |
| - |
59 |
| -Install from npm running `npm install --save @sceneview/react-native-sceneform` |
60 |
| - |
61 |
| -Then, add the following to your AndroidManifest.xml inside the Application node. |
62 |
| - |
| 34 | +- Install from npm running `npm install --save @sceneview/react-native-sceneform` |
| 35 | +- Add the following to your AndroidManifest.xml inside the Application node. |
63 | 36 | ```xml
|
64 |
| - |
65 | 37 | <meta-data android:name="com.google.ar.core" android:value="required" />
|
66 |
| - |
67 | 38 | ```
|
68 |
| - |
69 |
| - |
| 39 | +- In your app/build.gradle, set your minSdkVersion to 24. |
70 | 40 |
|
71 | 41 | If you are going to use Cloud Anchors, be sure to add your API Key to the AndroidManifest or to sign your application in the Google Cloud Platform console (keyless auth)
|
72 | 42 |
|
73 |
| - |
74 |
| - |
75 | 43 | # Loading the library
|
76 | 44 |
|
77 | 45 | `import { SceneformView, AugmentedFacesView } from 'react-native-sceneform';`
|
78 | 46 |
|
79 |
| - |
80 |
| - |
81 |
| -# SceneformView |
82 |
| - |
83 |
| -### Props, Methods and Events |
84 |
| - |
85 |
| -The `SceneformView` component supports the following props: |
86 |
| - |
87 |
| - |
88 |
| - |
89 |
| -| name | values | default | required | |
90 |
| -| :------------ | :------------ | :------------ | :------------ | |
91 |
| -| viewMode | `true` for hosting, `false` for resolving | `false` | no | |
92 |
| -| discoverMode | `true` for cloud anchors, `false` for location anchors | `true` | no | |
93 |
| -| locationMarkers | `LocationMarker`[] | [] | no | |
94 |
| -| displayPlanes | boolean | `true` | no | |
95 |
| - |
96 |
| - |
97 |
| - |
98 |
| -Also, supports the following methods: |
99 |
| - |
100 |
| - |
101 |
| - |
102 |
| -| name | params | return | |
103 |
| -| :------------ | :------------ | :------------ | |
104 |
| -| addObject | `Model` | void | |
105 |
| -| hostCloudAnchor | `Plane` | void | |
106 |
| -| resolveCloudAnchor | `CloudAnchorId` | void | |
107 |
| -| takeScreenshot | | `Screenshot` promise | |
108 |
| -| startVideoRecording | | boolean promise | |
109 |
| -| stopVideoRecording | | `VideoRecording` promise | |
110 |
| - |
111 |
| - |
112 |
| - |
113 |
| -The following events are supported: |
114 |
| - |
115 |
| - |
116 |
| - |
117 |
| -| name | description | returns | |
118 |
| -| :------------ | :------------ | :------------ | |
119 |
| -| onSessionCreate | Triggered when a sceneform session has been initialised | | |
120 |
| -| onTapPlane | Triggered when the user taps a plane | `Plane` | |
121 |
| -| onAnchorResolve | Triggered when a cloud anchor has been resolved | `CloudAnchor` | |
122 |
| -| onAnchorHost | Triggered when a cloud anchor has been hosted correctly | `CloudAnchor` | |
123 |
| -| onFeatureMapQualityChange | Triggered when the feature map quality changes (HOSTING ONLY) | `FeatureMapQuality` | |
124 |
| - |
125 |
| - |
126 |
| - |
127 |
| -## AugmentedFacesView |
128 |
| - |
129 |
| -### Props, Methods and Events |
130 |
| - |
131 |
| - |
132 |
| - |
133 |
| -The AugmentedFacesView supports the following props: |
134 |
| - |
135 |
| -| name | values | |
136 |
| -| :------------ | :------------ | |
137 |
| -| setAugmentedFace | `index` returned by the `addAugmentedFace` method. Use -1 as starting value. | |
138 |
| - |
139 |
| - |
140 |
| - |
141 |
| -It also supports the following methods: |
142 |
| - |
143 |
| -| name | params | return | |
144 |
| -| :------------ | :------------ | :------------ | |
145 |
| -| addAugmentedFace | `AugmentedFaceModel` | `Promise` returning an `index` to be used by the `setAugmentedFace` prop | |
146 |
| - |
147 |
| - |
148 |
| - |
149 |
| -# Type definitions |
150 |
| - |
151 |
| - |
152 |
| - |
153 |
| -### AugmentedFaceModel |
154 |
| - |
155 |
| -An `AugmentedFaceModel` is a structure meant to be used by the `addAugmentedFace` method. It has two properties: |
156 |
| - |
157 |
| -- model: `URL`/`path` (inside android's assets folder) referencing a GLB object. |
158 |
| - |
159 |
| -- texture: (nullable) `URL`/`path` (inside android's assets folder) referencing an image object. |
160 |
| - |
161 |
| -Example: |
162 |
| - |
163 |
| -`{model: 'models/fox.glb', texture: 'textures/freckles.png'}` |
164 |
| - |
165 |
| - |
166 |
| - |
167 |
| -### Plane |
168 |
| - |
169 |
| -A plane is any touchable surface discovered in the AR session. |
170 |
| - |
171 |
| -When the user taps on a plane it is automatically saved and an index is sent back to the bridge via the `onTapPlane` event. |
172 |
| - |
173 |
| - |
174 |
| - |
175 |
| -You can access the value using `event.planeId`. |
| 47 | +# Components and Definitions |
176 | 48 |
|
177 |
| -It can be used to host a cloud anchor or to place objects on tap. |
| 49 | +### » [SceneformView](./docs/SCENEFORMVIEW.md) |
| 50 | +### » [AugmentedFacesView](./docs/AUGMENTED_FACES.md) |
| 51 | +### » [Type Definitions](./docs/TYPES.md) |
178 | 52 |
|
179 |
| - |
| 53 | +# Examples |
180 | 54 |
|
181 |
| -### CloudAnchor |
182 |
| - |
183 |
| -It is a simple structure containing the CloudAnchorId in the `event.anchorId` value. |
184 |
| - |
185 |
| - |
186 |
| - |
187 |
| -### FeatureMapQuality |
188 |
| - |
189 |
| -The FeatureMapQuality is an indicator used to get sure there is enough quality in the environment scan previous to host an anchor. |
190 |
| - |
191 |
| - |
192 |
| - |
193 |
| -It is a value from 0 to 2 indicating the quality: |
194 |
| - |
195 |
| -- 0: Insufficient |
196 |
| - |
197 |
| -- 1: Sufficient |
198 |
| - |
199 |
| -- 2: Good |
200 |
| - |
201 |
| - |
202 |
| - |
203 |
| -You can access the value via `event.quality` |
204 |
| - |
205 |
| -Host the anchor when the event returns at least 1. |
206 |
| - |
207 |
| - |
208 |
| - |
209 |
| -### VideoRecording |
210 |
| - |
211 |
| -After `stopVideoRecording` is called (`startVideoRecording` must be called first), the video is copied into storage and its path is returned when the promise fulfills. |
212 |
| - |
213 |
| - |
214 |
| - |
215 |
| -You can get the path via `response.path` |
216 |
| - |
217 |
| - |
218 |
| - |
219 |
| -### Screenshot |
220 |
| - |
221 |
| -When `takeScreenshot` is called, the session's current view is copied into a bitmap and saved as a JPEG image. When the promise fulfills you can access the image via `response.path` |
222 |
| - |
223 |
| - |
224 |
| - |
225 |
| -### Model |
226 |
| - |
227 |
| -The `addObject` method is used to insert a renderable into scene, it supports a `Model` object described as follows: |
228 |
| - |
229 |
| - |
230 |
| - |
231 |
| -##### model |
232 |
| - |
233 |
| -It must be an URL pointing to a glb asset. |
234 |
| - |
235 |
| - |
236 |
| - |
237 |
| -##### anchorId |
238 |
| - |
239 |
| -It can be a CloudAnchorId or a PlaneId (returned by onTapPlane) |
240 |
| - |
241 |
| - |
242 |
| - |
243 |
| -##### isCloudAnchor |
244 |
| - |
245 |
| -`boolean`, if true then the `anchorId` value will be taken as a CloudAnchorId and the session will attempt to resolve it, triggering `onAnchorResolve` if succeed. |
246 |
| - |
247 |
| - |
248 |
| - |
249 |
| -Otherwise, if `false` , `anchorId` will be taken as `Plane` and the object will be attached to it. |
250 |
| - |
251 |
| - |
252 |
| - |
253 |
| -### LocationMarker |
254 |
| - |
255 |
| -A location marker is placed calculating its real world position related to the user location. |
256 |
| - |
257 |
| - |
258 |
| - |
259 |
| -There are two types of tags currently supported, showing a label or a simple one with an icon. |
260 |
| - |
261 |
| - |
262 |
| - |
263 |
| -The location marker structure is: |
264 |
| - |
265 |
| - |
266 |
| - |
267 |
| -##### title |
268 |
| - |
269 |
| -`String` , it is the label to be shown by the marker. |
270 |
| - |
271 |
| - |
272 |
| - |
273 |
| -##### lat |
274 |
| - |
275 |
| -`Double`, the latitude value. |
276 |
| - |
277 |
| - |
278 |
| - |
279 |
| -##### lng |
280 |
| - |
281 |
| -`Double`, the longitude value. |
282 |
| - |
283 |
| - |
284 |
| - |
285 |
| -##### isAnchor |
286 |
| - |
287 |
| -`boolean`, if `false` the title is shown in the marker, if `true` then the icon marker is used, |
288 |
| - |
289 |
| - |
290 |
| - |
291 |
| -### CloudAnchorId |
292 |
| - |
293 |
| -A `String` value returned by the `onAnchorHost` event, you can use it to resolve the same anchor lately or share it with friends to get the same experience. |
294 |
| - |
295 |
| - |
296 |
| - |
| 55 | +#### » [Augmented Faces](https://github.com/doranteseduardo/augmented-faces-demo) |
297 | 56 |
|
298 | 57 | # To do
|
299 | 58 |
|
| 59 | +- Augmented images |
300 | 60 | - No-AR view (3D model viewer)
|
301 |
| - |
302 | 61 | - Runtime renderable creation
|
303 |
| - |
304 | 62 | - Custom lights
|
305 |
| - |
306 | 63 | - Animation manipulation (currently animations are played automatically)
|
307 |
| - |
308 | 64 | - Depth toggling
|
309 | 65 |
|
310 | 66 | # Credits
|
311 | 67 |
|
312 |
| - |
| 68 | +[ARCore-Location](https://github.com/appoly/ARCore-Location) |
0 commit comments