How do I scale down 360 image using aframe? - aframe

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/

Related

GLTF doesn't render, stuck in blue loading screen

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.

CSS Media Query and Mobile

I'm trying to make different dimension of one modal.
If I resize in the Browser the change is what I want.
But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.
I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.
I would like to know why my "default" case is not working for mobile.
The code can be found here.
Try adding viewport meta tag in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>

GLTF not displaying using ar.js

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.

Lights are not working with .gltf model in A-frame 0.9 (works in 0.8)

I'm importing a .gltf model of a gallery and add ambient and directional lights (tried all types). Everything works as expected in 0.8.0; however, when using version 0.9.0 the interior of the model appears dark and no lights can affect it. I have to use A-frame 0.9.0 because of the added support for Oculus Go controller.
I've been trying to figure this out all morning and still can't seem to find what the issue could be.
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- Changing the version to 0.8.0 eliminates the problem -->
<script src="https://unpkg.com/aframe-environment-component#1.1.0/dist/aframe-environment-component.min.js"></script>
<!--script src="https://dist.3d.io/3dio-js/1.2.x/3dio.min.js"></script-->
</head>
<body>
<a-scene light="defaultLightsEnabled: false">
<a-assets>
<a-asset-item id="room" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2Fscene.gltf?1555958013685"></a-asset-item>
<a-asset-item id="gallery" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2FGallery.fbx?1555957411386"></a-asset-item>
<a-img id="sky" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2F47096473752_0baa631c08_o.jpg?1555959294746"></a-img>
</a-assets>
<a-entity position="0 -0.1 0" rotation="90 0 0" scale="50 50 1" geometry="primitive:plane"></a-entity>
<a-entity gltf-model="#room" scale="0.01 0.01 0.01" position="0 0.01" shadow="cast:true; receive:true;">
</a-entity>
<a-entity position="0.59272 4.10082 -0.40143" light="intensity:5;type:hemisphere"></a-entity>
<a-entity position="0 1.15538 -3.77451" light="intensity:3"></a-entity>
<a-sky src="#sky"></a-sky>
</a-scene>
</body>
</html>
This model uses the KHR_materials_unlit glTF extension, which causes it to be unaffected by lighting. Unlit – or shadeless – materials are used for better performance on mobile, and some stylized effects.
Opening the same model in other viewers you'll see the same result:
https://gltf-viewer.donmccurdy.com/#model=https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e/scene.gltf?1555958013685
^Click the info button in the lower left to see a list of extensions used by the model.
I think maybe A-Frame 0.8.0 didn't yet support this extension?

A-Frame WebVR - Device Orientation breaks

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/

Resources