Question

我正在做一些原型设计，我正在使用three.js（版本68）以3D形式显示一些数据。整个动画的期望结果将是一堆彩色球（代表根据某些模式着色的质子和中子）。一切都很好，但由于我不知道的原因渲染结果是像素化的。

当前版本基本上看起来像（此图像宽约400像素）： Result example

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

您可以在this fiddle上看到此问题，然后下载webpage here。

这里也是代码的重要部分：

<!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代码：

class AnimController

  ...

  set_up_scene: () ->
    @scene = new THREE.Scene()
    el = $(@element_name)
    @camera = new THREE.PerspectiveCamera(45
      el.width()/el.height(),
      1, 20000
    )
    @camera.position.set(100, 100, 0)
    @scene.add new THREE.AmbientLight 0x111111

    @renderer = new THREE.WebGLRenderer()
    el.html(@renderer.domElement)
    controls = new THREE.OrbitControls(@camera, @renderer.domElement );
    controls.addEventListener 'change', () =>
      console.log("Change")
      @render()

  render: () ->
    requestAnimationFrame(() => @render)
    console.log "Render"
    if @update_scene
      material = new THREE.MeshBasicMaterial() #"color": 0xffff00,
      geometry = new THREE.SphereGeometry 5, 50, 50
      console.log "Update"
      @update_scene = false
      @scene = new THREE.Scene()
      for particle in @curr_event
        p = particle['position']
        sphere = new THREE.Mesh( geometry, material );
        sphere.position.set(p[0], p[1], p[2])
        @scene.add(sphere)
    @renderer.render(@scene, @camera)

Answer 1

您似乎没有在正在使用的渲染器上请求抗锯齿。我不知道coffeescript但你会用javascript来做：

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

Answer 2

Antialiasing也是一个因素（请参阅@gaitat答案），但我也忘了为渲染器设置resoluion：

renderer.setSize( 1024, 768 )

渲染结果是像素化的（或者：它具有较低的分辨率）

2 个答案: