How to load PCDLoader in Vue fasion?

Questions
,
1

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.

2

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.

3

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'

4

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