Использование клиентской стороны библиотеки three.js в vue.js / nuxt.js

Question

Я пытаюсь использовать библиотеку three.js (установленную с npm) для рендеринга 3D-моделей на стороне клиента в моем приложении nuxt.js, но у меня заканчиваются идеи, чтобы заставить импорт работать (я не сделалне много для начала). Каждый раз я получаю ошибку, связанную с тем, что три не определены. Вот что я пробовал:

В nuxt.config.js

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

В plugins/three.js

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

Vue.use(THREE);

В компоненте, который я пытаюсь использовать в:

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

Вызов изнутри функций как THREE.someFunction()

Answer 1

Я недавно успешно импортировал три в моем приложении nuxt, хотя я не проверяю, на стороне ли это клиента.

Из того, что я вижу, вы импортируете так: import * as Three from `three` но затем вы звонитеэто с three, а не Three. Это чувствительно к регистру!