ТРИ: Используя worldmap.svg в качестве материала для сферы, но пикселей слишком много, как их уменьшить? - PullRequest
Новая
       50

ТРИ: Используя worldmap.svg в качестве материала для сферы, но пикселей слишком много, как их уменьшить?

0 голосов
/ 26 января 2020

Я использую 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 );

my sphere

1 Ответ

1 голос
/ 26 января 2020

Чтобы избежать изменения размера, попытайтесь установить для свойства minFilter вашей текстуры значение THREE.LinearFilter. Это должно заметно улучшить окончательное разрешение текстуры в вашем случае. В качестве альтернативы вы можете попробовать изменить текстуру на POT (степень двойки) по умолчанию. Это будет означать использование разрешения, например, 2048x1024.

three.js R112

...