Can't apply texture graphic to box in A-Frame basic scene - html

I am going through the Basic Scene demo for A-Frame.
https://aframe.io/docs/0.8.0/guides/building-a-basic-scene.html
When I get to the Applying Image Texture and Using Asset Management System parts, I cannot get the suggested texture to show up at all. It seems to block the creation of the box and subsequently the sky entity as well...just a blank white screen (maybe the box exists with a default color of white?)
My question is what sorts of settings would prevent my simple application from being able to take an image and use it in A-Frame?
I am using a local server with live-server.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>
</body>
</html>
Using Firefox Nightly for headset use
PS - I got it to work by putting the image file in the local folder, but I'd rather learn how to use the internet as an asset manager rather than having everything locally.
PPS - Thinking it may be an async problem, as in the larger files don't load fast enough before the rendering of the component, so the entity is not rendered. I am able to use smaller memory size images (like https://cdn.aframe.io/a-painter/images/floor.jpg ) with a hyperlink in the src, but seemingly not larger files
This is interesting, but putting the script at the bottom did not help me in any way. https://github.com/aframevr/aframe/issues/2058
Works with Chrome, but not with Firefox.

Looks and works fine to me. Maybe Nightly is just bunk.

Loading locally the image got the same problem (it's a Cross-Origin Resource Sharing (CORS) problem). Worked for me only by putting the image stored in the web, like the example bellow:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arms</title>
<meta name="description" content="Example - A-Frame">
<script src="aframe-master.js"></script>
</head>
<body>
<a-scene>
<a-box src="https://cdn.glitch.global/6f5f5fe8-0777-45ab-9d10-0f837c09cea0/green.png" position="0 2 -5" rotation="0 0 0" scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>
</body>
</html>```

Related

Location based AR: objects follows device as it moves

I am very new to location based Web AR and I have never done any coding before so please bare with me if I am asking something very basic.
As described in the title I was learning, following this tutorial:
https://medium.com/chialab-open-source/build-your-location-based-augmented-reality-web-app-c2442e716564
When I use the Chrome browser on my ios device, the animated object showed up on screen but it is never stable in one place. Meaning it doesn't get larger/smaller when I approach it or walk away from it. And as I point my camera away from the location where it first show up, it would disappear for a second then show up again.
I tried to diagnose if this is because my device GPS is messed up by following the first answer under this question:
location-based Ar: position is not accurate
(I would have commented below but I dont have enough reputation yet)
I got visual of the text content but the text follow my device instead of staying in its place. It is always in this location of my screen and wherever I move it is always there. this is a screenshot of what it looks like
And the code currently looks like this.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>GeoAR.js demo</title>
<script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
</script>
</head>
<body style='margin: 0; overflow: hidden;'>
<a-scene
vr-mode-ui="enabled: false"
embedded
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-text
value="This content will always face you."
look-at="[gps-camera]"
scale= "50 50 50"
gps-entity-place="latitude: 42.45112; longitude: -76.48455;"
></a-text>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
</body>
Again I apologize in advance if there is any bad practice in this post, I am very, very new to coding and this! Thank you!

Loading external .js (github) libraries in in codepen

Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.

CSS Modules Inheritance Image Height 100% Issue

For some reason, my images are being vertically distorted and I can't figure out as to why (See image below).
1
2
3
Long story short what I've done is moved all my single-page-app (SPA) app code/styles and created a server-side rendered codebase. I haven't changed any of the styles or tweaked anything, yet for some reason it's distorting. This is the working styles / code from the SPA app.
4
The only hack that seems to do much of anything is when I take out the
`height:100%;`
on the images, but this has a negative effect with filling out the images which is what I'm wanting.
5
I'm using CSS Modules and have some idea that it could be related to some inheritance issues that I'm unaware of. Thanks in advance, this bug is really been driving me crazy.
I've created a fiddle that represents the working code from the SPA. https://jsfiddle.net/0L0rdk6y/
Fixed this issue by adding
<!DOCTYPE html>
in my render method when returning server side html
Example is
return
<!DOCTYPE html>
<html>
<head>
${renderBaseMeta()}
${helmet.title.toString()}
${helmet.meta.toString()}
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="root">${content}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
;

a-entity text only showing when created by the Inspector

I've been trying to do something super simple, such as displaying some text. It was working a couple of hours back, but now it its not. This is the exact code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://aframe.io/releases/0.5.0/aframe.min.js" async></script>
<meta name="description" content="Science Labs for Homeschoolers in Virtual Reality">
</head>
<body>
<a-scene>
<a-assets>
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
</a-assets>
<a-cylinder id="ground" src="#groundTexture" radius="30" height="0.1"></a-cylinder>
<a-sky id="background" src="#skyTexture" theta-length="90" radius="30"></a-sky>
<a-entity position="0.768 1.04 -3.442" rotation="0 0 0" scale="10 10 2" visible="true" text="value:Hello Berry Berry;"></a-entity>
</a-scene>
<script type="text/javascript" src="build/client/bundle.js"></script></body>
</html>
It's just a testing project. Currently using nodejs v7.10.0 with express 4.15.3 with webpack. Using Google Chrome 58.0.3 and Edge 15.
Nothing fancy, just serving the index.html file (what you're seeing above).
No matter what, I can't see the text (Only from this file). I've also tried:
Looking around the scene.
Setting the text double sided to spot it.
Copying the exact asset from the inspector to my code.
Changing the position
Changing the text scale.
This is what's resulting:
As you can see, there's no sign of the text (when it should look big due to the scale settings).
Any ideas? Thank you very much!
Edit:
Here is with 0.5 0.5 0.5
Side note: I'm having problems uploading images to StackOverflow: http://i66.tinypic.com/a47l2b.jpg
Here's with 10 10 10:
http://i67.tinypic.com/npfd50.jpg
In addition, I can't move the a-entity "graphically" (With the red, black, yellow arrows), but I can if I change them in the properties panel.
Edit 2:
Here is a code share in Glitch:
https://glitch.com/edit/#!/nebulous-pail?path=index.html:1:0
Well. It seems that the problem, so far, was loading A-Frame asynchronously:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js" async></script>
We need to omit the "async" attribute for it to work:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
My theory would be that it is not gracefully upgrading the element after it has been loaded.
I even tried adding the text as a mixin, but it will not work unless A-Frame has been loaded first.

iframe returns homepage instead of external file

I'm trying to embed a html5 banner created in Adobe Edge, the simplest way I could think of was dumping all the code edge spits out onto the ftp and then using an iframe to point at the html file. If I do this locally on my machine it works fine, if I try it on our live site the top left corner of the website is what appears in the iframe instead of the banner. It's a Joomla 1.5 site I have no idea what would cause this as I've not used iframes before. I've edited the code so it no longer has spaces.
Here is my website: www.webchild.com.au
and here is the iframe code:
<iframe src="/stdAds/html5/bilby-test/bilby_theatrical_banner.html" width="300" height="250" frameborder="0" scrolling="no"></iframe>
The code inside the html file is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Bilby Theatrical Productions Banner</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="bilby_theatrical_banner_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-380725615 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-380725615">
</div>
</body>
</html>
Try removing the spaces out of your link. It may well be the %20's replicating the spacebar are screwing up the link. Else have you checked the html file your including is definately in the correct location on your FTP. If you just try going straight to the link ( http://www.webchild.com.au/stdAds/html5/bilby-test/Bilby%20Theatrical%20Banner.html ) you can see there is a 404 error which is probably why the top of your site is appearing - the 404 error page rather than the page