将清晰的文本渲染为 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:

中渲染时真的很模糊

如何使它尽可能清晰？

作为参考，这里是呈现为 512x512 png 的 SVG：

Answer 1

... 就在我决定在这里 post 时，我通过添加 material.map.minFilter = THREE.LinearFilter;

解决了我的问题

将清晰的文本渲染为 three.js 纹理

Rendering sharp text as a three.js texture

javascript

textures

three.js