Search results for ""

Canvas Setup

Canvas Setup The first step when developing a React Three Fibre UAR project is replace any existing Canvas you have in your scene with the ZapparCanvas. import { ZapparCanvas } from "@zappar/zappar-react-three-fiber"; You can set up the canvas, as shown below. // ... return ( <ZapparCanvas>{/** YOUR CONTENT HERE **/}</ZapparCanvas> …...

Compatibility

Compatibility This Zappar platform and Universal AR SDKs work well on the browsers that enjoy the vast majority of mobile market-share. That said, there are a number of web browsers available across the mobile and desktop device landscape. Supported Browsers Best Safari for iOS (version 11.3 and later) Chrome for …...

Installation

Installation You can use this library by downloading a standalone zip containing the necessary files or by installing from NPM for use in a webpack project. You can find the respective download links here. NPM Webpack Module Run the following NPM command inside your project directory: $ npm install --save …...

Loading UI

Loading UI For your convenience, this package includes a Loader component that you can use to display a progress bar while your experience loads (should you wish to). It takes over the global instance of Three's LoadingManager. The <Loader /> is used by adding it to the canvas like this: …...

Usage

Usage You can integrate the Zappar library with an existing React Three Fiber app. A typical project may look like this: import { render } from 'react-dom'; import React, { useRef } from 'react'; import { ZapparCamera, ImageTracker, ZapparCanvas } from '@zappar/zappar-react-three-fiber'; export default function App() { // Setup a …...

zapcode branded_zapcode i