I'm facing a challenge with incorporating the three.js library (installed via npm) to display 3D models on the client side within my nuxt.js application. Despite multiple attempts, I seem to be hitting a roadblock with the import not functioning properly, leading to an error related to 'three' not being defined. Here are the steps I have taken:
Within nuxt.config.js
plugins: [
{src: "~/plugins/three", mode: "client"}
]
Inside plugins/three.js
import Vue from 'vue'
import * as THREE from 'three'
Vue.use(THREE);
Within the component where I am attempting to utilize it:
if(process.client) {
require('three');
require('three-obj-loader');
require('three-obj-mtl-loader');
require('three-orbitcontrols');
}
Using functions like THREE.someFunction() when calling.