未捕获类型错误：无法解析模块说明符“三/examples/jsm/loaders/GLTFLoader.js”

问题描述 投票：0回答：2

我真的很难理解为什么我的程序由于这个错误而崩溃：

未捕获的类型错误：无法解析模块说明符“三/示例/jsm/loaders/GLTFLoader.js”。相对引用必须以“/”、“./”或“../”开头。

我正在尝试使我的 html 文件与我创建的 serial.js 文件进行通信。 html 只是在项目文件夹中，但serial.js 文件存储在我为该项目拥有的 js 文件夹中（需要导入从 Three.js 网站下载的一些对象加载器模板。）

这是我迄今为止在 html 代码中尝试过的：

<html>
  <head>
   <title>Three.js Crash Course</title>
   <style>
   body
   { 
     margin: 0; 
   }
   canvas
   {
     width: 100%; height: 100%;
   } 
  </style>
</head>
<body>
 <script src = "js/three.js"></script>
 <script src = "js/OrbitControls.js"></script>
 <script type = "module" src = "./js/serial.js"></script>
</body>
</html>

我也尝试过仅使用“/js/serial”..ect 和“../js/serial.js”。为什么它无法识别并运行该文件？

如果有助于理解我设置文件结构的方式，我还添加了一张图像。

three.js webgl gltf
2个回答
2
投票

您正在导入无效的 ES6 模块（如全局脚本）。我建议您使用 examples/js 中的文件或使用正确的模块语法。

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/[email protected]/build/three.module.js"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

    import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
0
投票

您需要检查 GLTFLoader.js 或遇到相同错误的任何其他文件。找到“三”的导入语句，首先将“三”替换为完整的文件路径。如果遇到与权限相关的新错误或类似错误，请从 GLTFLoader.js 的路径导航到相应的文件夹。如果需要导航到涉及向后移动的路径，可以使用“../”向后移动。例如，“../../../build/ Three.module.js”。

示例： 进口 { 缓冲区几何， 文件加载器， Float32Buffer属性， 团体， 线条基本材质， 线段， 装载机, 材料， 网， MeshPhong材质， 积分， 点材料， 矢量3, 颜色 } 来自“三”；

替换为

导入{ 缓冲区几何， 文件加载器， Float32Buffer属性， 团体， 线条基本材质， 线段， 装载机, 材料， 网， MeshPhong材质， 积分， 点材料， 矢量3, 颜色 } 来自 '../../../build/two.module.js';

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.