Linking index.html with main.js file - javascript

Webpage is empty, main.js file is not being linked despite them being in the same folder. Npt is used & Vite is used for 3d effects, cameras, etc.
index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Abd </title>
</head>
<body>
hello
<canvas id="bg"></canvas>
<script type="module" src="/main.js"></script>
</body>
</html>
style.css code:
canvas {
position: fixed;
top: 0;
left: 0;
}
main.js code:
import './style.css'
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.setZ(30);
renderer.render( scene,camera );
const geometry = new THREE.TorusGeometry( 10,3,16,100)
const material = new THREE.MeshBasicMaterial( {color:
0xFF6347,wireframe:true});
const torus=new THREE.Mesh( geometry,material);
scene.add(torus)
function animate() {
requestAnimationFrame( animate );
renderer.render(scene,camera);
}
animate()
Empty webpage- javascript not being linked

Are these files in the root folder of your site? Using a / in your URL tells HTML that your file is found there. If that's your issue, you should be able to fix this just by changing /main.js to main.js.

Try to put:
<script src=".js-path"> </script>
to your <head> section
if the script file is in another directory you can access this by putting "./" before the script path

there are a couple of things you need to look at.
First of all, JavaScript modules allow a program to be divided into multiple sequences of statements and declarations. <script type=module> is used to load JavaScript modules inside web pages.
To link a Javascript file to your HTML file, you have to use the <script> tag with a scr attribute. Since the javascript file is in the same folder as the HTML file, you can write the tag like this: <script src="main.js"> .
Good luck my friend.

Related

How to use html-gl library ? Its very lack of documentation

Does anyone know how to use html-gl library ?
I tried to implement rendering HTML/CSS via WebGL. I've tried to do some WebGL postprocessing, but it started to get really slow once I created a lot of Text Geometry. I did all that with react-three-fiber framework. So I tried another alternative to achieve what I want, I tried CSS Custom Filter, but unfortunately it doesn't work yet in modern browser. And then I found html-gl library. It was really hard for me to implement that because it has a very minimal docs.
Problems:
1. I've tried to use html-gl in my project, but nothing seems to be working
2. There is also one more issue, if I click the box, the css coloring doesn't work, but if I don't wrap it with <html-gl> tag, it works as it should
here is the codesandbox:
https://codesandbox.io/s/html-gl-project-lhk2fp
Dependencies:
npm i html-gl
npm i pixi.js
Here is my code:
main.js
import './style.css';
import * as PIXI from 'pixi.js';
const redbox = document.querySelector('.box');
redbox.addEventListener('click', () => {
redbox.classList.toggle('blue');
});
// get html gl element
const htmlgl = document.getElementsByTagName('html-gl')[0];
// set up pixi stage
const stage = new PIXI.Container();
// set up renderer
const renderer = window.HTMLGL.renderer;
const displaceContainer = htmlgl.sprite; // --> this line is undefined
// displacement filter
const displacementTexture = PIXI.Texture.from('images/blur.JPG');
const displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
displacementFilter.scale.x = 50;
displacementFilter.scale.y = 50;
displaceContainer.filters = displacementFilter; // --> error here
// render loop
function animate() {
renderer.render(stage);
requestAnimationFrame(animate);
}
renderer.render(stage);
requestAnimationFrame(animate);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<!-- this is the html-gl DOM -->
<html-gl>
<div id="app">
<div class="layout-flex">
<div class="box red">click me !</div>
</div>
</div>
</html-gl>
<!-- this is the html-gl DOM -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html-gl/0.3.1/htmlgl.min.js"
integrity="sha512-MffjPWwAY9ra9a7OXYEo1j9JiYD8IHJ6Pr1hjxSKk7gNzpYk6YRFB0QOQNg7EvxBosNclFOjl7Fe+1cMGI3rEA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="module" src="/main.js"></script>
</body>
</html>
Any idea what goes wrong here?

How do I make Phaser apply changes from my game.js file?

