ThreeJS 0.173.0报错：Failed to resolve module specifier 'three' 求助

你好，我仔细看了你的问题描述和代码，这个“Failed to resolve module specifier 'three'”报错是浏览器解析ES模块时找不到对应路径导致的，我们一步步来排查和解决：

1. 优先确认线上代码的导入语句是否正确 #

你本地提供的代码里，已经用了完整的CDN绝对路径导入Three.js，这是完全正确的写法：

import * as THREE from 'https://unpkg.com/three@0.173.0/build/three.module.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.173.0/examples/jsm/loaders/GLTFLoader.js';

但要重点检查线上部署的代码是不是和本地一致——有没有不小心把CDN链接改成了裸模块名（比如import * as THREE from 'three'）？如果是裸模块名，浏览器没有模块映射文件的话，就会抛出你遇到的这个解析错误。

2. 清除浏览器缓存，避免旧代码干扰 #

有时候浏览器会缓存之前的脚本文件，导致新的正确导入语句没生效。可以试试这两种方式：

• 打开开发者工具（F12），切换到「Network」标签，勾选「Disable cache」选项，然后刷新页面
• 用强制刷新快捷键：Windows按Ctrl+Shift+R，Mac按Cmd+Shift+R，跳过缓存加载最新代码

3. 换用其他CDN地址测试 #

如果当前用的unpkg CDN有访问问题，可以换成jsDelivr的CDN链接，兼容性和稳定性也很好：

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.173.0/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.173.0/examples/jsm/loaders/GLTFLoader.js';

4. 调试验证导入是否成功 #

你的代码里写了console.log("Three.js and GLTFLoader imported successfully!");，可以观察浏览器控制台：

• 如果这句话没输出，说明导入步骤直接失败了，那100%是导入路径的问题
• 如果输出了，那报错可能来自代码的其他部分，但结合你的报错信息，这种概率很低

另外补充两个WebXR相关的小提示：

• 你的网站是HTTPS环境，符合WebXR的运行要求（除了localhost，WebXR必须在HTTPS下运行）
• WebXR AR需要设备支持，比如安卓手机的Chrome/Edge浏览器，或者iOS 15.4+的Safari浏览器，旧设备或浏览器可能无法正常激活XR功能

备注：内容来源于stack exchange，提问作者Muhammad Faizan Khan