Three.js - Куб и сфера странно отсекаются от плоскости

Question

У меня возникла проблема, когда кажется, что куб и сфера пересекаются с плоскостью. Кажется, что это происходит, когда я перемещаю куб (используя клавиатуру) к задней части сцены. Это также происходит, когда я использую трекбол для перемещения по сцене. Иногда куб и сфера видны, даже когда я поворачиваю камеру, поэтому смотрю на дно самолета.

Некоторый код, который может быть полезен, содержит переменные камеры, создание плоскости, сферы и куба. У меня тоже есть изображения: http://imgur.com/0VlZLmP

//CAMERA
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;

//Renderer
ShapeShifter.renderer = new THREE.CanvasRenderer();

//Sphere
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0x8888FF, overdraw: true } );
ShapeShifter.sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
ShapeShifter.sphere.position.set( 100, 50, -10 );
ShapeShifter.scene.add( ShapeShifter.sphere );

//Cube
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xFF4422 } );
ShapeShifter.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
ShapeShifter.scene.add( ShapeShifter.cube );
ShapeShifter.cube.position.set( -40, 50, 200 );

//Floor
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( { color: 0x4DBD33, overdraw: true } );
ShapeShifter.floor = new THREE.Mesh( floorGeometry, floorMaterial );
ShapeShifter.floor.material.side = THREE.DoubleSide;
ShapeShifter.floor.position.y = 0;
ShapeShifter.floor.rotation.x = Math.PI / 2;
ShapeShifter.scene.add( ShapeShifter.floor );

Answer 1

Это известное ограничение CanvasRenderer,

Вы можете уменьшить эти артефакты, увеличив тесселяцию своей геометрии - особенно плоскости.

var floorGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 ); // will help
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50, 2, 2, 2 );  // may help