网页为空，main.js文件未被链接，尽管它们位于同一文件夹中。使用Npt & Vite用于3D效果、相机等。
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>style.css代码：
canvas {
position: fixed;
top: 0;
left: 0;
}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()
3条答案
按热度按时间tv6aics11#
这些文件是否在站点的根文件夹中？在URL中使用
/告诉HTML您的文件在那里找到。如果这是你的问题，你应该可以通过将/main.js更改为main.js来解决这个问题。dhxwm5r42#
尝试将：
<script src=".js-path"> </script>放入您的<head>部分如果脚本文件在另一个目录中，您可以通过将
"./"放在脚本路径之前来访问它flmtquvp3#
有几件事你需要注意首先，JavaScript模块允许将程序划分为多个语句和声明序列。
<script type=module>用于加载网页中的JavaScript模块。要将JavaScript文件链接到HTML文件，必须使用带有
scr属性的<script>标记。由于JavaScript文件与HTML文件在同一个文件夹中，因此可以这样编写标记：<script src="main.js">。祝你好运我的朋友。