Import and use three.js library in vue component



Hi everyone,

Could someone please explain me how I correctly import and use the three.js library in a vue component?

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 or used in older vue versions).

import * as THREE from './js/three.js';

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).


I tried many other common ways to import the three.js that didn't work either!

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.

    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 on...)

The complete Vue component file that I'm using for my project.


This has already been answered over at

Was that answer suitable?


Yes that solved it.
Thank you!

In the end it seemed better to use the three-orbid-controls plugin for vue :blush:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.