如何在 Vue 项目中正确导入 Three.js 模块？

我想用three.js来显示一个gltf文件。为此，我必须从three.js 节点包中导入GLTFLoader 模块。

根据文档，实现此目的的方法是像这样导入它：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

这条线没有给我任何错误。如果我以任何方式更改路径，控制台会告诉我他们找不到模块，所以我确信它正在以现在编写的方式找到模块。

但是，当我继续调用加载程序时，就像文档中所说的使用这一行：

var loader = new THREE.GLTFLoader();

我收到此错误：

GLTFLoader is not a constructor

我究竟做错了什么？

我尝试了多种导入加载器的方法，但没有成功，我能找到的每个线程似乎都使用相同的导入方式，而不会出现相同的错误。这是上下文中的相关代码。

<template>
    <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        var loader = new THREE.GLTFLoader();

        loader.load( 'assets/Models/eames_lounge_chair/scene.gltf', function ( gltf ) {

            scene.add( gltf.scene );

        }, undefined, function ( error ) {

            console.error( error );

        } );

    },
    animate: function() {

    },
    onWindowResize: function() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );
    }
  },
  mounted() {

        this.init();
        this.animate();
  }
}
</script>

<style scoped>
    #container {
        width: 10em;
        height: 10em;
    }
</style>