【Web前端问题】ubantu15.10 three.js 画长方体出现锯齿, 已开抗锯齿， 请问如何解决

图片描述

运行的是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}还是无效，请问出现这个问题怎么回事？以及如何解决？ 万分感谢

回答：

render生成的图像默认尺寸比较小，所以像素块看起来非常大
所以需要手动调整下

    renderer.setSize(window.innerWidth,window.innerHeight);

其中window.innerWidth和window.innerHeight是屏幕大小，也可以按照自己的尺寸设置，数值越大锯齿越少，即图像越细腻
新手刚开始学没多久，如果有说错的地方欢迎指正

以上是 【Web前端问题】ubantu15.10 three.js 画长方体出现锯齿, 已开抗锯齿， 请问如何解决 的全部内容， 来源链接： utcz.com/a/136162.html

回到顶部