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.
Related
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!
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
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>```
Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?
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