【发布时间】：2021-09-10 14:07:00
【问题描述】：
我正在尝试在 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();
我在 HTML 中包含了我的 js 文件：
<script type="module" src="./client.js"></script>
这是我的文件夹结构：
【问题讨论】：
标签： javascript express ecmascript-6 three.js webgl