Threejs问题与raycaster相交 [英] Threejs issue with raycaster intersection

问题描述

我编写了一个代码来与某个对象相交并且工作正常，直到我将画布与其他 div 放在 html 文档中.现在对象上没有交集.在这个 Live 示例中:

每次在画布上处理鼠标时，我都会使用此代码.

如果您有一个更简单的测试用例，我会尝试为您模拟整个解决方案.

I wrote a code to intersect some object and worked fine until I put canvas with other div in html document. Now there are no intersection on the object. In this Live example:http://www.felpone.netsons.org/web-threejs/index1.html if you select on the right top the button cross and try to move the shape you can't. You can move shape if you put your mouse a little bit at right of the shape. So the intersection is completely wrong. I tried some solutions posted on stackoverflow but doesn't work. Can anyone help me to understand please? I am desperate.

In this other live example you can see how it should work : http://www.felpone.netsons.org/web-threejs/. I tried with other solutions written on Stackoverflow but without result.

Maybe can depend by mouse coordinates:

mouse2D.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
mouse2D.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;

Here you can see the javascript code : http://www.felpone.netsons.org/web-threejs/stereos.js

Maybe can depend by:

I noticed that there are two differents dimension for canvas as you can see in this screenshot:

解决方案

event.clientX is relative to the browser window. You want the offset relative to the canvas. So you have to select the offset for each element containing the canvas.

This is some nice clean code that will do what you want: https://stackoverflow.com/a/5932203/2195930

I use this code everytime I deal with a mouse over a canvas.

If you had a simpler test case, I'd try to mock up the whole solution for you.

这篇关于Threejs问题与raycaster相交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！