antialias在three.js中不能很好地工作

Question

我在threee.js中使用svg作为纹理，我已经设置了antialias：true，但仍然不能完美，

// RENDERER
renderer = new THREE.WebGLRenderer({
            antialias: true, //是否开启反锯齿
            precision: "highp", //着色精度选择
            alpha: true, //是否可以设置背景色透明
            premultipliedAlpha: true,
            stencil: false,
            preserveDrawingBuffer: true, //是否保存绘图缓冲  
            maxLights: 1 //maxLights:最大灯光数
        });

renderer.setPixelRatio(window.devicePixelRatio);

这是svg：

这是3d模型上的纹理：

任何人都可以帮助我吗？

谢谢！

Answer 1

将图像加载到3d环境中时，它不是像素，而是定义为纹素。纹体被转换为由UV坐标设置的面部可用空间。根据您提供的样本方法对原始图像进行采样。有些导致特定的块状外观。想想我的世界。其他人非常流畅，在放大时尤其模糊。想想旧的视频游戏。

要确定原始图像的样本方法，您可以在texutre的放大和缩小属性中设置样本技术。

尝试

    mySVG = new THREE.TextureLoader().load('assets/images/icons/mySVG.svg');
    mySVG.magFilter = THREE.NearestFilter;
    mySVG.minFilter = THREE.LinearMipMapLinearFilter;

https://threejs.org/docs/api/textures/Texture.html

提供了各种过滤器并记录在案