Question

我有一个＆＃34; 2D＆＃34;场景（Z向上）与平面几何形状一样，游戏竞技场设置如下：

    var arenaMesh = new THREE.Mesh(
        new THREE.PlaneGeometry(SceneWidth, SceneHeight),
            new THREE.MeshLambertMaterial({
                map: arenaTexture,
                emissive: 0xffffff
            }));

    arenaMesh.position.x = SceneWidth / 2;
    arenaMesh.position.y = SceneHeight / 2;
    arenaMesh.position.z = 0;
    arenaMesh.receiveShadow = true;

游戏对象设置如下（一个非常扁平的盒子）：

    var size = 20;
    var bodyMesh = new THREE.Mesh(
        new THREE.BoxGeometry(size, size, 0.01),
        new THREE.MeshLambertMaterial({
            map: bodyTexture,
            alphaTest: 0.65,
            emissive: 0xeeeeee
        }));

    bodyMesh.position.x = x0;
    bodyMesh.position.y = y0;
    bodyMesh.position.z = 5.0;
    bodyMesh.castShadow = true;

由于我之前遇到过一些阴影问题，我在这里使用BoxGeometry。

现在，问题是这在我的桌面（FF和Chrome）上工作得很好：我的假2D游戏对象被渲染，并在游戏领域投下阴影。但是，在Nexus 7上，我只能看到物体的阴影！经过一些调试后，我注意到如果我将游戏对象的z位置设置为更大的值，比如z = 15.0就会被渲染。不幸的是，这是不可接受的，因为那时物体似乎在飞行。将游戏竞技场平面降低到例如z = -15.0具有相同的效果。到底能造成什么？我似乎精确度在某种程度上完全失去了。为什么阴影仍然正确？

Answer 1

根据我的问题中添加的评论，该问题的解决方案是将zNear设置为更高的值。显然，zNear和zFar的比率会影响Z缓冲区的精度，从而解决Nexus 7上的问题。

ThreeJS：Chrome for Android中奇怪的对象剪辑

1 个答案: