title: Import and use three.js library in vue component
body: <p>Could someone please explain me how I <strong>correctly</strong> import and use the three.js library in a vue component?</p>
  
  <p>After many many searches It became clear to me that most people use the following line to import three.js in a vue component, however I think it's outdated (usef for older three.js document <strong>or</strong> used in older vue versions).</p>
  
  <pre><code>import * as THREE from './js/three.js';
  </code></pre>
  
  <p>Unfortunately this doesn't seem to work for me as I get the following warnings when compiling my vue project afterwards. (Note that the project actually doesn't compile correctly and I get an empty file when I browse to it).
  <a href="https://i.stack.imgur.com/Hlv3t.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hlv3t.png" alt="enter image description here"></a></p>
  
  <p>I tried many other common ways to import the three.js that didn't work either!
  <br></p>
  
  <p>I'm no Vue expert at all, but three.js contains the following code block with exports, I think this may affect the way I need to import this library to avoid the compiling warnings.</p>
  
  <pre><code>exports.WebGLRenderTargetCube = WebGLRenderTargetCube;
  exports.WebGLRenderTarget = WebGLRenderTarget;
  exports.WebGLRenderer = WebGLRenderer;
  exports.ShaderLib = ShaderLib;
  exports.UniformsLib = UniformsLib;
  exports.UniformsUtils = UniformsUtils;
  exports.ShaderChunk = ShaderChunk;
  exports.FogExp2 = FogExp2;
  exports.Fog = Fog;
  exports.Scene = Scene;
  (and so one...)
  </code></pre>
  
  <p><br></p>
  
  <p><a href="https://wetransfer.com/downloads/ac4665fa5f424f6e408c82450646769820171216201626/c1f2a6" rel="noreferrer">The complete Vue component file</a> that I'm using for my project.</p>