微信小游戏、three.js、真机调试，出现锯齿的解决办法

最新推荐文章于 2023-10-11 11:11:23 发布

xiefeisd

最新推荐文章于 2023-10-11 11:11:23 发布

阅读量2.8k

点赞数 1

分类专栏：踩坑笔记

本文链接：https://blog.csdn.net/xiefeisd/article/details/87477251

版权

本文介绍了在微信小游戏和Three.js中遇到的锯齿问题及其解决方法。作者分享了错误尝试、大牛的解决方案，以及最终采用的正确方法，包括调整渲染器尺寸和启用antialias选项来消除锯齿。在真机和模拟器间切换时，通过判断设备类型动态应用抗锯齿代码。

摘要由CSDN通过智能技术生成

更正：

原文是基于微信小游戏，在微信开发者工具、手机端微信小游戏，该方案没问题。

我今天尝试移植到普通web，该方案出现新问题：

1）不使用该方案，则出现锯齿。

2）使用该方案，则正圆变成椭圆。

暂时解决不了。

我原先的尝试是错误的，正确的方法见这位大牛的博客：https://blog.csdn.net/sakurallj/article/details/80263494#comments

这位大牛的方法是对的，具体细节并不适合我的情况，可能是我太菜了的缘故。

使用该方法，修改了一下具体写法，完美解决了我的问题。

正确方法见后文。错误的尝试过程也保留备忘。

微信小游戏在真机调试时出现锯齿，网上搜索了很多解决方案，其中包括CSDN的博客两篇。

也许是因为我水平有限，对众多解决方案的理解不够深入，总之结果是照葫芦画瓢的尝试没有成功。

经过自己摸索，发现解决方案如下：

对于three.js，使用如下语句：

var renderer = new THREE.WebGLRenderer({canvas:canvas,antialias:true,precision:"highp"})
renderer.setSize(window.innerWidth*8, window.inn

关注

专栏目录