Using three.js library client-side in vue.js/nuxt.js

Question

I am trying to use the three.js library (installed with npm) to render 3D models on the client side in my nuxt.js app, but I'm running out of ideas to get the import to work (I didn't have many to begin with). Each time I get an error related to three not being defined. Here is what I have tried:

In nuxt.config.js

plugins: [
    {src: "~/plugins/three", mode: "client"}
  ]

In plugins/three.js

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

Vue.use(THREE);

In component that I'm trying to use it in:

if(process.client) {
    require('three');
    require('three-obj-loader');
    require('three-obj-mtl-loader');
    require('three-orbitcontrols');
}

Calling from within functions as THREE.someFunction()

Answer 1

I imported three in my nuxt app recently successfully, even though i'm not checking if it is client side.

From what i can see you import like this: import * as Three from `three` but then you are calling it with three and not Three . It's case sensitive!