javascript - 无法解析模块说明符三-6ren

javascript - 无法解析模块说明符三

转载作者：行者123 更新时间：2023-12-01 23:20:33

25

4

我正在尝试使用 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>

这是我的文件夹结构:

最佳答案

你需要向浏览器提供“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>

关于javascript - 无法解析模块说明符三，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68160473/

25

4

0

文章推荐： r - Purrr 映射到拆分的数据帧上以获得每个组的 AUROC

文章推荐： c# - Byte[] 在 REST API 中作为 base64 返回

文章推荐： jq - 更新运算符在 JQ 中产生空对象

文章推荐： swift - Kotlin:将字符串转换为字节数组并用 0 填充

定义和声明之间的 C++ 说明符
我得到以下声明: // file MadaPacket.h class MadaPacket { // .... public: inline static bool word_is_header
C++ decltype 说明符
目录 1.语法 2.关键词decltype 1.语法 decltype ( 实体 ) (1) (C++11 起) decltype
c++ - 演绎指南是否需要 noexcept 说明符？
由于某些原因，我一直认为演绎指南必须相同noexcept -它们所引用的构造函数的性质。例如: template struct clazz { clazz(const T &) noexcep
c++ - 在派生类中使用 protected 说明符
我不确定成员 var isMouseOverYard 的正确访问说明符。在代码片段中，我没有从 House 继承的计划。选项 1 与基类更一致(如果我要从任一类继承，我可以检查鼠标是否在对象/院子上)
c++ - 指针的 const 说明符
我可以声明 foo(const T& var) 这样我就知道 var 不会被改变。指针的等效格式为 foo(const T* var)? 过去我尝试过那些，与 iterator/const_iter
C++/ENUM/类型名称/说明符
我已经为这个问题搜索了几个小时，但仍然无法解决。 #include using namespace std; enum color { brown, green, orange, red, yell
C 中用户定义数据类型的 const 说明符
我有用户定义的数据类型 typedef Unsigned int8 COMMAND_TYPE[6]; 现在我有类似的功能 ConnectCommand(COMMAND_TYPE const comm
c - 说明符 %[^s] 的用途是什么？
说明符 %[^s] 有什么用？ s 是一个变量。在什么情况下我可以使用这个说明符？最佳答案 scanf 的 %[ 格式说明符将匹配一系列字符，这些字符与 [ 和 ]< 之间列出的字符相匹配。如果第
c - 未初始化字符数组的 %d 说明符
#include int main() { char a[8]; printf("%d\n",a) ; return 0; } 对于上面的代码，输出是这
c - sscanf 说明符 %[] 和缓冲区溢出
很抱歉这个“另一个”sscanf 问题，但我无法通过实验找到任何解决方案。这是一个字符串，我想解析并提取 2 个由“:”分隔的子字符串: char *str = "tag:R123:P1234";
c - 限定符、修饰符、说明符
所以我在维基百科的一篇文章(粗略翻译)中遇到了以下定义: Modifier (programming) - element of source code being a phrase of given
c++ - 为什么他们坚持在下面的示例中使用 `extern` 说明符？
[basic.link]/6 (我的重点): The name of a function declared in block scope and the name of a variable dec
c++ - 为类重载 `unsigned` 说明符
我正在尝试定义我自己的数据类型(称为 sfloat)，它类似于 float ，但使用不同数量的尾数位和指数位以更好地适应我的数据范围和精度。目标是定义一种新的数据类型，可以替代现有应用程序中的 flo
c++ - 在模板类型推导之前评估 noexcept 说明符
请看下面的代码: #include struct A { A(int, int) {} }; struct tag {}; template struct is_noexcept { st
c++ - 在派生类的函数中使用 Constexpr 说明符
如果这是一个无知的问题，请原谅我，但我仍在思考何时以及如何使用 constexpr 说明符。 (使用 msvc 14 编译)。我正在研究一个简单的基类，它允许您将任意对象包装到“constexpr 对
c++ - 在函数声明和定义中使用 noexcept 说明符？
考虑以下函数: // Declaration in the .h file class MyClass { template void function(T&& x) const; }; /
c++ - 具有默认参数构造的 noexcept 说明符
以下面的示例代码为例: void test(const Item& item = Item()) { ... } 假设一旦 item 被传递给函数，this 就不能抛出。问题是:函数应该标记为
c++ - 是否有自动 noexcept 说明符？
我听说 noexcept 关键字更像是“它永远不应该抛出异常”而不是“它不会”。如果我不确定是否抛出异常，我认为使用 noexcept 关键字不是很好，但是 noexcept 关键字有时
c++ - C++中成员函数的const＆，＆和&&&说明符
最近，我在阅读API of boost::optional 时发现: T const& operator *() const& ; T& operator *() & ; T&&
f# - 覆盖 ToString 和 `%A` 说明符
如果覆盖 ToString在一个类型中 type TestMe ()= override __.ToString() = null 然后我通过 "%A" 输出它说明符 printfn "*%A

首页

博学

6Ren·AI

商城

javascript - 无法解析模块说明符三