渲染结果是像素化的(或者:它具有较低的分辨率)
jb.*_*jb. 6 javascript webgl three.js
我正在做一些原型设计,我正在使用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代码:
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)
您似乎没有在正在使用的渲染器上请求抗锯齿.我不知道coffeescript,但在javascript中你会这样做:
renderer = new THREE.WebGLRenderer({ antialias: true });
抗锯齿也是一个因素（请参阅@gaitat 答案），但我也忘记设置渲染器的分辨率：
renderer.setSize( 1024, 768 )
| 归档时间： |
|
| 查看次数： |
2108 次 |
| 最近记录： |