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