解决控制台报错：Failed to resolve module specifier “three/addons/controls/OrbitControls.js“...的问题

前端绘梦师

已于 2023-12-20 18:50:42 修改

阅读量2.1k

点赞数 12

文章标签： javascript 前端开发语言

于 2023-12-20 18:24:13 首次发布

本文链接：https://blog.csdn.net/qq_53911056/article/details/135112617

版权

这个错误通常是由于在使用Three.js库时使用了错误的路径或模块导入的问题。

方法一：引入正确的OrbitControls.js 文件路径

代码如下：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="importmap">
        {
            "imports":{
                "three":"./three.js-r159/build/three.module.js",
                "three/addons/":"./three.js-r159/examples/jsm/"
            }
        }
    </script>
    <script type="module" src="./demo.js"></script>
</body>
</html>

demo.js:

import * as THREE from 'three';//主文件
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';//扩展库的引入
console.log(THREE);
console.log(OrbitControls);

这样报错问题就解决了

结果如下：

方法二：还可以尝试直接引入解决问题

确保你的Three.js库的版本正确，并且包含了 OrbitControls.js 文件。有时候，你可能需要手动下载并引入 OrbitControls.js 文件。
检查你的导入路径是否正确。确保你正确地指定了 OrbitControls.js 文件的路径。在你的导入语句中，检查路径是否正确，并且文件的大小写是否与实际文件匹配。
检查你的导入语句是否正确。确保你使用了正确的语法来导入 OrbitControls.js 模块。例如，你可以使用 import { OrbitControls } from "./three.js-r159/examples/jsm/controls/OrbitControls.js
```
import {OrbitControls} from './three.js-r159/examples/jsm/controls/OrbitControls.js';//扩展库的引入
```
正确地导入 OrbitControls 模块。
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'等同于引入方式import {OrbitControls} from './three.js-r159/examples/jsm/controls/OrbitControls.js'