Demo that loads 3D models and detects planes using ThreeJS, WebXR, and echo3D.
Don't have an API key? Make sure to register for FREE at echo3D.
Watch on Youtube here.
- Add 3D models to the echo3D console.
- Download LoadModels.html, query-3.5.1.js, and three into the same directory.
- Host that directory on a local server.
- Open LoadModels.html, enter your echo3D API Key, and press
Load Models. - Modify the metadata with 'x' and 'scale'. You can modify it however else you like.
- To refer to models in the scene programmatically, use
models.get(id).hologram, where id is the Entry ID in the echo3D console.
- IMPORTANT: WebXR does not run on iPhones, so you must download Mozilla's WebXR Viewer to run any AR pages.
- We use ngrok to connect our local dev environment to mobile.
- Add 3D models to the echo3D console.
- Download HitTest.html, query-3.5.1.js, and three into the same directory.
- Host that directory on a local server. We used VSCode.
- Open HitTest.html on your device and enter your echo3D API Key (it is case sensitive). Press
Start AR. - Move your camera to a flat surface until the white ring appears, and tap on the screen to download and place the models.
- Modify the metadata with 'x' at 100 and 'scale' at 2. You can modify the values and add whatever metadata you like.
- To refer to models in the scene programmatically, use
models.get(id).hologram, where id is the Entry ID in the echo3D console.
Refer to our documentation to learn more about how to use echo3D.
Feel free to reach out at support@echo3D.com or join our support channel on Slack.
