TypeError: Class constructor EventDispatcher cannot be invoked without 'new'
with three.js version 0.128.0

After digging the docs, I found no option to filter objects in the scene to do raycasting. When my scene have some big mesh, the performance is not good. If I do the raycast manually, instead of

raycaster.intersectObjects(this.scene.children, true)

I will do

raycaster.intersectObjects(objectsShouldListenToEvent, true)

So I think an option such as func filterSceneChildren or array objectsShouldListenToEvent is good for cases like mine

When you try to build three.interaction on the static site generator like GatsbyJS,
"WebpackError: ReferenceError: window is not defined" error occurred
because the Node doesn't have 'window'.

With this tool, I can normally listen for mouse events for the model.
But i don't know how to judge a click on a blank scene .

    const pointer = new THREE.Vector2();
    document.addEventListener( 'pointermove', onPointerMove );
    function onPointerMove( event:any ) {

        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }
    const nDiv:any = contain3DEl.current;
    nDiv.addEventListener('click', ()=>{
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera( pointer, camera );
        const intersects = raycaster.intersectObjects( modelNodeList );
        if ( intersects.length <= 0 ) {
            setSelectedModelObject(null);
            props.onModelNodeSelected('');
            PubSub.publish('menu_item_cancel_selected', '');
        }
    })

like intersects<=0 effect

@jasonChen1982

handlers attached to THREE.Sprites do not fire

Installing with NPM now gives this error:
Any thoughts ?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/three
npm ERR!   three@"^0.117.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer three@"^0.89.0" from [email protected]
npm ERR! node_modules/three.interaction
npm ERR!   three.interaction@"" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I want to get the mouse 2d coord in mouseover event.

Hi.

I want to understand the event behaviour of three.interaction.
And I want to fire events by script into the scene (click and mousedown/mouseup).
But just click events will be recognized.

var element = document.getElementById("webgl");
element.addEventListener('mousedown', function(ev) {
    console.log(ev);
});
element.addEventListener('click', function(ev) {
    console.log(ev);
});

var pageX= 493, pageY= 730;
var screenX= 3949, screenY= 493;
var ev;

// Recognized and animated
ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, true, window, 0, screenX, screenY, pageX, pageY, false, false, false, false, 0, null);
element.dispatchEvent(ev);

// Not recognized
ev = document.createEvent("MouseEvents");
ev.initMouseEvent("mousedown", true, true, window, 0, screenX, screenY, pageX, pageY, false, false, false, false, 0, null);
element.dispatchEvent(ev);

Both events are printed in the debug console, but the threejs scene doesn't catch the mousedown event.

Hi,

thanks for the fantastic tool, can you please help me to figure out how to identify a double click event?
When I interact with objects I usually get a single click but I now need to differentiate when the user double click (+ hold) for example when using OrbitControls for moving around the camera.

1. Click event on an object (OK)
2. Click event anywhere outside of an object (OK)
3. How do I know if the user single-clicked with the intention to interact with the object or rather double-clicked in to use the OrbitControls instead?

I was thinking of measuring the time between each single click event in order to figure out if it is a double click but it sounds a bit archaic... any idea?

Thanks a mill!

Only see documentation on support for nodejs based projects, but it would be very helpful and could broaden the reach of this package if support for including an a minified script in JavaScript was added as well.

I downloaded the latest three.min.js from https://threejs.org/ and am getting this error.

Uncaught TypeError: class constructors must be invoked with 'new'
    InteractionManager http://localhost:3000/js/three.interaction.js:715
    Interaction http://localhost:3000/js/three.interaction.js:4470
    <anonymous> http://localhost:3000/js/myfile.js:49
