在Three.js中进行附近剔除，尽管摄影机未靠近面

在Three.js中切换到对数深度缓冲区后，我遇到了一个问题。除了以下照片中描述的附近的地面清理外，其他一切都运行良好：

正如您所看到的，相机明显高于地面。显示的字符框离地面约2个单位，我的相机设置如下：

  var WIDTH = window.innerWidth
    , HEIGHT = window.innerHeight;
  var VIEW_ANGLE = 70
    , ASPECT = WIDTH / HEIGHT
    , NEAR = 1e-6
    , FAR = 9000;
  var aspect = WIDTH / HEIGHT;
  var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
  camera.rotation.order = 'YXZ';  

因此，我的

NEAR

参数远未接近2，即相机与地面之间的距离。你可以在第二张图片中看到，我甚至用我的PointerLock控件向上移动相机，但仍然遇到了这个问题

有人能诊断出我的问题吗

我还测试了我的问题，看看这个错误是否也发生在静态相机上。是的

此外，这个问题只发生在对数深度缓冲区中，因为默认深度缓冲区不会发生

我将相机作为

控件的子对象，对象定义如下：

controls = new THREE.PointerLockControls(camera);
controls.getObject().position.set(strtx, 50, strtz);
scene.add(controls.getObject());
camera.position.z += 2;
camera.position.y += .1;  

以下是PointerLock控件的相关代码：

var pitchObject, yawObject;
var v = new THREE.Vector3(0, 0, -1);


THREE.PointerLockControls = function(camera){

    var scope = this;

    camera.rotation.set(0, 0, 0);

    pitchObject = new THREE.Object3D();
    pitchObject.rotation.x -= 0.3;
    pitchObject.add(camera);


    yawObject = new THREE.Object3D();
    yawObject.position.y = 10;
    yawObject.add(pitchObject);


    var PI_2 = Math.PI / 2;

    var onMouseMove = function(event){

        if (scope.enabled === false) return;

        var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

        yawObject.rotation.y -= movementX * 0.002;
        pitchObject.rotation.x -= movementY * 0.002;

        pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );

    };

    this.dispose = function() {

        document.removeEventListener( 'mousemove', onMouseMove, false );

    };

    document.addEventListener( 'mousemove', onMouseMove, false );

    this.enabled = false;

    this.getObject = function () {

        return yawObject;

    };

    this.getDirection = function() {

        // assumes the camera itself is not rotated

        var rotation = new THREE.Euler(0, 0, 0, "YXZ");
    var direction = new THREE.Vector3(0, 0, -1);

        return function() {

            rotation.set(pitchObject.rotation.x, yawObject.rotation.y, 0);
            v.copy(direction).applyEuler(rotation);

            return v;

        };

    }();

};

您还将注意到，只有地面被剔除，而不是其他对象


编辑：

我创建了一个孤立的环境，显示了更大的问题。在第一幅图中，我有一个平面
PlaneBufferGeometry
，它有400个宽度和高度段，由
var g=new THREE.PlaneBufferGeometry（380380400400）定义。即使非常接近曲面，也不存在剪裁：


但是，如果我只提供1个段，
var g=new THREE.PlaneBufferGeometry（380，380，1，1），剪辑已存在


我不确定这是否是Three.js/WebGL中的意图，但似乎我需要做些什么来解决它。
我不认为这是一个bug，我认为这是不同设置中depthbuffer的一个功能。在右边，depthbuffer无法决定“显微镜”中的字母和球体之间的关系。这是因为它在非常小的比例下具有较低的精度，并且开始在一个对象和另一个对象之间进行舍入，并且倾向于绘制顺序而不是z深度

这总是一种权衡。如果你想放弃这个问题，你可以尝试提高你的场景的整体比例，这样相机的“近距离”就不会离某个东西太近，以至于可以取整它-所以只需在对数z缓冲区的指数模型中不会取整的数字范围内工作

还有一个问题——蓝色是如何定义的，因为也许你看到的不是因为太近而剪裁，而是混淆了蓝色和地面是否更近。如果它只是一个蓝色的盒子，包含了所有的东西，你可以试着让它更大，离地面更远

编辑：
好吧，这看起来应该行得通。所以我会开始寻找边缘案例。如何更改场景以使其正常工作？你能做些什么让其他事情开始崩溃


尝试将景观向下/向上移动很远（当你抬头看而不是向下看时，问题是否会持续存在，当它无疑离你很远时，问题是否会持续存在？）
尝试旋转风景
试着改变摄像机的视野
尝试将摄影机更改为远平面
尝试将平面附近的摄影机从1e-x符号更改为.000001、.0001、.01、.1等。查看其效果
console.log在渲染功能中记录摄影机对象，并确保fov、近距离、远距离等与设置时的设置相同，并且不会被覆盖并重置为默认值。检查它在chrome的开发者工具中打印出来的内容，你可以浏览整个对象，检查位置，父名称，所有这些东西

基本上我看不到明显的错误，所以我猜这是一个很难发现的东西，或者它正按照它应该的方式工作。弄清楚你能做些什么来改善效果/让它变得更糟，这将明确一个方向

调试的一个很好的经验法则是尝试将事情发挥到极致，而不尝试修复它，或者保持代码符合其目的，然后看看它以何种方式进一步破坏/更改。当你发现什么东西时再报告。
谢谢你的回复。蓝色实际上只是背景，而不是盒子，所以这不是问题所在。至于我场景的比例，它看起来相当大，因为你看到的角色有2个单位的高度。显示你定义相机位置的部分，并将其插入扫描。我知道你在哪里定义你的视野，但它是孩子还是有任何规模的东西？它是动态移动的吗？我已经修改了我的问题以包含控件和摄影机父对象。再次感谢您的努力！我会继续关注这个问题并报告我的发现。我已经用一些有趣的发现更新了我的问题。下次你想更改你的问题，只需编辑它。当你删除原始问题时，你也删除了评论，因此我无法阅读或回复你的回复。很抱歉，我不知道也可以编辑标题。问题仍然存在，因为相机也是静态的。因此，是否可以将其设置为2段而不是1段？是的，但这可能还不够。我会把结果告诉你的。这只发生在对数深度缓冲区中，而不是线性缓冲区，所以您认为这可能是三个或webgl的错误吗？