THREE：使用worldmap.svg作为球体上的材料，但是像素太多，如何缩小像素？

Question

我正在使用svg，因此可以为单个国家/地区着色。我知道WebGL不支持svg，这就是为什么它变得像素化，但是边界线像素化太多了，我知道如何使它看起来更好吗？

“ THREE.WebGLRenderer：纹理大小已从（2000x1001）调整为（1024x512）”？图像被裁剪，是不是这个问题？

---

                var renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                let scene = new THREE.Scene();

                var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

                var geometry = new THREE.SphereGeometry( 5,32,32 );
                let texture = new THREE.TextureLoader().load("/img/world-background.5375a735.svg");
                var material = new THREE.MeshBasicMaterial( { map: texture, color: "white"} );
                var sphere = new THREE.Mesh( geometry, material );
                sphere.rotation.y = 4.5;
                sphere.rotation.x = 0.5;

                scene.add( sphere );

---

Answer 1

为了避免调整大小，请尝试将纹理的minFilter属性设置为THREE.LinearFilter。这样可以明显提高最终的纹理分辨率。另外，您可以尝试默认将纹理更改为POT（2的幂）。那将意味着使用2048x1024之类的分辨率。

three.js R112