旋转时，三个js出现不完美的线条

Question

我创建了一个带有6个平面的立方体，并为每个平面使用边框。它似乎没问题，但是当我旋转物体时，线条显示非常难看，有时它不显示。如果我使用WebGLRenderer，它工作完美但我必须使用CanvasRenderer。

＆＃13;

＆＃13;

	$(function(){
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
		var renderer = new THREE.CanvasRenderer({alpha: true});
		renderer.setClearColor(0x000000, 0);
		renderer.setSize(window.innerWidth,window.innerHeight);
		var axes = new THREE.AxisHelper(20);
		scene.add(axes);

		var planeGeometry = new THREE.PlaneGeometry(60,60);
		var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc,side: THREE.DoubleSide	});
		var plane = new THREE.Mesh(planeGeometry,planeMaterial);

		var object3D = new THREE.Object3D();
		plane.rotation.x = -0.5*Math.PI;
		plane.position.x = 0;
		plane.position.y = 0;
		plane.position.z = 0;

		var boder1 = drawBoder(plane);
		boder1.rotation.x = -0.5*Math.PI;
		object3D.add(boder1);
		object3D.add(plane);
		
		var planeMaterial = new THREE.MeshBasicMaterial({color: 0xff00cc,side: THREE.DoubleSide});
		var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);

		plane2.position.x = 0;
		plane2.position.y = 30;
		plane2.position.z = -30;

		var boder2 = drawBoder(plane2);
		boder2.position.x = 0;
		boder2.position.y = 30;
		boder2.position.z = -30;
		object3D.add(boder2);

		object3D.add(plane2);


		var planeMaterial = new THREE.MeshBasicMaterial({color: 0x00ffcc});
		var plane3 = new THREE.Mesh(planeGeometry,planeMaterial);

		plane3.position.x = 0;
		plane3.position.y = 30;
		plane3.position.z = 30;

		var boder3 = drawBoder(plane3);
		boder3.position.x = 0;
		boder3.position.y = 30;
		boder3.position.z = 30;
		object3D.add(boder3);

		object3D.add(plane3);


		var planeMaterial = new THREE.MeshBasicMaterial({color: 0xbbeecc,side: THREE.DoubleSide});
		var plane4 = new THREE.Mesh(planeGeometry,planeMaterial);

		plane4.rotation.y = 0.5*Math.PI;
		plane4.position.x = -30;
		plane4.position.y = 30;
		plane4.position.z = 0;

		var boder4 = drawBoder(plane4);
		boder4.rotation.y = 0.5*Math.PI;
		boder4.position.x = -30;
		boder4.position.y = 30;
		boder4.position.z = 0;
		object3D.add(boder4);

		object3D.add(plane4);

		var planeMaterial = new THREE.MeshBasicMaterial({color: 0xeebbee,side: THREE.DoubleSide});
		var plane5 = new THREE.Mesh(planeGeometry,planeMaterial);

		plane5.rotation.x = -0.5*Math.PI;
		plane5.position.x = 0;
		plane5.position.y = 60;
		plane5.position.z = 0;

		var boder5 = drawBoder(plane5);
		boder5.rotation.x = -0.5*Math.PI;
		boder5.position.x = 0;
		boder5.position.y = 60;
		boder5.position.z = 0;
		object3D.add(boder5);

		object3D.add(plane5);

		var planeMaterial = new THREE.MeshBasicMaterial({color: 0xccbbbb,side: THREE.DoubleSide});
		var plane6 = new THREE.Mesh(planeGeometry,planeMaterial);
		plane6.rotation.y = 0.5*Math.PI;
		plane6.position.x = 30;
		plane6.position.y = 30;
		plane6.position.z = 0;

		var boder6 = drawBoder(plane6);
		boder6.rotation.y = 0.5*Math.PI;
		boder6.position.x = 30;
		boder6.position.y = 30;
		boder6.position.z = 0;
		object3D.add(boder6);

		object3D.add(plane6);

		scene.add(object3D);

		camera.position.x = 600;
		camera.position.y = 500;
		camera.position.z = 200;
		camera.lookAt(scene.position);
		$("#webgl-output").append(renderer.domElement);

		render();
		
		function render(){
			renderer.render(scene,camera);
		}


		function drawBoder(plane){
                var materialLine = new THREE.LineBasicMaterial({
                    color: 0x231916,
                    linewidth: 2,
                });
                var geometryLine = new THREE.Geometry();
                geometryLine.vertices.push(
                    plane.geometry.vertices[0],
                    plane.geometry.vertices[1],
                    plane.geometry.vertices[1],
                    plane.geometry.vertices[3],
                    plane.geometry.vertices[2],
                    plane.geometry.vertices[0]
                );
            var lineBorder = new THREE.Line( geometryLine, materialLine );
            return lineBorder;


		}

		$("#btnLeft").click(function(){
			object3D.rotation.y += 0.1;
			render();
		});

		$("#btnRight").click(function(){
			object3D.rotation.y -= 0.1;
			render();
		});
		$("#btnUp").click(function(){
			object3D.rotation.z += 0.1;
			render();
		});

		$("#btnDown").click(function(){
			object3D.rotation.z -= 0.1;
			render();
		});
	});

＆＃13;

<div id="webgl-output">
	
</div>
<button id="btnLeft">left</button>
<button id="btnRight">right</button>
<button id="btnUp">Up</button>
<button id="btnDown">Down</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>

＆＃13;

＆＃13;

＆＃13;