无法解析模块说明符三
pra*_*del 2 javascript webgl express three.js ecmascript-6
我正在尝试研究 Three.js，现在这次是在三个模块中。我使用express作为后端服务器。
我不断收到以下错误：
未捕获的类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。在我的控制台中。
这是app.js的后端代码
"use strict";
const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 9000;
app.use(express.static(__dirname + "/public"));
app.use("/build/", express.static(path.join(__dirname, "node_modules/three/build")));
app.use("/jsm/", express.static(path.join(__dirname, "node_modules/three/examples/jsm")));
app.get("/", (req, res) => {
response.send("Connected successfully");
});
app.listen(port, (error) => {
if (error) {
console.warn(`${error} occured while starting server`);
return;
}
console.log(`listening successfully to the port ${port}`);
});
这是我的 js 文件：
import * as THREE from "/build/three.module.js";
import { OrbitControls } from "/jsm/controls/OrbitControls.js";
import Stats from "/jsm/libs/stats.module.js";
let scene, camera, renderer;
function main() {
scene = new THREE.Scene();
const windowsWidth = window.innerWidth;
const windowsHeight = window.innerHeight;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(windowsWidth, windowsHeight);
document.body.appendChild(renderer.domElement);
const aspect = windowsWidth / windowsHeight;
camera = new THREE.PerspectiveCamera(90, aspect, 0.1, 1000);
camera.position.z = 2;
// camera.position.set(-900, -200, -900);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", renderer);
let materialArrays = [];
let textureImages = [
"meadow_ft.jpg",
"meadow_bk.jpg",
"meadow_up.jpg",
"meadow_dn.jpg",
"meadow_rt.jpg",
"meadow_lf.jpg",
];
for (let i = 0; i < 6; i++) {
let texture = new THREE.TextureLoader().load(
`../images/skyboxday1/greenery/${textureImages[i]}`
);
let material = new THREE.MeshBasicMaterial({ map: texture });
materialArrays.push(material);
}
const geometry = new THREE.boxGeometry(10000, 10000, 10000);
let skyBox = new THREE.Mesh(geometry, materialArrays);
scene.add(skyBox);
function draw() {
renderer.render(scene, camera);
requestAnimationFrame(draw);
}
}
main();
我将我的 js 文件包含在 HTML 中：
<script type="module" src="./client.js"></script>
这是我的文件夹结构：
小智 7
您需要向浏览器提供“importmap”，在index.html之前添加脚本类型importmap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>deore.in</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
overflow: hidden;
margin: 0px;
}
</style>
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js",
"three/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js",
"three/examples/jsm/libs/stats.module":"./jsm/libs/stats.module.js",
}
}
</script>
</head>
<body>
<script type="module" src="client.js"></script>
</body>
</html>