问题：
如果我将相机(以及平面网格)移动到一定范围,网格会突然消失.
我意识到平面的消失和大小之间似乎存在关系,即平面越大,我就越能在平面网格消失之前移动相机.

此外,在我的测试场景中,平面网格仅在负x轴,正x轴或负z轴上移动时消失.在正z轴上移动时不会消失.

我认为它与某种削波有关,但可能是错误的.重新计算平面网格的边界框无效.

有任何想法吗？

干杯

小提琴：
我创建了一个显示问题的小提琴：http://jsfiddle.net/p8wZ6/10/

在小提琴中,我添加了一个额外的盒子网格,以更好地可视化相机实际移动.
– 要更改相机移动的轴(默认为负z轴)(取消)勾选方法中的相应代码行.
– 要更改平面的大小,请更改createPlane方法中的大小值.

源代码着色器：

<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        vec4 pos = vec4( position,1.0 );

        vec4 wPos = modelMatrix * pos;

        wPos.x += cameraPosition.x;
        wPos.z += cameraPosition.z;

        // standard
        // vec4 pPos = projectionMatrix * modelViewMatrix * pos;
        // keep fixed
        vec4 pPos = projectionMatrix * viewMatrix * wPos;

        gl_Position = pPos;
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor.rgb = vec3(0.7,0.7,0.7);
        gl_FragColor.a = 1.0;
}
</script>

源代码JS：

var scene;
var camera;
var light;
var renderer;
var controls;
var onTick;
var planeMesh;
var BoxMesh;
var heightmap;
var clock;


function createPlane(){
    // disappearance seems related to size of geometry.
    // the larger the longer it takes until disappearance.
    var size = 20;
    var geom = new THREE.PlaneGeometry(size,size,20,20);

    return geom;
}


function createBox(){
    var geom = new THREE.CubeGeometry(2,2,4);

    return geom;
}

function createMesh(){
    // plane
    var geom = createPlane();

    var shaderMaterial = new THREE.ShaderMaterial({
        vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent,side: THREE.DoubleSide,wireframe: true
    });

    planeMesh = new THREE.Mesh(geom,shaderMaterial);
    var axis = new THREE.AxisHelper(4);
    planeMesh.rotation.x = -90 * (Math.PI / 180);
    planeMesh.add(axis);
    scene.add(planeMesh);

    // Box
    geom = createBox();

    var material = new THREE.MeshBasicMaterial( {
        color: 0xff00ff,});

    BoxMesh = new THREE.Mesh(geom,material);
    BoxMesh.position.x = 5;
    BoxMesh.position.z = -15;
    axis = new THREE.AxisHelper(4);
    BoxMesh.add(axis);
    scene.add(BoxMesh);
}

function startRendering(){
    onTick();
};

function onTick(){
    // move camera

    // causes disappearance
    // neg. z
     camera.position.z -= .1;
    // pos. x
    // camera.position.x += .1;
    // neg. x
    // camera.position.x -= .1;

    // causes no disappearance
    // pos. z
    // camera.position.z += .1;

    requestAnimationFrame(onTick);
    //controls.update(clock.getDelta());    
    renderer.render(scene,camera);
}

function init(){
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff,1 );
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    scene.add(new THREE.AxisHelper(4));

    camera = new THREE.PerspectiveCamera(65,window.innerWidth / window.innerHeight,0.1,1000);
    camera.position.set(0,1,0);

    light = new THREE.DirectionalLight(0xffffff,1);
    light.shadowCameraVisible = true;
    light.position.set(0,100);
    scene.add(light);

    //clock = new THREE.Clock();
    //controls = new THREE.FirstPersonControls(camera);
    //controls.movementSpeed = 20;
    //controls.lookSpeed = .1;
}

init();
createMesh();
startRendering();