I tried the Phaser Tutorial. I created the index.html plus a js-file called game.js.
The phaser.min.js file was downloaded too.
Everything is in the same folder.
I connected everything properly and the output works very fine but somehow Phaser doesn't recognise changes in my game.js anymore.
This is my current game.js file:
var config = {
type: Phaser.AUTO,
width: 640,
height: 360,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload(){
this.load.image('boo', 'assets/pics/boo.png');
}
function create(){
this.add.image(0, 0, 'boo');
}
function update(){
}
My index.html file looks like this:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UFT-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title> My very 1st game </title>
<script type = "text/javascript" src = "phaser.min.js"></script>
<script type = "text/javascript" src = "game.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>
Including the game.js file works and if I remove it from the head section it doesn't work anymore, as it should be.
If I'm going to change let's say width: 640 to width: 200 for example and I refresh the localhost-page, it doesn't apply the change.
If I inspect the page, the old file with width: 360 is still used, even though it doesn't exist anymore.
It applies changes if I put the code from the game.js file into the body of index.html. It doesn't by including the game.js file.
I use XAMPP including the Apache Webserver.
Any hints what I can try? Anything will be appreciated.
The problem was caching. I refreshed the game with ctrl+F5 and it applied changes.
Adding following code might help too:
<meta http-equiv="Cache-control" content="no-cache">

Executing JS function immediately in plain JS

I'm attempting to learn to use three.js. I don't know much JS but I figured I'd pick it up as I went along. I'm having difficulty getting the following two things to work together:
fire.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="fire.css">
<script type="text/javascript" href="js/fire.js"></script>
<script type="text/javascript" href="js/three.js"></script>
</head>
<body onload="fire()"></body>
</html>
js/fire.js:
function fire() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
var box_geometry = new THREE.BoxGeometry(1, 1, 1);
var box_material = new THREE.MeshBasicMaterial();
var cube = new THREE.Mesh(box_geometry, box_material);
scene.add(cube);
var animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y -= 0.01;
renderer.render(scene, camera);
};
animate();
}
I'm getting an undefined reference error that fire() doesn't exist when I attempt to use onload (I don't know what the little options contained within tags are called).
I am using Python's SimpleHTTPServer (python -m SimpleHTTPServer) to host this code locally. I'm not sure if this is known to have any issues. I managed to get this code to work using the same setup, so it seems that my issue lies in figuring out how best to use JS without actually embedding it in my HTML since that seems cleanest.
I also ran fire.js through jslint to make sure I didn't have any syntax errors and it looks okay. (feel free to check my work).
So, I'm at a loss. How do I make these two cooperate? (Preferably using plain JavaScript, just for the moment)
Use the src attribute not href for referencing external JavaScript files:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="fire.css">
<script type="text/javascript" src="js/fire.js"></script>
<script type="text/javascript" src="js/three.js"></script>
</head>
For future reference, you can use the Network tab (in Chrome's Developer Tools) to verify the external file is actually getting loaded correctly.

Uncaught TypeError: Cannot read property 'add' of undefined (Phaser)

im sort of new at this website, currently working on this mini RPG phaser game in brackets. Assuming no spelling errors that i can see, every time i go live, i get stuck with this dang error in my main.js, i looked over my main.js and my index.html, cant find the issue, my phaser.js is under js/phaser.js.
var RPG = RPG || {};
var game = new Phaser.Game(640, 480, Phaser.CANVAS);
game.state.add("TitleState", new RPG.TitleState());
game.state.start("TitleState");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>KawaiiRPG</title>
</head>
<style>
body {
padding: 0px;
margin: 0px;
background-color: black;
}
</style>
<body>
<script src="js/phaser.js"></script>
<script src="js/main.js"></script>
</body>
</html>
The main problem here is that, afaik, Phaser 3 (shown in your screenshot's console) has to little documentation right know; most documentation and examples you can find refers to Phaser 2, or early betas of Phaser 3.
I'm new to Phaser (and game development in general) and I'm having problems too reading Phaser 2 examples and figuring out how to make them work in Phaser 3. So here is my try...
What is wrong: in Phaser 3 there are no states but scenes, each of which acts as an world by it self; and they are managed differently to the states in previous versions of Phaser (https://phaser.io/phaser3/contributing/part5).
Solution: Not sure how to dynamically add a scene to a game, but by using a configuration object you can set the initial scene when creating the Game object:
var myRpgTitleScene = {
preload: function(){},
create: function(){},
update: function(){}
}
var config = {
type: Phaser.CANVAS,
width: 640,
height: 480
},
scene: myRpgTitleScene
}
var game = new Phaser.Game(config);

How to link JavaScript frameworks/extensions in HTML?

I have seen a lot of frameworks and extensions recently and all for a lot of different things. It is hard for me to do things using just raw JavaScript or raw jQuery. I want to use these JS extensions/frameworks but the problem is that I don't know how to link them to my HTML document.
For Example: <script src="some link of fw/ext" type="text/javascript"></script> I put this in the <head> of my HTML and then write my code in a different file named "script.js" (made using notepad) but the code doesn't seem to work.
I know this is a problem because I don't link it properly.
I want to work with fabric.js on a project related to HTML5 canvas. I think I need to link both, my code and the framework in some way but I'm not sure as to how should I do it.
My HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javscript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
</head>
<body>
<canvas id="draw" width="250px" height="250px">This if browser doesn't support HTML5
</canvas>
</body>
</html>
My JS Code:
var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 100;
canvas.freeDrawingBrush.color = "#ff0000";
Should work somewhat like this : http://jsfiddle.net/MartinThoma/B525t/5/
You need to load fabric.js first at the header and then you need to load your js file order matters.
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script>
<script type='text/javascript' src='yourjsfile.js'></script
In case you are not clear on how to add elements to the canvas. Then here is one snippet which could help you.
Also wrap your code inside onload() function so that when the script loads, the #draw element is available
window.onload = function() {
var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "#ff0000";
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// you need to add the object to canvas
canvas.add(rect);
}

Categories