Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Graphics 在THREE.js中使用像素化效果进行渲染_Graphics_Three.js_Html5 Canvas_Webgl - Fatal编程技术网

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

Graphics 在THREE.js中使用像素化效果进行渲染,graphics,three.js,html5-canvas,webgl,Graphics,Three.js,Html5 Canvas,Webgl,我正在处理一个THREE.js场景,我想用像素化效果渲染它。为此,我使用renderer.setPixelRatio(…)以低分辨率绘制场景,效果很好。问题是,结果似乎是抗锯齿的,甚至可能是通过画布的WebGL上下文 在Canvas 2d绘图api中,可以设置Canvas.context.imageSmoothingEnabled=false以确保绘制低分辨率场景时具有清晰的像素效果。我尝试在我的渲染器.context上使用此参数,但没有效果。还有别的办法吗 谢谢 这可以通过CSS样式表来完成。

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

在Canvas 2d绘图api中,可以设置
Canvas.context.imageSmoothingEnabled=false以确保绘制低分辨率场景时具有清晰的像素效果。我尝试在我的
渲染器.context
上使用此参数,但没有效果。还有别的办法吗


谢谢

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

canvas {
  image-rendering: pixelated;
}

也许是这个?如果找不到Three.js解决方案。我已经提供了一个类似问题的答案,但使用的是纯WebGL。