[three](http://localhost:3000/js/three.interaction.js)

当2个物体重叠时，2个物体的onclick事件都会触发，如何只触发离相机最近的物体的事件

Sometimes things are clearly detected,
These objects is children of listening object.

But returned hit is false.

我正用使用您的three.interaction库，有个问题想请教下，在一个页面中我有两个场景（scene）每个场景添加一个相机，2个场景共用一个渲染器，我想与两个不同的场景中的物体交互，但new Interaction实例时只能传一套场景和相机，想请问下有好的解决办法吗？

• touchmove trigger when this mesh had touchstart.
• touchend trigger outside mesh, this mesh will not trigger touchend.

Hi @jasonChen1982 , thanks for this lib!
I ran into a problem of scrolling over canvas area on touch devices using only very basic setup.
Here is the code: https://jsfiddle.net/2d54rvxk/11/
Is it possible to let the event to propagate further without any weird workarounds (such as updating scroll position in callbacks)?

他可以绑定到模型上吗？

mesh.off('click', function (ev) { console.log('remove event') }

remove event not working.

Thanks sir, it's a really cool package. Wondering if you have plan to support it in typescript.

% npm install -S three.interaction

added 2 packages, and audited 3 packages in 5s

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

% npm audit
npm audit report

three <0.125.0
Severity: high
Denial of service in three - GHSA-fq6p-x6j3-cmmq
No fix available
node_modules/three
three.interaction *
Depends on vulnerable versions of three
node_modules/three.interaction

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

I need to fix one bug, hotspots are not active in mobile devices (not clickable in my project via your module). If necessary, I will pay a small fee for services.

cube.on is not a function in threejs r110 and react ^16.8.6

It's the bug img.

It's import three.interaction.js

@jasonChen1982

I do not see a license associated with the repository.

Your lib is fantastic and really powerful.

We are loading ES6 directly into modern browsers for optimized loading with Import promise etc.
Noticing that three.interaction causes error when used directly.

Example:

<script type="module">     
    import * as THREE from "./node_modules/three/build/three.module.js";
    import { Interaction } from "./node_modules/three.interaction/build/three.interaction.module.js";
</script>

Produces error:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

As incremental loading becomes more popular with new browser import Promise, bundle based approach will become less appealing.

Any thoughts?
Is there a way to use /three.interaction.module.js directly in a browser ?
Perhaps a version on https://www.unpkg.com/ ?
Maybe there is a way to update / extend to work with bundlers and directly at the same time?

Your library is very useful to me, but there are still some problems:
1, Hope to be able to increase double-click events and right-click events;
2. When adding an event to the Scene, the event should be triggered even if the object is not hit, which is helpful for some logical processing of the program;

Hi!
I've come across an error where click events don't work in the latest version of Firefox. Seems to work in other browsers though.

You can replicate it by:
Using Firefox Quantum
Go to https://jasonchen1982.github.io/three.interaction.js/examples/interaction/
Check the console as you try the 'click'. It doesn't register and an error appears in the console.

I'm not able to use this lib in Angular2. I keep getting this error: Property 'on' does not exist on type 'Mesh'
My code:
var interaction = new Interaction(this.renderer, this.scene, this.camera)
var cube = new THREE.Mesh(
new THREE.BoxGeometry(3, 3, 3),
new THREE.MeshPhongMaterial({ color: 0xffffff })
);
this.scene.add(cube);
cube.on('pointerdown', function(ev) {
console.log('pointerdown');
});

When I called the destroy method, an error occurred

three.interaction.module.js:2426 Uncaught TypeError: this.removeAllListeners is not a function
at Interaction.destroy (three.interaction.module.js:2426)

When I try to use,
const interaction = new Interaction(renderer, scene, camera);

I'm getting Uncaught TypeError: Interaction is not a constructor in chrome console.

How to ignore the hidden mesh when the mouse detects it .
ignore the mesh with visible===false

I've followed documentation for adding click listener on gltf object , but event not triggered .
`loader = new GLTFLoader()

loader.load(url, gltf => {
  model = gltf.scene
  model.scale.set(scale, scale, scale)
  model.rotation.x = rotation
  model.position.x = x
  model.position.y = y
  model.position.z = z

  root.add(model)
  model.on('click', function(ev) {
   console.log(' model just clicked ! ');
   callback();
  });
})`

would you please tell me where am i doing wrong ?

Interesting project. It works quite well with a cube. But when I click on a line, it fires every time I click. No matter where. How is that?

如题。

exceptional case, when viewport was not full screen
calculate coordinates with viewport not canvas dom

点击mesh周围也会触发？ 求解答

I install it into vue.js project, but not work