由于不允许的 MIME 类型（“text/html”），从“http://localhost/js/third.module.js”加载模块被阻止

Question

我正在尝试使用 Three.module.js，但我很难让它正常工作，因为 MIME 类型阻止，我使用 xampp 作为本地主机（我设置 xampp 也允许 .js 类型）作为解决问题的尝试）但似乎没有任何效果。路径似乎正确，我在本地托管文件（也尝试链接到在线版本，但没有成功）

更令人困惑的是 OrbitControls.js 似乎没有被阻止。

我尝试了以下操作：设置 xampp 以允许 .js 类型也作为解决问题的尝试）但似乎没有任何效果。路径似乎是正确的，我在本地托管文件（也尝试链接到在线版本但没有成功）。期望 Edge 或 Firefox 允许 .js 文件，但什么也没有。

文件架构是 地球 |__globe.html |__js |__two.module.js |__OrbitControls.js

代码

// Import statements with paths relative to the root
import * as THREE from 'http://localhost/globe/js/three.module.js';
import { OrbitControls } from './OrbitControls.js';

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // Black background

// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer setup
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Globe (sphere) setup
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// Lighting setup
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);

// OrbitControls setup
const controls = new OrbitControls(camera, renderer.domElement);

// Render loop
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

Answer 1

在项目根目录中安装 Threejs：

npm i three

在您的代码中导入模块

import * as THREE from “three” import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

您可能需要捆绑代码才能运行它（例如使用 esbuild）或设置脚本属性

type=“module”