好吧我终于找到了!我尝试在网格上放回纹理(不是不可见的),然后我发现了问题。
当我们使用 StereoEffect 时,我们看到我们的网格在两个视图上都是重复的,它实际上是一个illusion:THREE.JS 在那里放置了一个图像,但是actual物体是不可见的,正好放在两个图像的中间!
请参阅此处的图片:解释 https://i.stack.imgur.com/ZRIXe.png
例如,如果您使用光线投射,它会告诉您没有交叉点see网格,但位于从左图像到右图像的线的中心!与 mesh.position 相同。
所以我所做的就是保留一个不可见的纹理,并创建两个 div 标签,将它们对称地放置在网格位置周围:
var middleX = window.offsetWidth/2;
//left div
if(this.element.id.indexOf("-2") == -1){
var posL = coords2d.x - middleX/2;
this.element.style.left = posL + 'px';
//Hide if gets on the right part of the screen
if(posL > middleX) this.element.style.display = 'none';
}
//right div
else{
var posR = coords2d.x + middleX/2;
this.element.style.left = posR + 'px';
//Hide if gets on the left part of the screen
if(posR < middleX) this.element.style.display = 'none';
}
这给出了illusion我的网格就在那里,只是空的 div。
然后,为了检查是否有人点击我的网格,我做了相反的事情:我回到real在将网格发送到 raycaster 之前先确定网格的位置!
function hasClicked(e) {
e.preventDefault();
var clientX,clientY;
//GET REAL POSITION OF OBJECT
var middleX = window.offsetWidth/2;
//Right screen
if(e.clientX>middleX){
clientX = e.clientX - middleX/2;
}
//Left screen
else {
clientX = e.clientX + middleX/2;
}
clientY = e.clientY; //Keep same Y coordinate
//TRANSFORM THESE COORDS ON SCREEN INTO THREE.JS COORDS
var mouse = new THREE.Vector2();
mouse.x = (clientX / window.innerWidth) * 2 - 1;
mouse.y = -(clientY / window.innerHeight) * 2 + 1;
//USE RAYCASTER
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(arrowManager.storage);
if (intersects.length > 0) {
//It works !!!
}
}
而且效果非常好!希望这可以帮助别人,我在这里真的很绝望;)