When viewing this Codepen Demo on a device on portrait, it works as expected. When veiwing with device orientation lock off and turning to landscape, it fills half the screen.
CODE
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="https://ucarecdn.com/e1c757bc-73ee-4efe-b068-4f778ce212a3/" rotation="0 -20 0"></a-sky>
</a-scene>
</body>
</html>
I've tried this meta tag with no success:
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
HERE"S MY PEN
Codepen Code
Have you tried with the latest version of a-frame by chance?
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
A quick test appears to work on my phone in both landscape and portrait:
https://a-frame-device-orientation-test.glitch.me/
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.
So this code is directly from aframe 360 image source code. When I run this code, it is in full screen. I was wondering if there is a way to scale this image down, so that I can fit multiple images on a webpage. Thank you!
<head>
<meta charset="utf-8">
<title>360° Image</title>
<meta name="description" content="360° Image - A-Frame">
<script src="assets/js/aframe-master.js"></script>
<a-scene>
<a-sky src="assets/images/123.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
You cannot have more than one sky object visible at the same time. It is not entirely clear from your question what you really want. Multiple rectangular images floating around you? Check out the ideaspace vr blog
https://www.ideaspacevr.org/theme-preview/ideaspace-compass-blog
https://www.ideaspacevr.org/
I am really new to A-Frame and try to display an image. I got this done with version 2 from a youtube tutorial, but when I change the version to 3 or higher (I always need to use the most recent version, currently 8) it is not displaying anymore, but seems loaded.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="image" src="winterOriginal.jpg">
</a-assets>
<a-image src="#image" width="16" height="9"></a-image>
</a-scene>
</body>
</html>
You need to set the crossorigin attribute for the img resource:
<img id="image" src="image.jpg" crossorigin="anonymous">
to satisfy the CORS policy.
0.2.0 fiddle,
8.2.0 fiddle.
I'm trying to use the AngularJS ngDialog add-on to make a simple pop-up dialog. It basically works, but when the dialog appears, it starts out white but then quickly fades into the dark background. I assume there's some CSS conflict, but I can reproduce the problem with a very simple bit of HTML, below. Thanks in advance for any suggestions.
<html>
<head>
<title>Dialog Test</title>
<link href='/assets/ngDialog/css/ngDialog.css' rel='stylesheet'>
<script src='/assets/angularjs/angular.js'></script>
<script src='/assets/ngDialog/js/ngDialog.js'></script>
<script>
angular.module('dialogTest', ['ngDialog']);
</script>
</head>
<body ng-app='dialogTest'>
<button ng-dialog='MY_DIALOG.html'>
Dialog...
</button>
</body>
</html>
I figured it out (my original problem, not plunker): I also need to include ngDialog's ngDialog-theme-default.css. Thanks for looking at this.