使用CDN加载Three.js STLLoader遇错误，求解决方案

1. 修复STLLoader导入错误 #

你使用的第三方stl-loader包不符合ES模块导出规范，导致无法正确导入STLLoader。Three.js官方已将STLLoader作为内置插件，直接从官方addons路径导入即可：

修改importmap #

删除stl-loader的映射，保留Three.js官方路径：

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.154.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"
    }
  }
</script>

修改导入语句 #

替换原STLLoader导入代码：

import { STLLoader } from 'three/addons/loaders/STLLoader.js';

2. 修复其他潜在问题 #

（1）添加动画循环 #

当前代码仅调用一次renderer.render()，模型加载完成后不会自动重绘，需添加动画循环保证实时渲染：

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

（2）添加光源 #

MeshPhongMaterial依赖光源才能显示颜色，否则模型会呈现黑色，添加环境光和方向光：

// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

（3）声明局部变量 #

group和mesh未用let/const声明，会成为全局变量，修改为局部变量避免污染：

const loadObject = () => {
  const loader = new STLLoader()
  loader.load("stl_file.stl", function (geometry) {
    const group = new THREE.Group()
    scene.add(group)

    const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0x111111, shininess: 200 })
    const mesh = new THREE.Mesh(geometry, material)
    // 其余逻辑不变
  })
}

（4）添加加载错误处理 #

为STLLoader添加错误回调，方便排查模型加载失败问题：

loader.load(
  "stl_file.stl",
  function (geometry) { /* 成功逻辑 */ },
  function (xhr) {
    console.log(`${(xhr.loaded / xhr.total * 100).toFixed(2)}% loaded`);
  },
  function (error) {
    console.error('模型加载失败:', error);
  }
);

（5）窗口大小适配 #

添加resize事件监听，保证画布自适应窗口变化：

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

完整修正代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>STL</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.154.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"
        }
      }
    </script>
        <script type="module">
      import * as THREE from 'three';
      import { STLLoader } from 'three/addons/loaders/STLLoader.js';

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

      scene.background = new THREE.Color('#cc0000');

      // 添加光源
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(5, 5, 5);
      scene.add(directionalLight);

            const loadObject = () => {
        const loader = new STLLoader()
        loader.load(
          "stl_file.stl",
          function (geometry) {
            const group = new THREE.Group()
            scene.add(group)

            const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0x111111, shininess: 200 })
            const mesh = new THREE.Mesh(geometry, material)
            mesh.position.set(0, 0, 0)
            mesh.scale.set(10, 10, 10)
            mesh.castShadow = true
            mesh.receiveShadow = true

            geometry.center()
            group.add(mesh)
          },
          (xhr) => {
            console.log(`${(xhr.loaded / xhr.total * 100).toFixed(2)}% loaded`);
          },
          (error) => {
            console.error('STL模型加载失败:', error);
          }
        )
      } 

      loadObject();
            camera.position.z = 5;

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();

      // 窗口大小适配
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
        </script>
    </body>
</html>

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