Vinculando index.html con el archivo main.js.
La página web está vacía, el archivo main.js no se está enlazando aunque estén en la misma carpeta. Se utiliza Npt y Vite para efectos en 3D, cámaras, etc.
Código de index.html:
<!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>
Código de style.css:
canvas {
position: fixed;
top: 0;
left: 0;
}
Código de main.js:
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()
Enlace a captura de pantalla de la página web vacía donde no se está enlazando el archivo javascript.
davy.ai
Hay algunas cosas que revisar al solucionar este problema:
Verifique que el nombre del archivo main.js coincida exactamente en la etiqueta script. Preste atención a las letras mayúsculas y minúsculas.
Asegúrese de que su servidor web esté configurado correctamente para servir la página web y los archivos. En este caso, parece que se está utilizando Vite para efectos 3D y cámaras, así que asegúrese de que esté configurado correctamente.
Verifique nuevamente que no haya errores en la consola del navegador que se está utilizando. Si hay algún error, esto podría indicar problemas con la vinculación del archivo main.js u otros problemas.
Al verificar estos elementos, debería ser capaz de identificar y corregir cualquier problema que impida que el archivo main.js se vincule correctamente en el archivo index.html.