Importing GPUPicker as a module?

[mikemklee]

Hi, first of all, thank you for creating this module. Your demo looks amazing.

I wanted to use this in my own application, but I am having difficulty including the module.

I am using React to build my application, so I am using the ES6 import/export syntax to include my modules. However, when I try to do something like

import './GPUPicker.js,

I get an error saying that

'GPUPicker' is not exported from 'three' (imported as 'THREE')

I am not sure how familiar you are with React, but I think what is happening is that the THREE instance that my React component is referring to, and the one that GPUPicker is referring to are not the same.

Including the module in a plain-old <script> tag would of course work because the GPUPicker module would be in the same scope as the rest of the code.

However, I am having trouble here because my application is divided into multiple parts.
Is there a way I can import the module using the ES6 syntax?

[brianxu]

Hi, this library was developed with old threejs example style so it relies on a global variable THREE.
I think if you add this before you import the GPUPicker module,
import * as THREE from 'three';
window.THREE = THREE;
It might work.

[mikemklee]

Thank you for the reply. I managed to work around this by sending in the calling scope into the module. However, now I am stuck at another problem where I cannot do this.pickingScene = scene.clone() because my geometry does not have an index or something..

[mikemklee]

The error message i get is

TypeError: Cannot read property 'clone' of undefined

If I follow the stack trace, I end up at BufferGeometry.copy(), where

if ( index !== null ) {
    this.setIndex( index.clone() );
}

this fails. I think this may be actually be an issue with THREE.BufferGeometry, but I will need to investigate further.

If you have a hunch on what may be the issue here, please let me know!