three.js加载OBJLoader.js遇MIME类型不匹配错误求助

• OBJLoader加载失败：你引用的https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/OBJLoader.js路径无效，服务器返回404页面（MIME类型为text/html），浏览器的X-Content-Type-Options: nosniff安全策略会拦截这种MIME类型不匹配的脚本资源，导致加载失败。
• 模型资源无法读取：你使用的Google Drive链接是预览页面，而非模型文件的直接下载地址，OBJLoader无法从该链接获取正确的OBJ文件内容。

1. 修正OBJLoader的引用路径 #

Three.js r100+版本后，OBJLoader这类加载器不再包含在核心库中，需从examples目录引用。替换原脚本引用为以下任意一种：

方式一：使用unpkg可靠CDN路径 #

<script src="https://unpkg.com/three@0.119.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.119.0/examples/js/loaders/OBJLoader.js"></script>

方式二：使用ES Module导入（更现代的写法） #

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.119.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.119.0/examples/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from 'three';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
  
  // 后续Three.js代码写在这里
</script>

2. 处理OBJ模型资源 #

• 下载Google Drive上的OBJ模型文件，上传到静态文件托管服务（如GitHub Pages、Netlify或自有服务器），获取模型的直接访问URL；
• 若本地开发，将模型文件与HTML文件放在同一目录，使用相对路径加载：

loader.load('./Rubix.obj', function (object) {
  // 模型处理逻辑
});

完整修正代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Model 3D</title>
  <script src="https://unpkg.com/three@0.119.0/build/three.min.js"></script>
  <script src="https://unpkg.com/three@0.119.0/examples/js/loaders/OBJLoader.js"></script>
  <style>body {margin: 0;}</style>
</head>
<body>
<script>
// 创建场景
var scene = new THREE.Scene();
// 添加灯光（无灯光时OBJ模型会显示为黑色）
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建加载器并加载模型
var loader = new THREE.OBJLoader();
loader.load('Rubix.obj', function (object) {
  scene.add(object);
  object.position.set(0, 0, 0);
  object.rotation.set(0, 0, 0);
  object.scale.set(1, 1, 1);
});

// 渲染循环
var render = function () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};
render();
</script>
</body>
</html>

额外注意事项 #

• 本地直接打开HTML文件（file://协议）可能触发跨域问题，建议用VS Code的Live Server插件等本地服务器运行页面；
• 确保OBJ模型文件的服务器返回正确的MIME类型（如model/obj或text/plain）。

内容的提问来源于stack exchange，提问作者Dawid Krzysiak