这个错误通常是由于在使用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'
