将锐利的文本呈现为three.js纹理

Question

我有一个512x512的SVG文件，正在将其绘制到一个圆形平面上，就像这样：

    const texture = new THREE.TextureLoader().load('img/plane.svg');
​
    const material = new THREE.MeshBasicMaterial({
        transparent: true,
        map: texture,
        side: THREE.DoubleSide
    });
    const geometry = new THREE.CircleGeometry(5, 64);
    const plane = new THREE.Mesh(geometry, material);
    plane.rotation.x = -1;
    scene.add(plane);

这个SVG在正常运行，但是当在three.js中渲染时，SVG上的一些文本变得非常模糊：

我该如何让它尽可能清晰？

供参考，这是SVG渲染为512x512 png的结果：

- nnyby

Answer 1

……就在我决定在这里发帖时，我通过添加material.map.minFilter = THREE.LinearFilter;解决了我的问题。

- nnyby

---

谢谢！详细的解释在这里 https://threejsfundamentals.org/threejs/lessons/threejs-textures.html 的“Filtering and Mips”部分。 - fomasha

另外，确保您从窗口对象设置像素比率，例如：renderer.setPixelRatio(window.devicePixelRatio); （不要输入数字）。如果您有视网膜屏幕，效果会更好。 - Timtest