echo3D React Components
This package contains helpful React components designed to work with the echo3D platform API.
Using the package
-
Install via
npm i echo3d
: -
Importing
<model-viewer/>
:
If your framework does not utilize server side rendering: run npm i @google/model-viewer
and add import '@google/model-viewer'
to any files that utilize <Echo/>
If your framework does utilize server side rendering: Issues arise when components or pages importing model-viewer
are rendered server side. To most reliably resolve this issue for SSR apps, provide the model-viewer
via a script element in your _document
file eg:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
- (Only for typescript apps) If you do not have a
globals.d.ts
file, create one within your appsrc
folder, add the linedeclare module 'echo3d';
and save the file to resolve compiler typing errors.
<Echo/>
Model Viewer Component
This very young package currently contains only one component, a 3D model viewer built using google model-viewer. This component can be configured with an apiKey
and entryID
to stream and display models from the echo3D platform as well as a direct src
url to display local or cloud files. Common <model-viewer/>
configuration parameters are also exposed.
Required Parameters
You must provide src
or both apiKey
and entryID
.
src
: Element will make no query and pass this url directly to
apiKey
: Your echo3D project apiKey, eg some-words-1234
entryID
: The entry ID of the hologram you would like to display
Optional Parameters
className
: The CSS classes that will be applied to the element. If no classes are provided, the component will default to a 600px height viewer.
securityKey
: provide your security key if it is enabled for your project
disableZoom
: When defined, disables zoom (camera controls must be enabled)
cameraOrbit
: The starting focal point of the viewer
cameraControls
: When defined, camera controls for the viewer are disabled
autoRotate
: When defined, automatic rotation of the model is disabled
tapToCenter
: When defined, tap-to-recenter behavior is enabled
Issues?
Please email support@echo3d.co if you experience any issues using this package.