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

标签 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

如何使它尽可能清晰?

作为引用,这里是呈现为 512x512 png 的 SVG:

sharp compass

最佳答案

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

解决了我的问题

关于javascript - 将清晰的文本渲染为 three.js 纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51410357/

相关文章:

iphone - 如何在 OpenGL ES for iphone 中加载和显示图像

CUDA 分配对齐是 256 字节 - 认真吗?

javascript - 如何获取隐藏文本字段值的onchange值

javascript - 检查数组是否包含字符串的一部分并找到索引号

javascript - 使用 THREE.TextureLoader 而不是弃用的 THREE.ImageUtils.loadTexture 时出现纹理问题

javascript - 在 THREE.js 中获取全局 'camera' 变量的值时遇到问题

ios - 将纹理设置为彩色 CC3MeshNode

javascript - 简化 JavaScript 中的迭代 if/else if 语句

javascript - jQuery Validate onkeyup 和突出显示的问题

javascript - 在 three.js 中使用基本纹理 Material 时出现异常抗锯齿