Testing A Frame for use with augmented reality (AR)
I have read through documentation and tested a small a-box which displays fine on top of the marker, but when I add a gltf model it wont load, I have tried the model on an online gltf viewer and it works fine, but it wont work on A Frame code?
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script
src="https://unpkg.com/aframe-physics-system#^1.4.x/dist/aframe-physics-system.min.js"
data-component-description="Physics system for A-Frame VR, built on Cannon.js"
data-component-names="dynamic-body,static-body,constraint"
data-component-url="https://npmjs.com/package/aframe-physics-system"
data-package-name="aframe-physics-system"
></script>
</head>
<!-- https://cdn.glitch.global/40131ca8-3d08-4bae-ad16-b96766757df7/kit.gltf?v=1668698450644 -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<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" src="https://cdn.glitch.me/c7d0d4e9-d04a-4e56-989f-c554ae50c253%2Fwindmilmaster4.gltf"></a-asset-item>
</a-assets>
<!-- create your content here. just a box for now -->
<a-entity>
<a-box position="0 0 -2" material="opacity: 1;"></a-box>
<a-entity gltf-model="##tree" scale=".02 .02 .02"></a-entity>
</a-entity>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
</html>
I would love to hear your thoughts
Apologies after some time I have noticed some of the script werent upto date and more importantly were not inside of the
Related
The following is the code from the example posed on the aframe blog. The result shows the camera image only; no box and no model:
not sure what to expect. The model is there and js libraries are there.
Should I see the box and model somewhere in my camera image?
<!DOCTYPE html>
<html>
<head>
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style=’margin : 0px; overflow: hidden;’>
<a-scene
embedded arjs=’sourceType: webcam;’>
<!-- create your content here. just a box for now -->
<a-box position='0 0.5 0' material='opacity: 1 scale = "2 2 2" color="red";'
>
</a-box>
<!-- define a camera which will move according to the marker position -->
<a-entity camera
>
</a-entity>
<a-marker preset=’hiro’>
</a-marker>
<a-collada-model
id = "titlexx1b"
src="models/man_default.dae" position = "1 1 1"
scale = "1 1 1"
>
</a-collada-model>
</a-scene>
</body>
</html>
You should add the box and the model to the markers you want to put them on. In this case the hiro marker. Usually, it's not recommended to put more than one object on a single marker.
Another thing is, I'm not sure that DAE files are supported by A-frame / AR.js. Consider using a supported format.
I have started to look at Aframe to create a web based AR project but am not sure what I am doing. My goal is to be able to spawn a 3D model in AR and make the model clickable or tap to open a hyperlink to a website. Currently my code looks like this:
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs cursor="rayorigin: mouse" raycaster="objects: #engine">
<!-- Grab models from here: https://github.com/KhronosGroup/glTF-Sample-Models -->
<a-asset-item id="engine" src="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/2CylinderEngine/glTF/2CylinderEngine.gltf"></a-asset-item>
<!-- add the model -->
<a-entity gltf-model="#engine" position="0 0 0" scale="0.001 0.001 0.001" startEvents: "clicked"></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
<script>
var toggleEl = document.querySelector('#engine')
toggleEl.addEventListener('click', function (evt){
toggleEl.emit("clicked");
});
</script>
</body>
</html>
For now it is just a simple 'point camera at a marker, spawn a 3D model from a github repo, be able to click/tap on the model to open a hyperlink to a website' project but I am unable to get it to work.
What I am doing wrong? I thank you for any help that can be given.
This isn't possible at present, there's no hit detection within webXR yet and regular user DOM events are disabled
https://aframe.io/blog/webxr-ar-module/
i want to try processing.js on an iOS application,
i have checked the projects on
http://procoding.audiocommander.de/ and
http://luckybite.com/iprocessing/
but none of them have an actual working example, so i went to create one...
SO... I have created a project and uploaded in
https://github.com/mako34/processing_iOS
my understanding is that all I need is just a wrapper for html5 canvas and js, for the
processing-1.4.1.js
to work??
my index.html works fine in a browser, not on the device!
my canvas works fine drawing a line on this test template
my js works fine on this test template
but doesnt work on the iphone actual web view,
So what is missing to make the sketch work?
thanks a lot!
here my index.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.6.2.min.js"></script>
<script defer src="script.js"></script>
<script src="processing-1.4.1.js"></script>
</head>
<body id="body">
<div id="container">
<div id="main" role="main">
jQuery Alert<br />
Objective-C Alert<br />
Take a picture<br />
</div><!-- #main -->
<canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
<img id="testImage" src="iphonebattery.jpeg" />
<canvas id="myCanvas" width="320" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</div><!-- #container -->
</body>
</html>
First off-- you don't want to have two canvas tags. I recommend checking out the actual ProcessingJS website for better implementation: http://processingjs.org/
I have some tutorials on setting up Processing to compile to iOS and preparing your iDevice:
http://ericmedine.com/processing-for-ios/
Hope this helps!
As part of my first PhoneGap app, I need to load up an OpenLayers map (ultimately using my own local custom tiles, but for the moment, I'm just testing with online ones, modding the standard OpenLayers examples).
But when I try to initialise the map in the iOS simulator, the tiles don't want to load, using either OpenStreetMap or alternatives. The map initialisation gets as far as placing the controls, and the copyright notice, but I keep getting the blue question-mark boxes instead of live tiles. Testing the map-loading code independently in a browser, it seems to function properly if I remove the jQuery Mobile references, but that doesn't seem to work if I tweak the file in Xcode, and besides that, it screws up my desired appearance and behaviour. Is this a known conflict and does anyone know a way around it?
Thanks in advance!
Giles
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobilecus-1.1.0.min.css"/>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<script src="js/sessionstorage.1.4.js"></script>
<script src="js/OpenLayers.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() { //ready
// JQuery stuff trimmed out
}); //end ready
var map
function init() {
map = new OpenLayers.Map("mapview");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat( 0.0 ,51.0).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection);
var zoom=10;
map.setCenter (lonLat, zoom);
}
</script>
</head>
<body onload="init();">
<div data-role="page" id="page1" class="page">
//html for first page (no map)
</div><!-- /page -->
<div data-role="page" id="page2" class="page">
<div data-role="header" data-id="fixedheader" data-position="fixed" >
<h1>Fixed header</h1>
</div><!-- /header -->
<div data-role="content">
<div id="leftbar">
<img src="images/leftbar.png">
</div><!-- /leftbar -->
<div id="mapview">
//map appears here
</div><!-- /mapview -->
</div><!-- /content -->
<div data-role="footer"data-id="fixedfooter" data-position="fixed">
<a id="ForwardButton">Forward</a><a id = "BackButton" href="#page2">Back</a>
</div><!--/footer -->
</div><!-- /page -->
</body>
</html>
Sorry - forget I spoke! Just discovered that I needed to add a reference to the map server domain to the "ExternalHosts" in Cordova.plist. Now the images seem to be loading okay.
I am building a web application using Grails. I decided to use dojo and I added a dojo fisheye menu for begining in the main.gsp so it would be available on all the application's pages.
It works fine for the (home) index.gsp page, but once I select another one, the fisheye menu disapears. If I go back to home it is there. I revised my settings and everything looks ok to me. I am not using anything fancy, just simple things. I am missing something but not able to figure it out.
here is the code in my main.gsp simplified for clarity:
<html>
<head>
...
<g:layoutHead />
<!-- use dojo library ... this has not effect at all -->
<g:javascript library="dojotk"/>
<!-- Load Dojo -->
<script type="text/javascript" src="js/dojotk/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false"></script>
<!-- need fisheye -->
<g:javascript type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
</g:javascript>
<!-- required css for dojo fisheye -->
<style type="text/css">#import "js/dojotk/dojox/widget/FisheyeList/FisheyeList.css";</style>
</head>
<body >
...
<!-- fisheye bar -->
<div id="fisheyebar"><g:render template="/common/fisheyebar"/></div>
<g:layoutBody />
</body>
And here is the _fisheyebar.gsp
<g:javascript>
function load_app(target){
window.location.href=target
}
</g:javascript>
<center >
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
>
<div dojoType="dojox.widget.FisheyeListItem"
onClick= "load_app('${createLinkTo(dir:'/something')}');"
iconsrc="images/icon_something.png" caption="Web Browser">
</div>
.....
</div>
</div> <!-- outbar -->
</center>
All the pages including the index.gsp have the following:
<head>
<title>some titel</title>
<meta name="layout" content="main" />
</head>
Please not that the usage of template (_fisheyebar) is not the cause, I put the code directly in the main and had the same effect. So what am I missing?
it is in the relative url to dojo's location. it is relative to the root so that's why the index works and not the other pages.
using absolute URLs fixes the problem.
Did you try to move your dojo declaration and imports to your layout template page instead of putting it in your main.gsp ?