Three.js StereoEffect 显示跨越 2 只眼睛的网格 [英] Three.js StereoEffect displays meshes across 2 eyes

问题描述

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

I have a THREE.js scene using StereoEffect renderer. However, when I add new meshes to the scene, they are displayed across the two eyes instead of being duplicated for each eye. I believe THREE.js is supposed to do it automatically and I don't have to duplicate them myself ? (I tried duplicating them but it is a lot of annoying calculation and I could not manage it)

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

My meshes are actually transparent planes, and I add a DOM element on the top of them to have a flat display.

示例

推荐答案

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

OK I finally found it ! I tried putting back on a texture (not invisible) on my meshes and I discovered the problem.

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

When we use StereoEffect and we see that our mesh is duplicated on both views, it is actually an illusion : THREE.JS puts an image there, but the actual object is invisible, put exactly at the middle of the two images ! See image here : explanation

例如，如果您使用 raycaster，它会告诉您没有看到网格的交叉点，而是在从左图到右图的线的中心！网格位置相同.

If you use raycaster for instance, it will tell you there's not an instersection where you see the mesh, but at the center of the line from left image to right image ! Same for mesh.position.

所以我所做的是保持一个不可见的纹理，并创建两个 div 标签，我将它们对称地放置在网格位置周围:

So what I did was keep an invisible texture, and create two div tags that I placed symmetrically around the mesh position :

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.

That gives the illusion that my mesh is there, put it is just empty divs.

然后，为了检查是否有人点击了我的网格，我做了相反的事情:在将其发送到 raycaster 之前，我返回到网格的真实位置！

Then, to check if someone clicks on my mesh, I do the opposite : I go back to the real position of the mesh before sending it to 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 !!!
        }
    }

而且它工作得很好！！希望这可以帮助其他人，我在这里真的很绝望;)

And it works perfectly fine !! Hope this can help someone else, I was getting really desperate here ;)

这篇关于Three.js StereoEffect 显示跨越 2 只眼睛的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！