Nuxtでthree.jsを使って3Dモデルを読み込みたい

経緯

普段はwebpackでthree.jsを読み込んで使用していましたが、Nuxtだとどのように読み込むのかわからなかったので試してみました。

バージョン

node v16.5.0
Nuxt v2.15.3
three.js v0.130.1
typescript v2.15.3

読み込む3Dデータ

glTF形式（.gltf）のモデリングデータを読み込みます。

読み込み方法

nuxt.config.ts

// 一部省略
     :
    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        { src: '~plugins/three.js', mode: 'client' },
    ],
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        transpile: ['three'],
    },
    :
// 一部省略

plugins/three.js

import Vue from 'vue';
import * as THREE from 'three';

Vue.use({
    install(Vue, options) {
        Vue.prototype.$THREE = THREE;
    },
});

上記のように読み込み設定、トランスパイル設定を行うと開発環境・本番環境で動作しました。

npm run dev や　npm run generate　を行うと下記のようなエラーが出てくることがあると思います。（一旦無視しました。）
内容的にはthree.jsのファイルサイズが大きすぎるといったものです。

[BABEL] Note: The code generator has deoptimised the styling of /Users/takase/study/node_modules/three/build/three.module.js as it exceeds the max of 500KB.

OrbitControlsやGLTFLoaderを使う

componentsディレクトリのVueファイルで読み込みます。

components/3d.vue

<template>
    <section>
        <div data-canvas></div>
    </section>
</template>


<script lang="ts">
import Vue from 'vue';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default Vue.extend({
       :
    methods: {
        init(){
	    this.initScene();
	    this.setLoading();
	},
        initScene() {
            this.three.scene = new this.$THREE.Scene();
        },
        setLoading() {
            const loader = new GLTFLoader();
	        :
		:
        },
    },
	:
});
</script>

以上となります。

もっと良い読み込み方法等あれば、ぜひご教授ください。
よろしくお願いいたします。