[英]Rendering sharp text as a three.js texture
I have a 512x512 SVG i'm drawing to a circular plane like this 我有一个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);
It's working fine, but this SVG has some text on it and it's really blurry when rendered in three.js: 它运行正常,但是这个SVG上有一些文本,当它在three.js中渲染时它真的很模糊:
How do I make this as sharp as possible? 如何让它尽可能锐利?
For reference, here's the SVG rendered as a 512x512 png: 作为参考,这里的SVG呈现为512x512 png:
......就像我决定在这里发帖一样,我通过添加material.map.minFilter = THREE.LinearFilter;
解决了我的问题material.map.minFilter = THREE.LinearFilter;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.