react-native-ar
所属分类：iPhone/iOS
开发工具：kotlin
文件大小：0KB
下载次数：0
上传日期：2023-09-25 07:51:41
上 传 者：
sh-1993
说明： React本机AR模型查看器，
(React native AR model viewer,)
文件列表:
.circleci/ (0, 2023-09-25)
.circleci/config.yml (2150, 2023-09-25)
.editorconfig (283, 2023-09-25)
.husky/ (0, 2023-09-25)
.husky/.npmignore (2, 2023-09-25)
.husky/commit-msg (78, 2023-09-25)
.husky/pre-commit (71, 2023-09-25)
.yarnrc (115, 2023-09-25)
CONTRIBUTING.md (9218, 2023-09-25)
LICENSE (1065, 2023-09-25)
android/ (0, 2023-09-25)
android/build.gradle (2412, 2023-09-25)
android/gradle.properties (921, 2023-09-25)
android/gradlew (5766, 2023-09-25)
android/gradlew.bat (2763, 2023-09-25)
android/src/ (0, 2023-09-25)
android/src/main/ (0, 2023-09-25)
android/src/main/AndroidManifest.xml (273, 2023-09-25)
android/src/main/java/ (0, 2023-09-25)
android/src/main/java/com/ (0, 2023-09-25)
android/src/main/java/com/reactnativearviewer/ (0, 2023-09-25)
android/src/main/java/com/reactnativearviewer/ArViewerPackage.kt (551, 2023-09-25)
android/src/main/java/com/reactnativearviewer/ArViewerView.kt (21472, 2023-09-25)
android/src/main/java/com/reactnativearviewer/ArViewerViewManager.kt (5417, 2023-09-25)
android/src/main/java/com/reactnativearviewer/CameraPermissionHelper.kt (1533, 2023-09-25)
android/src/main/java/com/reactnativearviewer/CustomTransformableNode.kt (1105, 2023-09-25)
android/src/main/java/com/reactnativearviewer/CustomTranslationController.kt (8903, 2023-09-25)
android/src/main/java/com/reactnativearviewer/HandMotionView.kt (1592, 2023-09-25)
android/src/main/java/com/reactnativearviewer/InstructionsController.kt (2573, 2023-09-25)
android/src/main/res/ (0, 2023-09-25)
... ...
# React Native AR Viewer
[](https://www.npmjs.com/package/react-native-ar-viewer)
AR viewer for react native that uses Sceneform on Android and ARKit on iOS
## Installation
```sh
npm install react-native-ar-viewer
```
### Android
Required AR features:
- Add `com.google.ar.core` meta data to your `AndroidManifest.xml` as follows:
```xml
...
...
...
```
- Check that your `
` tag contains `xmlns:tools="http://schemas.android.com/tools"` attribute.
### iOS
- Remember to add `NSCameraUsageDescription` entry in your Info.plist with a text explaining why you request camera permission.
- In XCode file tree, go to Pods > Development pods > react-native-ar-viewer, right-click on "Add Files to Pods"... Then select the environment.skybox folder in your node_modules/react-native-ar-viewer/ios folder. In add file window, check "react-native-ar-viewer-ARViewerBundle". It should appear with a blue icon on the file tree. Check if res.hdr is present inside, if not, add it manually. It should look like that:
## File formats
The viewer only supports `USDZ` files for iOS and `GLB` for Android. Other formats may work, but are not officialy supported.
## Usage
You should download your model locally using for example React Native File System in order to run the viewer on iOS. Android supports natively file URL (https:// instead of file://)
```js
import { ArViewerView } from "react-native-ar-viewer";
import { Platform } from 'react-native';
// ...
console.log('started')}
onEnded={() => console.log('ended')}
onModelPlaced={() => console.log('model displayed')}
onModelRemoved={() => console.log('model not visible anymore')}
planeOrientation="both" />
```
### Props
| Prop | Type | Description | Required |
|---|---|---|---|
| `model`| `string` | Enables ambient light estimation (see below) | Yes |
| `lightEstimation`| `bool` | Enables ambient light estimation (see below) | No |
| `manageDepth` | `bool` | Enables depth estimation and occlusion (only iOS, see below) | No |
| `allowRotate` | `bool` | Allows to rotate model | No |
| `allowScale` | `bool` | Allows to scale model | No |
| `allowTranslate` | `bool` | Allows to translate model | No |
| `disableInstructions` | `bool` | Disables instructions view | No |
| `disableInstantPlacement` | `bool` | Disables placement on load | No |
| `planeOrientation` | `"horizontal"`, `"vertical"`, `"both"` or `"none"` | Sets plane orientation (default: `both`) | No |
#### lightEstimation:
| With | Without |
|---|---|
|||
#### manageDepth:
| With | Without |
|---|---|
|||
#### Others:
| allowRotate | allowScale | planeOrientation: both |
|---|---|---|
||||
### Events
| Prop | Parameter | Description |
|---|---|---|
| `onStarted` | `none` | Triggers on AR session started |
| `onEnded` | `none` | Triggers on AR session ended |
| `onModelPlaced` | `none` | Triggers when model is placed |
| `onModelRemoved` | `none` | Triggers when model is removed |
| `onError` | `{ message: string }` | Triggers on any error and returns an object containing the error message |
### Commands
Commands are sent using refs like the following example:
```js
// ...
const ref = React.useRef() as React.MutableRefObject;
const reset = () => {
ref.current?.reset();
};
return (
);
// ...
```
| Command | Args | Return | Description |
|---|---|---|---|
| `reset()` | `none` | `void` | Removes model from plane |
| `rotate()` | `x, y, z` | `void` | Manually rotates the model using `yaw as x`, `pitch as y` and `roll as z` in degrees |
| `takeScreenshot()` | `none` | `Promise` | Takes a screenshot of the current view (camera + model) and returns a base64 jpeg string as a promise |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
近期下载者：
相关文件：
收藏者：