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

image|690x431

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 https://stackoverflow.com/questions/47849626/import-and-use-three-js-library-in-vue-component

Was that answer suitable?

1 Like

Yes that solved it.
Thank you!

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

1 Like

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