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
Related
I am learning Web AR development using MindAR, https://hiukim.github.io/mind-ar-js-doc/#:~:text=MindAR%20is%20an%20opensource%20web,are%20written%20for%20AFRAME%20integration. I am following a tutorial on Udemy, https://www.udemy.com/course/introduction-to-web-ar-development/learn/lecture/29791078#overview. But it is not working unfortunately for me but for the instructor.
This is my index.html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AR Research</title>
<script src="https://cdn.jsdelivr.net/npm/mind-ar#1.1.5/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar#1.1.5/dist/mindar-image-aframe.prod.js"></script>
<script src="./main.js" type="module">
</script>
<style>
html, body {
position: relative;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>
As you can see there is not much in the code. I basically embedded the required Mind AR libraries through CDN and add the css styling a little bit and reference my main.js file.
This is my main.js file.
document.addEventListener(`DOMContentLoaded`, () => {
const start = async () => {
// create the AR world and specify the marker
const mindarThree = new window.MINDAR.IMAGE.MindARThree({
container: document.body,
imageTargetSec: './groot.mind'
})
const { renderer, scene, camera } = mindarThree;
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.5 });
const plane = new THREE.Mesh(geometry, material);
const anchor = mindarThree.addAnchor(0);
anchor.group.add(plane);
await mindarThree.start();
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
})
}
start();
})
When I run the code on the browser, I am getting the following error.
main.js:4 Uncaught (in promise) TypeError: MINDAR.IMAGE.MindARThree is not a constructor
at start (main.js:4:29)
at HTMLDocument.<anonymous> (main.js:24:5)
What is wrong with my code and how can I fix it?
I had the same problem. The solution is that a different MindAR package needs to be imported, the one that combines MindAR and Three.js:
Use this one:
https://cdn.jsdelivr.net/npm/mind-ar#1.1.5/dist/mindar-image-three.prod.js
Not this one:
https://cdn.jsdelivr.net/npm/mind-ar#1.1.5/dist/mindar-image.prod.js
I have been using Physijs with the older version of three.js and it works perfectly
But when I downloaded the latest version of threejs it doesn't work even to just put a plane mesh on the scene
It brings out this error
Uncaught TypeError: Class constructor Scene cannot be invoked without 'new' line:391 of:file:///storage /emulated/0/threejs /learning-threejs/libs/physi .js
I don't understand why exactly
Here's my code
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<script type="text/javascript" src="../libs/three.min.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/TrackballControls.js"></script>
<script type="text/javascript" src="../libs/physi.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to
use the complete page */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
Physijs.scripts.worker = '../libs/physijs_worker.js';
Physijs.scripts.ammo = '../libs/ammo.js';
//renderer
var renderer=new THREE.WebGLRenderer({antialias:true})
renderer.setSize(innerWidth,innerHeight)
renderer.setPixelRatio=devicePixelRatio
renderer.shadowMap.enabled=true
renderer.setClearColor(new THREE.Color(0xff00ff))
//physijs scene
var scene=new Physijs.Scene
scene.setGravity(new THREE.Vector3(0,-300,-50))
//ground
var groundgeo=new THREE.PlaneGeometry(50,50)
var groundmat=new Physijs.createMaterial(new THREE.MeshBasicMaterial({color:0xd2b48c ,side:THREE.DoubleSide}))
var ground=new Physijs.PlaneMesh(groundgeo,groundmat,0)
ground.rotation.x=-0.5*Math.PI
ground.position.set(-20.0,0,0.0)
ground.receiveShadow=true
scene.add(ground)
var camera=new THREE.PerspectiveCamera(40,innerWidth/innerHeight,0.1,10000)
camera.position.set(70,65,0)
camera.lookAt(ground.position)
scene.add(camera)
var trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.staticMoving = true;
document.getElementById("WebGL-output").appendChild(renderer.domElement)
render()
var step=0
function render(){
scene.simulate(undefined,2)
trackballControls.update()
requestAnimationFrame(render)
renderer.render(scene,camera)
}}
window.onload = init()
</script>
</body>
Thanks in advance
The new version of three js doesn't support physi.js but it support Cannon.js
So cannon.js(or other recent physics library) should be used instead of physi.js
I'm trying to make a website with multiple p5 canvases on the same page, so after a lot of research, I came to the conclusion that the most adequate way to do that is by using instance mode on p5.
I spent the whole day trying to understand the instance mode, i even found a converter online that converts it for me, but I'm trying to do it all by my self using it just to check errors. The problem is that i can't find a way to use sound in my sketch using instance mode. the code i have is a lot more complex, but even trying just the basic it still does not work.
var s = function(p) {
let song;
p.preload = function() {
p.song = load('thunder.mp3')
}
p.setup = function() {
p.createCanvas(720, 200);
p.background(255, 0, 0);
p.song.loop();
};
};
var myp5 = new p5(s, 'c1');
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<style> body {padding: 0;
margin: 0;
}
<meta charset="UTF-8">
</style>
</head>
<body>
<div id="c1"></div> <br>
<div id="c2"></div>
</body>
</html>
you can test it here: https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt
This code works great in the global mode:
let song;
function preload() {
song = loadSound('thunder.mp3');
}
function setup() {
createCanvas(720, 200);
background(255,0,0);
song.loop();
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
You can test it here https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp
It shows this error: "Uncaught ReferenceError: load is not defined (: line 9)"
What am I'm doing wrong?
Thanks in advance!
Please try to post the exact code you're running. Your question contains different code than the link you posted in the comments.
But taking a step back, here's how I would think about instance mode and libraries:
Instance mode means that the variables and functions that belong to a sketch are now referenced via a variable, in your case the p variable.
But variables and functions that belong to a library are still referenced directly, i.e. in "global mode".
In other words, you don't want to reference the load() (or is it loadSound()?) function using instance mode. You should still reference that function directly, since it's coming from a library instead of from a specific sketch.
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>
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);
}