or with email / password
10th June 2018
(updated screenshots on 23/04/2020)
Here’s a simple tutorial on how to publish a 3D model in augmented reality on the web ( aka webAR ).
Let’s go through the various steps on the xr.plus platform…
If you don’t have yet an xr.plus account, create one ( the basic plan is free )
Click here to create a free account
Create a new scene an import a 3d model from your hard drive. Supported formats are .obj, .fbx and .glb (gltf).
For this tutorial, I’m using a Bonsai tree available here (download the fbx version).
This model was made by Scopia Visual Interfaces Systems, s.l. and Eteks,
available under the Creative Commons license ( https://resources.blogscopia.com/license-2/ ).
Is it also possible to make a scene from images, but I’ll only cover the 3D model process in this tutorial.
If the imported model includes materials, you will be asked if you wish to import them.
For this model I’m choosing ‘yes’, so materials will be automatically assigned to the meshes.
This is the model view:
– on the left column you can see your model and edit its transformation values ( position, rotation and scale).
– the middle column is the list of all materials used on the scene.
– the right hand side column displays the list of meshes from the model and settings for lights & environment.
The top material is used on the tree pot, I’m choosing a dark gray for its color
Adding the texture for the trunk ( included with the model zip file), on the ‘bark’ material
Adding textures for the soil and leaves. I’m turning on transparency for the leaves texture as the .png image contains an alpha channel.
Some extra material adjustments to darken a bit more the pot and the trunk ( changing the default white color of a material to a darker color will also affect the texture ), and lowering the shininess of the trunk.
Almost done, now in the ‘publish‘ tab, set a name for your scene, then press the green ‘publish’ button.
On the left column, you can see the public link to you scene, in this case: https://xr.plus/6ht
Voilà! The scene is published and available to everyone.
Our default augmented reality image marker can be found on the homepage: http://xr.plus
To view the scene from this tutorial, visit https://xr.plus/6ht on your phone browser ( Safari, Chrome of Firefox)