I'm trying to load a gltf model to an a-frame , but it isn't loading. Here's the code:
<html>
<head>
<title>Tree model</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets id="#tree" src="tree-assets/tree01.gltf">
</a-assets>
<a-entity gltf-model="#tree"></a-entity>
</a-scene>
</body>
</html>
When you give an item an id you don't need to give it a hash tag. Also, try giving the model a position, they default to position 0 0 0, which sometimes you're unable to see as its inside of the camera. Also try using the latest version of A-frame
Try this:
<html>
<head>
<title>Tree model</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets id="tree" src="tree-assets/tree01.gltf"></a-assets>
<a-entity gltf-model="#tree" position="0 2 -2"></a-entity>
</a-scene>
</body>
</html>
Hope this helped :)
Related
i´m having a problem trying to load my nft marke, that´s what i did:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
<a-nft
type="nft"
url="nftmarkers/pinball"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
<a-box position='0 0.5 0' ></a-box>
</a-nft>
<a-camera></a-camera>
</a-scene>
</body>
</html>
and that´s the error that it returns to me:
432abd3a-f330-4cc8-8c03-faa918143656:76 Error in loading marker on Worker 404
The problem was my server sending the page as result and not the content. I fixed sending the web app to firebase.
I'm trying to load a single .JSON model exporter from Blender to A-frame
I already try using this loader
https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders
but the model don't show up.
Here's what I'm trying:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="components/json-model.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="model" src="models/stockcar.json"></a-asset-item>
</a-assets>
<a-entity json-model="src:#model" scale="0.5 0.5 0.5"></a-entity>
<a-camera position="0 0 20"></a-camera>
<a-light type="point" color="#3d8be6" position="-10 0 0" look-at="#car" intensity="5"></a-light>
<a-light type="hemisphere" color="#33b522" position="-10 0 0" intensity="1"></a-light>
</a-scene>
</body>
</html>
and this is what the console is showing
A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #110055d)
index.js:74three Version: ^0.83.0
index.js:75WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
json-model.js:7 Uncaught SyntaxError: Unexpected token <
three.js:19590THREE.WebGLRenderer 83
http://127.0.0.1:57153/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
Any help would be greatly appreciated
Firstly, you have an extra "/" at the end of your asset-item opening tag :
<a-asset-item id="model" src="models/stockcar.json"/></a-asset-item>
Secondly, to use the asset you have to state the asset's id in the json-model "src" attribute:
<a-entity json-model="src:#model" scale="0.5 0.5 0.5"></a-entity>
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
I was playing around with HTML DOM, and I noticed that two properties don't agree with each other with no apparent reason. Consider this simple HTML file:
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
I expected body and alt_body to be identical, but .childNodes insists giving me a text node. (Below is the content of script.js)
body = document.documentElement.childNodes[1]
alt_body = document.documentElement.lastChild;
console.log(body.nodeType) //prints 3 (Node.TEXT_NODE)
console.log(alt_body.nodeType) //prints 1 (Node.ELEMENT_NODE)
console.log(body.childNodes.length) //prints 0
console.log(alt_body.childNodes.length) //prints 8
Does anyone know why it's acting that way?
It's because childNodes returns a text line node as well
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
0 : will be <head> node
1 : will be empty text ( considered as a node )
2 : will be <body> node ( lastChild in this HTML )
Try after getting rid of all the linefeeds and spaces like this below.
<html><head><title>DOM Example</title></head><body><p>Hello World!</p><p>Isn't this exciting?</p><p>You're learning to use the DOM!</p></body><script type="text/javascript" src="script.js"></script></html>
Then the result will be what you expected.
childNodes[1] isn't the last child, because there are three children:
[0] The Head Element
[1] The Text Node containing the newline character between your </head> and <body>.
[2] The body element
If you were to remove the newline and all spaces between </head> and <body> you would find that childNodes[1] === lastChild:
<html>
<head>
<title>DOM Example</title>
</head><body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>