Javascript 渲染结果是像素化的（或：分辨率较低）_Javascript_Three.js_Webgl

Javascript 渲染结果是像素化的（或：分辨率较低）

javascript three.js webgl

Javascript 渲染结果是像素化的（或：分辨率较低）,javascript,three.js,webgl,Javascript,Three.js,Webgl,我正在做一些原型设计，我正在使用three.js（版本68）在3D中显示一些数据。整个动画的期望结果是一束彩色球（表示根据某种模式着色的质子和中子）。一切正常，但由于我不知道的原因，渲染结果令人兴奋当前版本基本上是这样的（此图像约400px宽）：我检查了所有明显的事情，比如：传递错误的分辨率、浏览器缩放等等您可以在上看到此问题，并下载下面是代码的相关部分： <!DOCTYPE html> <html> <head lang="en"> <

我正在做一些原型设计，我正在使用

three.js

（版本68）在3D中显示一些数据。整个动画的期望结果是一束彩色球（表示根据某种模式着色的质子和中子）。一切正常，但由于我不知道的原因，渲染结果令人兴奋

当前版本基本上是这样的（此图像约400px宽）：

我检查了所有明显的事情，比如：传递错误的分辨率、浏览器缩放等等

您可以在上看到此问题，并下载

下面是代码的相关部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <script src="js/coffee-script.js"></script>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/animtest/load_event.js"></script>
    <style>canvas { width: 100%; height: 100% }</style>
    <title></title>

</head>
<body>
<div id="animation"
    style="width: 1024px; height: 768px; ">

</div>
<script>
    $(function(){
       ctrl = new AnimController("#animation");
       ctrl.set_up_scene();
       ctrl.render();
       ctrl.display_frame(4);
    });
</script>

</body>
</html>

您似乎没有在正在使用的渲染器上请求抗锯齿。我不知道coffeescript，但在javascript中，您可以：

 renderer = new THREE.WebGLRenderer({ antialias: true });

抗锯齿也是一个因素（请参见@gaitat answer），但我也忘了在渲染器上设置分辨率：

renderer.setSize( 1024, 768 )

现在不要使用coffeescript，但您正在使用未抗锯齿的渲染器进行渲染。为什么要分配两个渲染器？就是这样。渲染器没有抗锯齿（另一个错误是我忘记了@）。如果你能把这变成一个答案，我会接受的。错误在于我没有在three.js使用的渲染器上调用：

renderer.setSize（el.width（），el.height（））

。至少对于three.js，正确的属性是

抗锯齿

，而不是

抗锯齿

renderer.setSize( 1024, 768 )