使用 TextureLoader 为 Three.js 画布加载 SVG 导致质量低于通过 html 加载 [英] Loading SVG with TextureLoader for three.js canvas results in lower quality than loading via html

问题描述

使用以下代码加载 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屋！