javascript - ubantu15.10 three.js 画长方体出现锯齿, 已开抗锯齿， 请问如何解决

Question

运行的是ubantu 15.10 的chrome浏览器， 浏览器版本是54.0.2840.100
出现锯齿如图，具体代码如下

function init(){
  var canvas = document.getElementById("mainCanvas"); 
  var renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true              //抗锯齿
  });
  renderer.setClearColor(0x666666);
  // canvas.appendChild(renderer.domElement); 

  var scene = new THREE.Scene(); 

  var camera = new THREE.PerspectiveCamera(50, canvas.clientWidth/canvas.clientHeight, 1, 100);
  camera.position.set(5, 5, 5); 
  camera.lookAt({
      x: 0,
      y: 0,
      z: 0
  }); 

  var cube = new THREE.Mesh(new THREE.CubeGeometry(4, 3, 3), new THREE.MeshBasicMaterial({
      color: 0xD2D2D2,
  })); 
 
  scene.add(cube); 
  scene.add(camera);
  renderer.render(scene, camera); 
}

window.onload = function(){
  init();
}

刚接触webGL，google上说是要开渲染器的抗锯齿，但是在代码中加{antialias：true}还是无效，请问出现这个问题怎么回事？以及如何解决？ 万分感谢