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

时间:2018-07-18 20:18:32

标签: javascript three.js textures

我有一个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中渲染时真的很模糊:

screenshot of blurry text in webgl

我如何使其尽可能清晰?

作为参考,以下是SVG呈现为512x512 png:

sharp compass

1 个答案:

答案 0 :(得分:5)

...正如我决定在此处发布内容一样,我通过添加material.map.minFilter = THREE.LinearFilter;

解决了我的问题