brianxu / gpupicker

a GPU based picking class for ThreeJS lib

GPUPicker

========

color picking based approach for fast searches

The goal of this project is to implement a fast way to select an object in the scene for the THREE.js WebGL library.

This build is built up on THREE.js ~r92

Features (+ Example)

• support points/lines/triangle meshes
• retunr intersection object like the one returned from raycaster
• Fast! See the example to compare the framerates bettween raycaster and GPUPicker

TODOs

• A cheap way to update the picking scene instead of set the scene
• Despose picking geometry when the rendering geometry is disposed

Usage

Download the script and include it in your html after the THREE.js WebGL library.

<script src="js/three.min.js"></script>
<script src="js/GPUPicker.js"></script>

Initialize

gpuPicker = new THREE.GPUPicker({renderer:renderer, debug: false});
gpuPicker.setFilter(function (object) {return true;});
gpuPicker.setScene(scene);
gpuPicker.setCamera(camera);

Pick object

An example:

function onMouseMove( e ) {
    if(e.which != 0)
        return;
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    var raymouse = new THREE.Vector2();
    raymouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    raymouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( raymouse, camera );
    var intersect;
    intersect = gpuPicker.pick(mouse, raycaster);
}

Update

When the scene camera has some change set the .needUpdate to be true to rerender the picking scene.

gpuPicker.needUpdate = true;

When the window size changes, resize the texture.

gpuPicker.resizeTexture( newWidth, newHeight );

When the scene changes, reset the scene.

gpuPicker.setScene(scene);

##Example

gpupicker's Issues

WARNING: intersectionPoint missing

Hi! Great library, but i have a problem. I have copied files from your example. All works very vell, but i have warning 'WARNING: intersectionPoint missing' and error 'Uncaught TypeError: Cannot set property 'object' of undefined'. what can i do?

Issue with orthographic camera

Hello! I use your library with orthographic camera. Its works, but not correct. The object picks not in all its width or height. Sometimes its works only with half of object. How its must work? Thank you for your answer

Importing GPUPicker as a module?

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?

Use this library with meshes

Hi there,

I have around 20 meshes with img maps as a texture. All of them are a plane.

Could I use this library to detect intersections of the mouse as it moves, with all these meshes?

I made it work, but there is no way for me to find the Object that is "under" the mouse when an intersection happens.

I opened a question on Stackoverflow, and I come here asking for kind help because I have been stuck for days.

Thanks a lot,

https://stackoverflow.com/questions/48691642/three-js-raycaster-find-intersections-as-mouse-moves/48693593?noredirect=1#comment84413010_48693593