I'm new to js and html, I would like to get into Aframe.
I want to go from declarative form to create a scene to programmatical way using js to create it :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene school-playground>
<a-box position="-1 0 -4.25" rotation="0 45 0" color="red" ></a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
To something like that :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('school-playground', {
init: function () {
var body = document.querySelector('body');
var sceneEl = document.createElement("a-scene");
var body = document.querySelector('body');
sceneEl.setAttribute("embedded", true);
sceneEl.style.height="700px";
sceneEl.style.width="100%";
sceneEl.setAttribute("school-playground", "");
var myBox = document.createElement('a-box');
myBox.setAttribute('position', {x:-1, y:0, z:-4})
myBox.setAttribute('rotation', {x:0,y:45, z:0}
myBox.setAttribute('color', "red");
sceneEl.appendChild(myBox);
body.appendChild(sceneEl);
//I also tried document.body.appendChild(sceneEl);
}
});
</script>
</head>
<body>
</body>
</html>
It doesn't seem possible to do it properly. Do I need to keep the scene statically defined ?
Thanks for your help.
Components initialize when attached to entities (https://aframe.io/docs/0.8.0/introduction/writing-a-component.html#using-property-data-from-a-lifecycle-handler). Your component is just registered but not associated to any entity so the init method won't run. You can programmatically create a scene as any other regular DOM component in JavaScript similarly to what you did but remember to do it outside of a component and append the scene to the document:
var sceneEl = document.createElement("a-scene");
...
document.body.appendChild(sceneEl);
You can also define your <a-scene> tag statically and then populate the scene:
sceneEl = document.querySelector("a-scene");
... create and append scene entities ...
sceneEl.appendChild(yourEntity);
I also recommend upgrading your A-Frame version to 0.8.0
Full runnable example on Glitch: https://glitch.com/edit/#!/conscious-way
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
</body>
<script>
var sceneEl = document.createElement('a-scene');
sceneEl.setAttribute('background', {color: 'red'});
var cubeEl = document.createElement('a-box');
cubeEl.setAttribute('color', 'blue');
cubeEl.setAttribute('position', '0 1.5 -2');
sceneEl.appendChild(cubeEl);
document.body.appendChild(sceneEl);
</script>
</html>
Here's what I write for the moment (the scene does not appear):
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - A-Frame School</title>
<meta name="description" content="JavaScript - A-Frame School">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('school-playground', {
/**
* Code within this function will be called when everything in <a-scene> is ready and loaded.
*/
init: function () {
//var body = document.body;
// var sceneEl = document.querySelector('a-scene');
var sceneEl = document.createElement("a-scene");
var body = document.querySelector('body');
sceneEl.setAttribute("embedded", true);
//sceneEl.setAttribute("class", "fullscreen");
sceneEl.style.height="700px";
sceneEl.style.width="100%";
var camera = document.createElement("a-entity");
camera.setAttribute("camera", "userHeight: 1.6");
camera.setAttribute("look-controls", {enabled: true});
camera.setAttribute("wasd-controls", "");
camera.setAttribute("active", true);
sceneEl.appendChild(camera)
//cylinder creation using the necessary attributes
var cylinder = document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 -4');
sceneEl.appendChild(cylinder);
//box creation using the necessary attributes
for (var i =0; i < 50; i++){
var myBox = document.createElement('a-box');
myBox.setAttribute('position', {x:Math.random()* 5-2.5 , y: Math.random()* 5-2.5 ,z : Math.random()* 5-7})
myBox.setAttribute('scale', {x: Math.random() / 1.25, y: Math.random() / 1.25, z: Math.random() / 1.25});
myBox.setAttribute( 'material', {color: '#00bfff'});
myBox.setAttribute('material', {visible: true});
myBox.setAttribute('rotation', {x: 0, y: 0, z: 0});
sceneEl.appendChild(myBox);
}
document.body.appendChild(sceneEl);
}
});
</script>
</head>
<body>
</body>
</html>
Related
I literally copied the code from the getting started section of the Matter.js library but an Uncaught TypeError occurs: "Engine.run is not a function".
I searched everywhere on the web but nothing helps. As a precaution, I added an event listener to run the code once everything is loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.9.2/matter.min.js" type="text/javascript"></script>
<title>Matter.js example</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener("load",init);
function init() {
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
}
</script>
</body>
</html>
Please, what am i doing wrong ?
You are using wrong version of matter-js library, try with latest version. I just tried with 0.15.0, it's working fine.
matter-js >= 0.10.0 has the support Render.run(). Please make sure the version which you are using for supported features.
window.addEventListener("load",init);
function init() {
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the engine
Runner.run(engine);
// run the renderer
Render.run(render);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.0/matter.min.js" type="text/javascript"></script>
<title>Matter.js example</title>
</head>
<body>
</body>
</html>
This is a basic problem I guess, but I can't find what the problem is. I have two scripts, one "main" and one containing a basic class, I try to instantiate the class in the main script like this:
Script.js
window.onload = function() {
var car = new Card('Ressources/Sprites/Axel.png', [50, 50]);
}
Card.js
class Card {
constructor(path, position) {
this.position = position;
this.texture = PIXI.Texture.from(sprite);
this.card = PIXI.Sprite(texture);
this.setPosition(position);
}
function setPosition(position){
card.x = position.x;
card.y = position.y;
}
}
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<style>* {padding: 0; margin: 0}</style>
<script src="Ressources/Libraries/pixi.min.js"></script>
<script src="Scripts/Card.js"></script>
<script src="script.js"></script>
<body>
</body>
</html>
In the console I have this error :
Uncaught ReferenceError: Card is not defined
at window.onload
I am trying to make program using p5.js and javascript. But I got a problem in p5.dom.js and got error like:
"Uncaught TypeError: canvas1.position is not a function"
And i almost consume a day :(
I was about to make another js file using p5.js.
Here is my code!
main.html
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<canvas id="canvas" width=1200 height=1334></canvas>
<script src="coords.js"></script>
<script src="p5/p5/p5.min.js"></script>
<script src="p5/p5/p5.dom.js"></script>
</body>
</html>
coords.js
if(flag==1 && count==2){
$('body').append('<script src="sketch.js"></script>');
$.getScript("p5/p5/p5.min.js")
.done(function(){
$.getScript("p5/p5/p5.dom.js")
.done(function(){
$.getScript("sketch.js",function(){
setup();
});
});
});
}
sketch.js
var canvas1;
function setup(){
canvas1=createCanvas(width1,height1);
canvas1.position(minX1,maxY1);//got error here!!
}
Please help me!!
Okay given that coords has other code you should probably do something like this:
Include sketch.js as normal, and put it after the p5 files.
Then include coords as normal
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<canvas id="canvas" width=1200 height=1334></canvas>
<script src="p5/p5/p5.min.js"></script>
<script src="p5/p5/p5.dom.js"></script>
<script src="sketch.js"></script>
<script src="coords.js"></script>
</body>
</html>
Then your coords.js can look like this:
if(flag==1 && count==2){
setup();
}
This way you dont have strange and unnecessary ajax calls loading code youre already loading.
EDIT
Given that setup() runs by default you should be able to put setup within your if condition and remove sketch.js altogether.
if(flag==1 && count==2){
var canvas1;
function setup(){
canvas1=createCanvas(width1,height1);
canvas1.position(minX1,maxY1);//got error here!!
}
}
or as answered by g aand
if (flag == 1 && count == 2) {
$('body').append('<script src="sketch.js"></script>');
}
or you could use a namespace:
var s = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(x, y);
p.position(x,y);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
if (flag == 1 && count == 2) {
var myp5 = new p5(s);
}
I'm trying to place a SNAP svg script into a div and am lost as to how I should do this.
Right now here is the html I am working with:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>OH SNAP SVG 2014</title>
<script src="Snap.svg-0.1.0/dist/snap.svg-min.js"></script>
<style>
body{
background:#FFF;
}
</style>
</head>
<body>
<script>
var paper= Snap(700,600);
var c = paper.image("clock machine.svg", 200,100,500,480);
var b = paper.image("new years ball.svg", 406,20,200,200);
var p = paper.image("button.svg", 258,508,35,35);
var l = paper.image("lights.svg",406,20,200,200);
var g = paper.group(b,l);
var clickFunc= p.click
g.transform("R90");
p.click(function(){
g.animate({transform : "t0,227" }, 5000, mina.easein );
T.animate({transform : "t-2557,0,"}, 4900,mina.linear);
});
g.attr({x:250})
var T = paper.image("LCD Text.svg", 620,453,2500,85).attr({
fill: "#3FFF9B"
});
var c = paper.rect(365, 454, 263, 85, 3).attr({mask:T,
fill:"#3FFF9B"
});
</script>
</body>
</html>
That is what I have so far. Does anybody know how I would specifically put this into a div? I read the documentation and have tried a couple of things, but my results have been futile.
Any help would be much obliged.
You can put an svg tag inside the div and attach to that, so it would look something like...
<div id="mydiv">
<svg id="mysvg"></svg>
</div>
s = Snap("#mysvg");
s.rect(100,100,200,200);
example jsfiddle here showing the above with css on the div.
Why is this little script not working?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="can" height="500" width="500"></canvas>
<script type="text/javascript">
var image = new Image().src="1.jpg";
context = document.getElementById("can").getContext("2d");
context.drawImage(image,10,10,480,480);
</script>
</body>
</html>
Firebug in Firefox (latest Version) shows:
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
[Bei diesem Fehler anhalten]
context.drawImage(image,10,10,480,480);
Chrome can't show the image either, they just say ERROR.
image.src is async, you need to draw it with a callback.
var image = new Image;
image.onload = function() { context.drawImage(image, 10, 10, 400, 400); }
image.src = .....
All you need to do is change:
ctx.drawImage(i, 0, 0, arg.width, arg.height);
to:
ctx.drawImage(arg.img, 0, 0, arg.width, arg.height);