Clientx and window.innerWidth Question:

I’m using @prisoner849 's hover over vertice code.

I have a canvas that is not the entire display. Right now it is only 1000 / 800 and the mouse is a good distance from the object when it shows the vertices being selected.

How do I use this code to dial it to my renderer size?

function onMouseMove(event) {
    m.x = (event.clientX / window.innerWidth) * 2 - 1;
    m.y = -(event.clientY / window.innerHeight) * 2 + 1;
    rc.setFromCamera(m, camera);
    intscs = rc.intersectObjects(objs, false);
    if (intscs.length > 0) {
        let o = intscs[0];
        poi.copy(o.point);
        o.object.worldToLocal(poi);
        setPos(o.faceIndex);
        o.object.localToWorld(pos);
        marker.position.copy(pos);
    }
}```

Try this

m.x = (event.clientX / screen.innerWidth) * 2 - 1;
m.y = -(event.clientY / screen.innerHeight) * 2 + 1;
rc.setFromCamera( { 
x:  2*event.offsetX / event.target.clientWidth - 1,
y: -2*event.offsetY / event.target.clientHeight + 1 }, camera );

@Chaser_Code

Forgot to mention…My canvas is tucked up in the upper right of the page. I’ll try it.

@rrrr_rrrr I’ll try it this evening.

Neither of those worked….no change.

I hope I’m not forced to do a standard canvas to get this to work.

You need to attach it to canvas.

If u mean scrollbar then or changed canvas position, then may be some this:

var mouse_x=event.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-document.documentElement.clientLeft;
var mouse_y=event.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-document.documentElement.clientTop;
m.x = (mouse_x / window.innerWidth) * 2 - 1;
m.y = -(mouse_y / window.innerHeight) * 2 + 1;

Need codepen.

@rrrr_rrrr , I mean it was the same result that I had before. It’s like 10 units away from the vertices.

@Chaser_Code No, I meant use a standard canvas size like 50% of the screen or something. so it is easier to get it. I also have a 25px margin on each side of the canvas in the upper right.

Are you sure this function is attached to canvas?

 window.addEventListener(

Should be

 canvas_ref.addEventListener(

If that is the case, I strongly suggest you follow this wise man’s advice.

1 Like

@rrrr_rrrr

Its @prisoner849’s example.

Sounds like it’s my fault that the code doesn’t work for you :slight_smile:
Any chance to provide a minimal editable live code example, that demonstrates the problem?

Lololol… @prisoner849 I wasn’t meaning that…lolol

I will make a code pen to recreate my issue. It might take some time.

Your logic is sound. The problem is OP has difficulty following some simple solutions.
I didn’t want to post these, but is seems to be wasted if not shared.
test_prisoner849.html (3.3 KB)
test_prototype-1.html (2.7 KB)
I’m done here!!

@rrrr_rrrr

My canvas isn’t right in the middle. otherwise it would work out of the box. It’s tucked into the upper right corner with a margin of 25px.

Of course it works if the canvas is centered…or the entire display.

@rrrr_rrrr , @prisoner849 , @Chaser_Code

Here is a codepen. https://codepen.io/J450NP13/pen/KKXBNxv

@J450NP13 you can do this:

const mouse = new THREE.Vector2();
function onMouseMove(event) {
  let canvasBounds = renderer.getContext().canvas.getBoundingClientRect();

  mouse.x = ( ( event.clientX - canvasBounds.left ) / ( canvasBounds.right - canvasBounds.left ) ) * 2 - 1;
  mouse.y = - ( ( event.clientY - canvasBounds.top ) / ( canvasBounds.bottom - canvasBounds.top) ) * 2 + 1;
  
  rc.setFromCamera(mouse, camera);
  intscs = rc.intersectObjects(objs, false);
  if (intscs.length > 0) {
    let o = intscs[0];
    poi.copy(o.point);
    o.object.worldToLocal(poi);
    setPos(o.faceIndex);
    o.object.localToWorld(pos);
    marker.position.copy(pos);
  }
}

BTW this question has been answered many times on the forum already, for example:

1 Like

IMO using window.innerWidth / window.innerHeight pretty much anywhere is an antipattern since it comes with the hidden assumption that the canvas is full screen. As soon as you make a canvas that is not fullscreen/centered then you’ll run into issues like this.

The three.js examples are guilty of this and people copy the code so it gets propagated everywhere. It would be better if something like container.clientWidth / container.clientHeight was used instead (or canvas instead of container).

2 Likes

@looeee

Yeah, I didn’t really know what to search for. I appreciate your help.

1 Like