Three.js StereoEffect 显示 2 只眼睛的网格答案

【问题标题】：Three.js StereoEffect displays meshes across 2 eyesThree.js StereoEffect 显示 2 只眼睛的网格
【发布时间】：2018-06-25 20:21:52
【问题描述】：

我有一个使用 StereoEffect 渲染器的 THREE.js 场景。但是，当我向场景中添加新网格时，它们会显示在两只眼睛上，而不是为每只眼睛复制。我相信 THREE.js 应该自动完成，我不必自己复制它们？（我尝试复制它们，但这是很多烦人的计算，我无法管理它）

我的网格实际上是透明平面，我在它们的顶部添加了一个 DOM 元素以进行平面显示。

Illustrating Example

【问题讨论】：

标签： three.js

【解决方案1】：

好的，我终于找到了！我尝试在网格上放回纹理（不是不可见的），但我发现了问题。

当我们使用 StereoEffect 并看到我们的网格在两个视图上重复时，它实际上是一个错觉：THREE.JS 将图像放在那里，但实际物体是不可见的，正好放在两个图像的中间！在此处查看图片：explanation

例如，如果您使用 raycaster，它会告诉您看到网格的位置没有交叉点，而是在从左图到右图的直线的中心！与 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';
}

这给出了我的网格在那里的错觉，说它只是空的 div。

然后，为了检查是否有人点击了我的网格，我执行相反的操作：在将其发送到 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 !!!
        }
    }

而且效果很好！！希望这可以帮助其他人，我在这里真的很绝望;）

【讨论】：