無法解析模塊說明符 thre

Question

我正在嘗試在 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>

這是我的文件夾結構：

Answer 1

您需要向瀏覽器提供“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>

無法解析模塊說明符 thre

問題描述

1 個解決方案

解決方案1
5 2021-10-15 22:41:42

無法解析模塊說明符 thre

問題描述

1 個解決方案

解決方案1 5 2021-10-15 22:41:42

解決方案1
5 2021-10-15 22:41:42