I want to make part of our website content in virtual reality.
For example, small games
I can't figure it out yet. It's better to do it as an application for different headsets stores.
But it's much easier to add the VR button to the site itself.
How will this industry develop? Are there developers of WebVR sites? Will all devices open VR versions of sites?
Thank you .
h1{
font-family: Arial;
}
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<h1>Hello World</h1>
<a-scene>
<a-assets>
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
</a-assets>
<a-cylinder id="ground" src="#groundTexture" radius="32" height="0.1"></a-cylinder>
</a-scene>
Related
I'm trying to load a GLTF model into an A-Frame script.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="guiana" src="/assets/guiana.glb"></a-asset-item>
</a-assets>
<a-entity gltf-model="#guiana"></a-entity>
</a-scene>
</body>
</html>
In my project folder I have an assets subfolder with the guiana.glb file.
Upon dropping the index.html into Chrome I get stuck in a blue loading screen:
Any debugging tips would be appreciated! Thanks!
Turns out it is a cross-site scripting issue (which you can tell by looking at the developer tools console). One way to fix it is by uploading your .GLB file somewhere else and including the full URL in the index.html.
I'm currently testing AR.js to display 3D models in augmented reality using phones. My web coding skills are very novice so I'm pulling together different tutorials to get what I want. I believe I've just about nailed what I need to properly display a gltf file but there seems to be some small issue as the model won't display (I've confirmed that it's a valid file using a gltf viewer). The code also works fine to display a simple a-box, but falls down as soon as I comment that out and add the line for the gltf model.
Any help would be most appreciated!
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>
<a-marker preset="hiro">
<!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
<a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
You can browse the new AR.js docs there is an example with a gltf model with also an online live version.
In the example you provided you should make this change
from this:
<a-entity
gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
to:
<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>
You should add:
https://arjs-cors-proxy.herokuapp.com/
to avoid CORS issues if the resource is not in the same host.
AR.js is under a new github org https://github.com/AR-js-org all the resources (libs and docs) are here now.
I made a aframe ar. in I put a texture png.
when I use a png from some url it work some png not,
and when I try with the same png downloaded on my computer it does no work.
Exemple that don't work:
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.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>
<img id="my-texture" src="rubiscube.png">
</a-assets>
<a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
but like this it works:
<a-entity geometry="primitive: box" material="src: url(https://static.wixstatic.com/media/2cd43b_b13c89d3859a48129a434265b3ddd1a1~mv2_d_1826_1920_s_2.png)"></a-entity>
but that url of image not
https://i2.wp.com/rgvbingo.com/wp-content/uploads/2014/04/bingo-balls-hi-res.png)">
why? what is the difference betwin this 2 images or url
and why if it work inline url why not offline?
You have to serve the image through a local server like for instance http-server. Browsers don't have access to the local file system. More details on A-Frame FAQ
I have a web page that is was optimized mostly for IE and Chrome. I am trying to figure out tips on how I should display this image since it looks quite awful just sitting above the copyright on all my webpages. I am looking for any CSS tips on how I can make the highlighted portion of this web page have a more professional look to it. All suggestion are greatly appreciated!
<p class="clearfix">
This page is optimized for Internet Explorer and Chrome. To ensure accurate processing of your mail packet, please ensure JavaScript is enabled in your browser.
</p>
What I suggest doing is center the copyright info. Then create two separate CSS files. One that will be used if the user doesn't have javascript enabled and the other if they do. The text you have ("This page is optimized for..") should be in the CSS file where javascript is disabled(Also move that text to the top of the page and center it).
How do you check to see if they have javascript enabled? do this
<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>
"although the solution below works it does not validate
inside your noscript tag you can put some style tag that hides the rest of your content. "
*no script option *
<noscript>
<style type="text/css">
#content { display:none; }
</style>
no js content goes here.
</noscript>
How can I show different content when JavaScript is disabled?
This way that text won't appear for everyone, just the people who don't have javascript enabled.
I've been doing a lot of looking around into this issue. I have a project I'm working on which basically represents a tour of different locations, each of which are generated dynamically, in a Google Earth web player. The problem is that the client requires that the content of each placemark representing a location be more stylish. Of course, I quickly discovered that Google Earth maliciously scrubs all CSS that you put in the KMZ file, which is very annoying. Many online discussion talked about putting the !important keyword in the CSS declaration or to use balloon style in some funny ways to prevent this. So far, I have not found a concrete solution.
I simply want to know if there is a hack or a method for Google Earth to not simply remove all of your CSS. That can include importing or inserting CSS from an external source after the page load and/or putting in a litle jQuery if nescessary.I will provide a code template for what a typical balloon should look like. Note that this actually works in the Google Earth program, but not online.
</Placemark>
<Placemark id="placemark1">
<name>City</name>
<description>
<![CDATA[<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<link href="http://localhost/Kmz_Files/player.css>
<div class="container" >
<span class = "title">My location</span>
<hr>
<div>
<a href="http://www.google.com" target="_blank">
<img src="http://www.google.ca/images/srpr/logo3w.png" width="250" />
</a>
</div>
<hr>
<p> My description</p>
</div>
</body>
</html>]]>
</description>
<Point>
<coordinates>-45, 45</coordinates>
</Point>
</Placemark>
Looks like you're talking about the Google Earth Plugin, not the Google Earth desktop application, which does not scrub JavaScript or CSS.
Looks like you want to use getBalloonHtmlUnsafe().