在THREE.js中使用像素化效果进行渲染

Question

我正在制作一个THREE.js场景，我想用像素化效果渲染。为此，我使用renderer.setPixelRatio(...)以低分辨率绘制场景，效果很好。问题是结果似乎是抗锯齿的，甚至可能是画布的'WebGL上下文。

在Canvas 2d绘图API中，可以设置canvas.context.imageSmoothingEnabled = false;以确保以清晰的像素化效果绘制低分辨率场景。我尝试在renderer.context上使用此参数，但没有效果。还有其他方法吗？

谢谢！

Answer 1

这可以通过 CSS 样式表来完成。只需将此行添加到画布样式：

canvas {
  image-rendering: pixelated;
}