How to load PCDLoader in Vue fasion?

I’m trying to integrate Vue + Three.js + PCDLoader.

And the current progress is integrate only Vue + Three.js (code here).

The key syntax is import * as THREE from 'three'

How can I import PCDLoader with similar syntax?

And I found an example site (here).
However, this example using

<script src="../build/three.js"></script>
<script src="js/loaders/PCDLoader.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

syntax to import js file globally.

In the last release, all official example where upgrade to ES6 modules. So when looking at the PCD example, you will see that the imports looks like so now:

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

import Stats from './jsm/libs/stats.module.js';

import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { PCDLoader } from './jsm/loaders/PCDLoader.js';

You can use the same pattern in your app.

Notice that the loader is imported from ./jsm/loaders/. The jsm directory contains the module versions of the example files.

I also found one convenient solution that using npm.

First install the three-full package with npm

npm install --save three-full

Use the following syntax to import three.js (including examples)
import * as THREE from 'three-full'

It’s not recommended to use three-full anymore since the package is not maintained by the core developers of three.js. The releases are often outdated. This is especially a problem if you encounter bugs.

TBH, since three.js provides all examples files as ES6 modules, three-full has lost its purpose and should be archived.

1 Like