This seems simple at the very basic
AR.js is the perfect library to get started with Augmented Reality (AR) on the browser.
Its integration with A-Frame is what makes it extremely simple to integrate into any AR project.
We will be able to load below formats in AR
glTF 2.0 and glTF
OBJ
COLLADA (DAE)
PLY
JSON
FBX
glTF, OBJ and COLLADA are already supported on A-Frame and have good documentation available on the A-Frame docs.
To include the other model formats, Don McCurdy built aframe-extras ( providing a whole lot of other A-Frame components of which model loaders is one) which allows you to include the other formats such as PLY, JSON, FBX and three.js.
Creating the Base
We first include the latest A-Frame build that we will be using in our project.
<script src=”https://aframe.io/releases/0.6.1/aframe.min.js"></script>
Continue by includling AR.js which will make our a-frame project AR enabled.
<script src=”https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
We then define the body
<body style=’margin : 0px; overflow: hidden;’>
</body>
Once the body is defined, we create an a-frame scene and define that we would like to use arjs to create an AR scene.
<a-scene embedded arjs=’sourceType: webcam;’>
</a-scene>
We then add a camera to the a-scene we just created. The project which we are working on will let us use multiple markers but if you would like to use just one, use the <a-marker-camera> tag instead.
<a-entity camera></a-entity>
Finally, we add a marker to the scene so that camera displays the 3D model when the marker is in focus.
<a-marker preset=’hiro’>
</a-marker>
Combining all steps, it should look like this below like what you see below.
<script src=”https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src=”https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style=’margin : 0px; overflow: hidden;’>
<a-scene embedded arjs=’sourceType: webcam;’>
<a-marker preset=’hiro’>
</a-marker>
<a-entity camera>
</a-entity>
</a-scene>
</body>
Now below is how we can include various models
Below is how to include Obj models
<a-entity
obj-model=”obj: url(/path/to/nameOfFile.obj);
mtl: url(/path/to/nameOfFile.mtl)”>
</a-entity>
Below is how to include glTF 2.0 and glTF Models
<a-entity
gltf-model=”url(/path/to/nameOfFile.gltf)”>
</a-entity>
To include glTF 2.0 models need to include extra loaders
<script src=”https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<a-entity
gltf-model-next=”src: url(/path/to/nameOfFile.gltf);” >
</a-entity>
References:
https://medium.com/@akashkuttappa/using-3d-models-with-ar-js-and-a-frame-84d462efe498
ReplyDeleteI'm unable to add OBJ files to AR. Js scene.
If i use this code :-
"Shows in white colour, not accepting the code"
Please kindly help me out