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

Question

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

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

谢谢！

标签： graphicsthree.jshtml5-canvaswebgl

Answer 1

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

canvas {
  image-rendering: pixelated;
}