我正在尝试使用three.js创建一个简单的3D游戏,其中包括boxgeometries。一切都很顺利,但是这些盒子上没有锐利的边缘,无论是在移动浏览器上(Safari)还是在我的MacBook上的Chrome上。请看下面的截图。
到目前为止我尝试了以下方法:将渲染器的抗锯齿设置为true(有所帮助,但旋转立方体仍然没有直线),设置渲染器像素比(则不能正常工作并且线条仍然呈像素状)。还尝试了FXAA着色器,但结果并不比之前好。使用透视摄像机、Boxgeometry和Basic Material。
我的问题是,在这些小型盒子(例如移动屏幕上的30个等大小的盒子)中,three.js是否可以实现这样的锐利边缘?
使用的版本为three.js 87,Chrome 68和最新的移动Safari。
更新:这是我的渲染器设置:
![Blurry Edges on Meshes](https://istack.dev59.com/63Pa7.webp)
我的问题是,在这些小型盒子(例如移动屏幕上的30个等大小的盒子)中,three.js是否可以实现这样的锐利边缘?
使用的版本为three.js 87,Chrome 68和最新的移动Safari。
更新:这是我的渲染器设置:
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // doesnt do the trick and messes up the threex domevent touch inputs
document.body.appendChild(renderer.domElement);
canvas = document.getElementsByTagName('canvas')[0];
window.onresize = resizeCanvas;
resizeCanvas();
function resizeCanvas() {
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
在我的CSS中,我只有这个样式:canvas { height: 100%; width: 100%; }。
更新2:此处有演示链接:https://jsfiddle.net/roxanfc4/11/
transform: scale(2.0);
的CSS规则到你的画布、div、页面等上面? - M -