簡體   English   中英

渲染銳利文本作為three.js紋理

[英]Rendering sharp text as a three.js texture

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

webgl中模糊文本的屏幕截圖

如何讓它盡可能銳利?

作為參考,這里的SVG呈現為512x512 png:

尖銳的羅盤

......就像我決定在這里發帖一樣,我通過添加material.map.minFilter = THREE.LinearFilter;解決了我的問題material.map.minFilter = THREE.LinearFilter;

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM