无法在NUXT中导入THREEjs OBJloader

Question

我已经用THREEjs在NUXT中创建了项目。我和eromulon.pro无法理解如何在nuxt中导入obj和mtl加载器。下面是我的代码：

import * as OBJLoader from '@/lib/OBJLoader';
import * as MTLLoader from '@/lib/MTLLoader';
import * as THREE from 'three';
import {TweenMax} from 'gsap';

let loader_1 = new THREE.OBJLoader();
let loader_2 = new THREE.MTLLoader();
let OrbitControls = require('three-orbit-controls')(THREE);
export default{
  data(){
  return {

}
},
watch: {

},
mounted(){
console.clear();
//VARIABLES
let canvas = document.getElementById('myscene');
let width = window.innerWidth;
let height = window.innerHeight;
var fov = 45;
var near = 1;
var far = 8000;
var pos_x = 1800;
var pos_y = 500;
var pos_z = 1800;
var color = 0x000000;
var mouse = new THREE.Vector2(), INTERSECTED;
//VARIABLES_END
//SCENE_GROUP_CAMERA
let scene = new THREE.Scene();
let group = new THREE.Group();  
scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );
var camera = new THREE.PerspectiveCamera(fov, width / height, near, far);
    camera.position.set(pos_x, pos_y, pos_z);

等等。

错误码如下：

THREE is not defined

在OBJLoader.js中。我已经在/lib目录中包含了OBJLoader.js和MTLLoader.js。如何解决此问题？

Answer 1

在nuxt.config.js中的模块中添加three

// Build configuration
build: {
    vendor: [
        'three',
    ],

// ...rest of file