Question

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

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

Illustrating Example

Answer 1

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

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

例如，如果你使用raycaster，它会告诉你没有一个instersection你看网格，但是从左图像到右图像的线的中心！ 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 !!!
        }
    }

它完美无缺!!希望这可以帮助别人，我在这里真的很绝望;）

Three.js StereoEffect在2只眼睛上显示网格

1 个答案: