I'm trying to make a simple arjs application based on the tutorials on the website, specifically this one
I've been able to successfully swap out other gltf models for new codes, but whenever I try to use my own models they do not display in the application.
I've tested my model in the viewer at https://gltf-viewer.donmccurdy.com/ and it shows up fine.
My code is below.
<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf"></a-asset-item>
<a-asset-item id="bimmer" src="https://raw.githubusercontent.com/jaggre/consortium/master/compresso.gltf"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='2'>
<a-entity
animation-mixer
gltf-model="#bimmer"
scale="4 4 4">
</a-marker>
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
animation-mixer
gltf-model="#animated-asset"
scale="2 2 2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
Check in your console for any Cross origin Resource Sharing errors - sometimes if your website is hosted via http or set up differently it doesn't work. see https://aframe.io/docs/1.0.0/core/asset-management-system.html#cross-origin-resource-sharing-cors and https://aframe.io/docs/1.0.0/introduction/installation.html#use-a-local-server . If you just use the file:// protocol as you are testing it may not work.
Other things you could try is moving the model's a-entity tag outside of the marker tag to see if the marker class is having an effect on it. perhaps check the A-frame inspector (Ctrl Alt I) and poke around if it's just displaying in the wrong place.
Update: gltf2.0 not showing in ar.js project seems like a similar question. Perhaps try it's answers too.
Related
I just started with ar.js for my presentation and got in problem with one of my model loading, I can see only cube on my screen.
While with other model it is actually there( second code ).
Tried with different scale factors and all is the same, different model and its ok.
Model that Im tring to get is loading normal on computer program that opens .obj could size of model be problem, .obj is around 35Mb.
<script src="https://aframe.io/releases/0.6.0/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>
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/ar.js/master/namtalica2.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/ar.js/master/namtalica2.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"
<a-entity scale="0.01 0.01 0.01"></a-entity>
></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
<a-marker type='pattern' url='http://examples.org/hiro.patt'></a-marker>
</a-scene>
</body>
Code that works is with
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/kanu/master/rezac2.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/kanu/master/rezac2.mtl"></a-asset-item>
</a-assets>
models load much more reliably as .gltf format.
download the obj model and convert it to gltf format.
There are many converters online. Here is one:
https://www.khronos.org/news/permalink/new-drag-and-drop-to-convert-obj-models-to-gltf
place the gltf file on your server and use that url in your a-assets file.
Your original obj file looks like it might be inside of a js file.
Kanu-1988/ar.js/master/namtalica2.obj
ar.js could be a bad file path that is being parsed as a js file.
Thanks guys for the reply, managed to "get" model, it was off center so it was outside camera range, scale it a bit more in blender and now is in range, have to centered it a bit more and planning to add rotate and zoom function.
this is how it looks now
Here is current code:
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/T2/master/u5.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/T2/master/u5.mtl"></a-asset-item>
How can I add a dynamic background visual for <a-sky> object?
Especially I want to add a 3d map view to object.
I try assets manager with image object:
<!-- <a-assets>
<img id="sky"/>
</a-assets>
<a-sky src="#sky"></a-sky> -->
However it shows a black screen. It probably because <img /> element only accepts 2d images/resources.
Many thanks...
Don't need to use <a-assets> and <img> if it's dynamic. Just set the src.
document.querySelector('a-sky').setAttribute('src', 'img.png');
I am using the Samsung Internet Browser in GearVR with webVR enabled. I have taken the code for the "two boxes, one in each eye" example directly from the github source. It should show one box in each eye. But no matter what I have tried I get both boxes in each eye or something worse. Nothing I have tried produces the correct result.
My ultimate goal is to use webVR to play 360 3D videos (from VUZE) in stereo in webVR. But I cannot get even this simple stereo app to work. Any suggestions for the best way to get stereo VR to work in an HMD, especially GearVR would be greatly appreciated.
The source is the two boxes example from https://github.com/oscarmarinmiro/aframe-stereo-component
the code is:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#FFF"></a-sky>
<a-light color="#333" position="0 5 0" type="ambient" intensity="0.2"></a-light>
<a-light type="point" color="#EEE" intensity="1.0" position="3 3 10"></a-light>
<!-- 'left' eye entities will pass trough the camera in non-VR mode -->
<a-camera position="0 0 10" cursor-color="black" stereocam="eye:left;"></a-camera>
<!-- in VR mode, the first box is displayed only in the left eye, the second one in the right eye -->
<a-entity geometry="primitive: box" material="color: #C03546" stereo="eye:left"></a-entity>
<a-entity geometry="primitive: box" material="color: #3546C0" position="0 5 0" stereo="eye: right"></a-entity>
"</a-scene>
</body>
</html>
I can"t get the Samsung VR browser to work correctly for any example, not even Samsung's.
I use the Oculus Carmel browser for all WebVR on Gear VR.
The code showed above comes from the documentation at https://github.com/oscarmarinmiro/aframe-stereo-component.
A working example is at http://oscarmarinmiro.github.io/aframe-stereo-component/ .
Looking at the source code for http://oscarmarinmiro.github.io/aframe-stereo-component/two_boxes/index.html reveals that both the script lines in the head
should be replaced by the one line
<script src="../build.js"></script>.
build.js and correct versions of the index files are in the code files in https://github.com/oscarmarinmiro/aframe-stereo-component, but not in the documentation below it.
I'm creating several a-frame (version 0.60) objects in javascript dynamically, I manage to set all sorts of attributes successfully.
When it comes to a look-at attribute to set to the camera, it is ignored.
This is the markup I use:
<a-camera id="camera" camera look-controls>
<a-cursor id="cursor" color="#FF0000"></a-cursor>
</a-camera>
And the js code:
var aboxEl = document.createElement('a-box');
aboxEl.setAttribute('look-at', 'camera');
Thank you for any hint
thank to Andrew who told me to add the look-at component source.
<script src="https://rawgit.com/ngokevin/aframe-look-at-component/master/dist/aframe-look-at-component.min.js"></script>
the funny thing is that you don't have to add the look-at source when doing markup
I have the following code snippet
<a-assets>
<img id="garage_pic" src="images/labs/SFOGarage_photosphere.jpg">
</a-assets>
<a-sky id="sfogarage" src="#garage_pic" rotation="0 -130 0" visible="true"
radius="100"></a-sky>
Here in the above code, i am trying to access image inside tag through
src="#garage_pic". But i am not able to access it. my page background is still blank.
Please suggest a solution for the above. Thanks