How to get the mouse position using three.js?

Question

Hi I'm using IcosahedronGeometry. In that I'm adding CircleGeometry to each of its vertices. So now my requirement is when the mouse is moved towards the circle, the circle should sense the mousemove and it should move towards the mouse. So for that i have created a RingGeometry around the circle. So if the mouse move towards the ring, circle should sense the position of the mouse.

But I'm unable to get the mouse position. I'm using raycaster, is there any other alternative to find the position of the mouse?

score 7 · Answer 1 · answered Jun 16 '15 at 14:48

7

Raycaster is standard way for this:

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse.clone(), camera );   

var objects = raycaster.intersectObjects(scene.children);

http://jsfiddle.net/nhvff8ra/6/

answered Jun 16 '15 at 14:48

stdob--

28,222
5
58
73

thank you.. ur example is slightly related to my requirement... it helps me – disciple Jun 16 '15 at 17:17
1

Can you explain what's happening here? Where did the equation for mouse position arise from? – Rylan Schaeffer Jan 30 '22 at 18:43
@RylanSchaeffer The equation returns a value between -1 and 1 while 0 is the center of the window. – Norman Feb 07 '22 at 17:25

score 2 · Answer 2 · answered Jun 16 '15 at 07:57

I did the following (some parts are omitted for brevity):

// Use of the Raycaster inspired by  webgl_interactive_cubes.html, in the THREE.js project examples directory
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2()
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousedown', onMouseDown, false);


function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function manageRaycasterIntersections(scene, camera) {
    camera.updateMatrixWorld();
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {

    } 
    else {

    }
}

function onMouseDown(event){
   customLog("mouse position: (" + mouse.x + ", "+ mouse.y + ")");
}

Take a look at this for the complete code

Hi.. thank you for ur answer.. But what about z-axis?? I want z-axis location also.. — disciple, Jun 16 '15 at 09:56
Hi. The position of the mouse is intrinsically 2-dimensional and relative to the screen. To get a 3D point based on where the mouse pointer is, you can use the raycaster and its intersectObjects function (see the manageRaycasterIntersections in my sample and take a look at the source code of [this example](http://threejs.org/examples/webgl_interactive_cubes.html) for further detail) — Evil Toad, Jun 16 '15 at 10:04

score 1 · Answer 3 · answered Jun 16 '15 at 07:52

1

Are you looking for something like this?

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval("checkCursor()", 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

answered Jun 16 '15 at 07:52

Collin

914
1
9
30

I'd suggest to read about what is three.js before posting. – Martin Melichar Mar 08 '23 at 20:31

score 0 · Answer 4 · edited Aug 02 '22 at 08:16

If your render is in a window or block with example absolute position the window.innerWidth etc. would give you wrong coordinates and attaching mouse move to entire window is just a waste of memory.

It's much better to do something like this:

const renderBlock = document.querySelector('#threeJSRenderWrapper');
let renderWidth = renderBlock.offsetWidth;
let renderHeight = renderBlock.offsetHeight;
const camera = new THREE.PerspectiveCamera(60, renderWidth / renderHeight, 0.01, 100000);

// this part you can put to window resize function
camera.aspect = renderWidth / renderHeight;
camera.updateProjectionMatrix(); 
renderer.setSize( renderWidth, renderHeight );

const pointer = new THREE.Vector2();

renderBlock.addEventListener( 'pointermove', onPointerMove );

function onPointerMove( event ) {

    // calculate pointer position in normalized device coordinates
    // (-1 to +1) for both components   
    pointer.x = ( event.layerX / renderWidth ) * 2 - 1;
    pointer.y = - ( event.layerY / renderHeight) * 2 + 1;
}

// and the rest of the code for mouse intersection or wathever

The event.layerX and event.layerY will give you correct coordinates of the block that the mousemove event is attached to.

How to get the mouse position using three.js?

4 Answers4

Linked