I know I should have limited expectations towards gearVr, as documented here, but i need to make a site specifically for it.
Although primitives textured with images work like a charm, when i add a plane with a video texture, the lighting goes off on one eye, moreover playing the video on fusing is not working whatsoever. Here's the most simplified version of my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/aframevr/aframe/d47ce98/dist/aframe-master.min.js"></script>
<script>
AFRAME.registerComponent('vidtest', {
init: function() {
this.el.addEventListener('click',function(){
document.querySelector('#vid').load();
document.querySelector('#vid').play();
});
}
});
</script>
</head>
<body>
<a-scene>
<a-assets>
<video id="vid" src="tlo1.mp4" autoplay="false" crossorigin playsinline webkit-playsinline>
</a-assets>
<a-plane vidtest position="0 1 -2" material="src:#vid"></a-plane>
<a-camera>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-camera>
</a-scene>
</body>
</html>
Its live here.
I think it's ok, given the fact it works on android firefox, and on desktop chrome/firefox. Though it seems to have issues on android-chrome.
Btw I can make my site work on gear ONLY on the master build, earlier builds won't even let me enter vr-mode.
Anyone had these issues ? I tried adding gear controls there, internet://webvr-enable seem to do nothing. Can i open chrome or firefox on the gearVr ?
Related
In Official documentation there's a program in which they mentioned reference of Don McCurdy’s aframe-extras to get for Aframe 1.2.0. But when I am running the program using CDN of production link. It never works. And I receive the following error as well.
My code is :
<!
DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<title>Proyectos</title>
</head>
<body>
<a-scene physics>
<script>
AFRAME.registerPrimitive('a-ocean', {
// Attaches the `ocean` component by default.
// Defaults the ocean to be parallel to the ground.
defaultComponents: {
ocean: {},
rotation: {x: -90, y: 0, z: 0}
},
// Maps HTML attributes to the `ocean` component's properties.
mappings: {
width: 'ocean.width',
depth: 'ocean.depth',
density: 'ocean.density',
color: 'ocean.color',
opacity: 'ocean.opacity'
}
});
</script>
<a-ocean color="aqua" depth="100" width="100"></a-ocean>
</a-scene>
</body>
</html>
a-ocean is defined in a-frame extras, so there is no need for you to define it again, you should be able to just use it. That explains the first error ("a-ocean is already registered").
Unfortunately is written using the THREE.js Geometry component, which was deprecated in THREE.js r125.
That corresponds to A-Frame 1.2.0.
This explains the second error ("mergeVertices is not a function").
So (until someone updates a-ocean) you have to use A-Frame 1.1.0 or earlier if you want to use a-ocean.
This code will give you a basic ocean
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<title>Proyectos</title>
</head>
<body>
<a-scene physics>
<a-ocean color="aqua" depth="100" width="100"></a-ocean>
</a-scene>
</body>
</html>
In terms of getting a-ocean fixed, it looks like there has been some work on this:
https://github.com/n5ro/aframe-extras/issues/362
That issue includes sample code for a fix, but nobody has made it into a PR yet...
I'm unable to see any reflexion on my gtLF model using "cube-env-map".
I'd like to get something like this :
helmet from threejs.org examples
I don't know if this is because of the .jpg files I use, or html or linked javascript scripts, or... anything else?
Here's my html :
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- webcam/mobilecam -->
<script src="https://mkwy.fr/js/play-all-model-animations.js"></script><!-- animation -->
<script src="https://mkwy.fr/js/aframe-orbit-controls.min.js"></script><!-- orbit cam around target -->
<script src="https://mkwy.fr/js/aframe-extras.js"></script><!-- cub-env-map -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" embedded>
<a-assets>
<a-asset-item id="toy" src="https://mkwy.fr/assets/toyDrummerSolo.glb"></a-asset-item>
</a-assets>
<a-entity
gltf-model="#toy"
cube-env-map="path: https://mkwy.fr/assets/cube-env/; extension: jpg; reflectivity: 0.9;"
play-all-model-animations >
</a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
</a-scene>
</body>
</html>
Many thanks in advance for your help,
(Assuming there are no console errors suggesting incorrect cubemap paths, or wrong extensions)
If your model looks like this:
And you want it to be more like this:
Then the answer lies in two factors - metalness, and roughness.
roughness determines whether the material is like a mirror (0), or completely diffuses the reflection (1).
metalness determines whether the material is metallic (1), or not (0).
You can deal with this in at least two ways:
Modify the materials in a modelling software like blender, or maya.
Modify the properties within an a-frame custom component.
A component would have to wait until the model is loaded, and change all (or some selected) model nodes. Like this:
AFRAME.registerComponent("foo", {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
// grab the mesh
let mesh = this.el.getObject3D("mesh");
mesh.traverse(node => {
// ignore nodes without materials
if (!node.material) return;
// assign the values.
node.material.metalness = 1;
node.material.roughness = 0;
})
})
}
})
You can check it out in this example.
The helmet is working with both jpg and png maps. As for arjs, if your model will be glitchy, and you'll experience z-fighting, just set the logarithmicDepthBuffer in the renderer:
<a-scene renderer="logarithmicDepthBuffer: true" embedded arjs>
Example here
.Seems to be working as expected:
Ok, I changed the settings in Blender, adding metalness, and now it works like a charm. It was confusing because in Blender you don't need to set metalness to get reflection (i.e. : a plastic bottle may have reflections). I have to play with these parameters. Many thanks!
I'm using A-frame 0.8.2 and don't get behaviour I expect. When I change the source of my asset, it will not refresh on things that use this source. For example:
<a-scene>
<a-assets>
<img id="myPicture" src="myPicture.jpg">
<a-assets>
<a-sky id="sky" src="#myPicture"></a-sky>
</a-scene>
JS: $("#sky")[0].setAttribute("src", "myPicture2.jpg");
Now, my a-sky still shows "myPicture", even though the inspector shows myPicture2. Any ideas how to work around this? In my application I wish not to change the id of the asset.
I recommend having two different img's and change the src on the entity:
<a-scene>
<a-assets>
<img id="myPicture" src="myPicture.jpg">
<img id="myPicture2" src="myPicture2.jpg">
<a-assets>
<a-sky src="#myPicture"></a-sky>
</a-scene>
JS: $("a-sky")[0].setAttribute("src", "#myPicture2");
What I did was:
Remove the src from Sky
jQuery(scene).find('#' + skyId ).attr('src','');
Update the material
jQuery(scene).find('#' + Img360assetId).attr('src',url);
Setting the id again
jQuery(scene).find('#' skyId).attr('src', '#' + Img360assetId);
I am using jade (pug) to dynamically create the required HTML pages. This includes creating of the aframe tags. When using kframe template components I am getting an error.
a-scene(embedded)
a-assets
script#boxesTemplate(type='text/x-jade-template')
a-box(color="${color1}")
a-entity(template='src: #boxesTemplate;', data-color1="blue", position="1 0 1")
a-entity(template='src: #boxesTemplate;', data-color1="red", position="3 0 2")
The generated HTML tags look OK. However, the javascript console shows:
THREE.Color: Unknown color ${color1}
Any ideas why this occurs?. Thanks.
Raj
It's not exactly what you like, but this 2 examples work for me:
a-assets
script#boxesTemplate1(type="text/x-html-template").
<a-box color="${box}" position="-1 0 -5"></a-box>
script#boxesTemplate2(type="text/x-nunjucks-template").
<a-box color="{{box}}" position="1 0 -5"></a-box>
a-entity(template="src: #boxesTemplate1" data-box="red")
a-entity(template="src: #boxesTemplate2" data-box="blue")
Maybe the type attribute of the template define the syntax of 'vars'. Maybe text/x-jade-template conflicts with the entire file.
Also, in a html file (not jade file) this works:
<a-scene>
<script id="boxesTemplate3" type="text/x-jade-template">
a-box(color="#{box}" position="0 1 -5")
</script>
</a-assets>
<a-entity template="src: #boxesTemplate3" data-box="green"></a-entity>
¡saludos!
I've written an R script to create a KML file and the resultant KML below loads icon18.png fine when viewed in Google Earth:
<kml xmlns:xsd="http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd" xmlns:xmlns="http://www.opengis.net/kml/2.2/" version="1.0">
<Document>
<name>Member locations</name>
<open>1</open>
<Folder>
<name>SpatialPointsDataFrame</name>
<Style id="pnt1">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal2/icon18.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>1</name>
<styleUrl>#pnt1</styleUrl>
<Point>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>151.26250,-33.89374,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>
However when loaded into a KmlLayer using the maps API and the following code it displays as the default blue 'teardrop' marker:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://www.peter-johnson.com.au/test.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Looking at other questions here I could only see ones posted without code that went unanswered or some related to the web server not being publically available.
A few indiciated there problem was now OK so I guess loading custom icons into a KmlLayer is supported but I have some problem with the KML format or the way I'm loading it?
As suggested in a comment I've just placed the KML in a publically available area here:
http://www.peter-johnson.com.au/test.kml
And here is the HTML:
http://www.peter-johnson.com.au/test.htm
The KML you have posted doesn't work with either Google Maps or KmlLayer even after I make it validate
Your KML on Google Maps - Blue default marker
Your KML on Google Maps API v3 map - Blue default marker
For what it is worth, it does work with geoxml3
Your version does have an invalid schema (at least according to feedvalidator)
UPDATE:
The problem is with the location of the definition of the shared styles.
This works and on Google Maps
The Style definition didn't work where you had it. Shared styles look like they have to be in a Document.