Threejs raycaster only works super close

three.js

Solution

Setting the mouse position this way is more accurate.

        var rect = renderer.domElement.getBoundingClientRect();
        mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
        mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;

Problem

I was following mrdoobs examples of how to use raycasting to handle clickable objects. I have also looked at all of the many many similar questions and have tried countless things. The raycasting works... If I am at a distance of less than 1. The Raycaster is set to near 0 and far infinity though (defaults). I haven't seen any code examples where distance was set. I am hoping for another pair of eyes. ``` // snippet glow.clickables = []; var cubeGeo = new THREE.CubeGeometry(2, 2, 2); cubeGeo.computeFaceNormals(); var cube = new THREE.Mesh(cubeGeo, redmat); cube.position.y = 10; cube.position.x = 0; cube.position.z = -12; cube.overdraw = true; glow.Vis.scene.add(cube); glow.clickables.push(cube); onclick_(); var onclick_ = function() { $('#world').on('mousedown', function(e){ var mouseX = (event.offsetX / $('#world').width()) * 2 - 1; var mouseY = - ( event.offsetY / $('#world').height()) * 2 + 1; var vector = new THREE.Vector3(mouseX, mouseY, 0.1); //what should z be set to? //console.info(vector); // A vector between -1,1 for both x and y. Z is whatever is set on the line above projector.unprojectVector(vector, glow.Vis.camera); var conts = glow.Vis.controls.getObject().position; // control 3dObject which the camera is added to. var clickRay = new THREE.Raycaster(conts, vector.sub(conts).normalize()); var intersects = clickRay.intersectObjects(glow.clickables); console.info(intersects.length); if(intersects.length > 0) { alert("Click detected!"); } }); } ```

Original source