CODEWITHSUNDEEP
javascriptthree.js
disciple
disciple

Reputation: 262

How to get the mouse position using three.js?

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?

Upvotes: 10

Views: 26184

Answers (4)

Mironek
Mironek

Reputation: 11

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.

Upvotes: 0

stdob--
stdob--

Reputation: 29172

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/

Upvotes: 8

Evil Toad
Evil Toad

Reputation: 3242

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

Upvotes: 2

Collin
Collin

Reputation: 944

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

Upvotes: 1

Related Questions