问题描述
限时送ChatGPT账号..使用以下代码加载 SVG 会导致输出质量低于仅通过 html 加载 SVG.将资源作为 PNG 加载时,我得到了相同的结果.是否有我在这里遗漏的设置或其他任何内容?
Loading the SVG with the following code results in a lower quality output than just loading the SVG through html. I get the same result when loading the resource as a PNG instead. Are there settings, or anything else, that I'm missing here?
// instantiate a loader
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'images/image.svg',
// Function when resource is loaded
function ( texture ) {
// do something with the texture
var GlobeLogoMaterial = new THREE.MeshBasicMaterial( {
color:"#ffffff",
map:texture,
transparent: true,
opacity:1} );
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var GlobeLogoGeo = new THREE.PlaneGeometry(28,28,1,1);
var GlobeLogoMesh = new THREE.Mesh( GlobeLogoGeo, GlobeLogoMaterial );
GlobeLogoMesh.name="Globe Logo Mesh";
GlobeLogoMesh.position.x = 0;
GlobeLogoMesh.position.y = 0;
GlobeLogoMesh.position.z = 31;
scene.add( GlobeLogoMesh );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
推荐答案
您正在加载矢量图像 (SVG) 作为光栅纹理.在将矢量图像添加到 ThreeJS 场景之前,它会被转换为光栅图像.我认为您最好将纹理作为光栅图像 (PNG) 提供,这样您自己就可以更好地控制分辨率.
You are loading a vector image (SVG) as a raster texture. Before the vector image is added to the ThreeJS scene it is converted to a raster image. I think you are better off serving your textures as raster images (PNG) so you are in better control of the resolution yourself.
这篇关于使用 TextureLoader 为 Three.js 画布加载 SVG 导致质量低于通过 html 加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论