Linking index.html with main.js file-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

Try to put: < script src=".js-path"> to your < head> section

if the script file is in another directory you can access this by putting "./" before the script path

CodePudding user response：

maybe you haven't installed your THREE.js in your folders that okay you can change your first line to this

import * as THREE from "https://cdn.skypack.dev/[email protected]";

and it will work well

if it doesn't work

if it doesn't work, you will have mentioned javscript file on wrong location, if your html and javscript file are on same place use this

<script src="./app.js"></script>

if javascript file is outside of html file, go out from folder only one directory

<script type="module" src="../app.js"></script>

.. double dot goes out from current folder where you are

./ this picks file from current folder

EDIT

by the way here is working example what will happend after changing first line of code CODEPEN

CodePudding user response：

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.