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()
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.
