导入THREE.js及GLTFLoader失败求助：模块解析错误

API 探路者

2026-7-25

THREE.js 和 GLTFLoader 导入失败求助

尝试导入THREE.js文件和GLTFLoader但无法正常运行，已自行搜索未找到合适解决方案，特此求助。

相关代码

HTML代码

<script type="module" src="js/main.js"></script>

JS代码

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.151.3/three.min.js';
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.151.3/examples/jsm/loaders/GLTFLoader.js";
var scene, camera, renderer, model;

init();
function init() {
  scene = new THREE.Scene();

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

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const loader = new THREE.GLTFLoader();
  loader.load('img/futuristicface.glb', function (gltf) {
    model = gltf.scene;
    scene.add(model);
  });
  animate();
}
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}