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 5 · Answer 1 · answered Jun 16 '15 at 14:48

5

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--

26,985
5
54
67

thank you.. ur example is slightly related to my requirement... it helps me – disciple Jun 16 '15 at 17:17
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 3 · 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

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);
}

How to get the mouse position using three.js?

3 Answers3

Linked