網頁是空的，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 代碼：匯入'./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()
空網頁 - javascript 未鏈接
uj5u.com熱心網友回復：
這些檔案是否在您站點的根檔案夾中？/在您的 URL 中使用 a告訴 HTML 您的檔案在那里找到。如果這是您的問題，您應該可以通過更改/main.js為main.js.
uj5u.com熱心網友回復：
嘗試將：<script src=".js-path"> 放到您的 <head> 部分
如果腳本檔案在另一個目錄中，您可以通過在腳本路徑之前放置“./”來訪問它
uj5u.com熱心網友回復：
也許你還沒有在你的檔案夾中安裝你的 THREE.js 那好吧你可以把你的第一行改成這樣
import * as THREE from "https://cdn.skypack.dev/[email protected]";
它會運作良好
如果它不起作用
如果它不起作用，你會在錯誤的位置提到 javscript 檔案，如果你的 html 和 javscript 檔案在同一個地方使用這個
<script src="./app.js"></script>
如果 javascript 檔案在 html 檔案之外，則只從檔案夾中走出一個目錄
<script type="module" src="../app.js"></script>
.. 雙點從您所在的當前檔案夾中消失
./ 這從當前檔案夾中選擇檔案
編輯
順便說一下，這里是作業示例，更改第一行代碼CODEPEN后會發生什么
uj5u.com熱心網友回復：
有幾件事你需要看看。首先，JavaScript 模塊允許將程式分成多個陳述句和宣告序列。<script type=module>用于在網頁中加載 JavaScript 模塊。
要將 Javascript 檔案鏈接到您的 HTML 檔案，您必須使用<script>帶有scr屬性的標簽。由于javascript檔案是在同一檔案夾中的HTML檔案，你可以寫這樣的標簽：<script src="main.js">。
祝你好運，我的朋友。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370140.html
標籤：javascript html 维特
上一篇：將陣列轉換為物件陣列