Какой шаг упускается при создании SVG для импорта в Three.JS, чтобы он соответствовал истинному дизайну SVG? - PullRequest
Новая
       83

Какой шаг упускается при создании SVG для импорта в Three.JS, чтобы он соответствовал истинному дизайну SVG?

0 голосов
/ 05 июня 2019

Когда я создаю SVG в Illustrator, рисуя несколько штриховых контуров на разных слоях без соединения от начала пути до конца пути и без применения заливки, а затем соединяю их в один слой, SVG визуализирует как и ожидалось в браузере, но не так, как ожидается в Three.JS

Я дословно использую код "загрузки", определенный на веб-сайте ThreeJS, расположенном здесь: https://threejs.org/docs/#examples/loaders/SVGLoader,, изменяющий только путь к используемому файлу SVG. Когда я использую образцы SVG-файлов из Викимедиа, которые содержат пустотелые внутренние фрагменты, они отображаются так, как ожидалось. Например, я использовал этот SVG, который представляет собой полый круг без заливки, и ThreeJS отображает его соответствующим образом: https://upload.wikimedia.org/wikipedia/commons/d/dc/Circle_blank_font_awesome.svg

Теперь это изображение, которое я создал в качестве примера в Illustrator:

https://www.dropbox.com/s/x2pibx6olayvfe0/test.svg?dl=0

Приведенное выше изображение было нарисовано с использованием только пути в квадранте II, затем зеркально отразилось на себя по вертикали и горизонтали в других квадрантах, а затем все пути были объединены в один слой.

Это то, что Three.JS рендерит однако (игнорировать материал сетки) ...

https://www.dropbox.com/s/iw4xwiw0807mf3x/threejs_test.png?dl=0

Есть ли шаг в Illustrator или Three.JS, который мне не хватает при создании / сохранении SVG или при импорте в Three.JS, чтобы он знал, что не нужно заполнять пустую внутреннюю форму, а только визуализировать обведенный внешний путь вместо этого?

1 Ответ

0 голосов
/ 05 июня 2019

См. Первый комментарий @WestLangley выше для ссылки, которая также показывает, как включить подпути для данных SVG, которые будут отображаться. 


    var strokeColor = path.userData.style.stroke;

    if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) {

        var material = new THREE.MeshBasicMaterial( {
            color: new THREE.Color().setStyle( strokeColor ),
            opacity: path.userData.style.strokeOpacity,
            transparent: path.userData.style.strokeOpacity < 1,
            side: THREE.DoubleSide,
            depthWrite: false
        } );

        for ( var j = 0, jl = path.subPaths.length; j < jl; j ++ ) {

            var subPath = path.subPaths[ j ];

            var geometry = THREE.SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );

            if ( geometry ) {
                var mesh = new THREE.Mesh( geometry, material );
                group.add( mesh );
            }
        }
    }
...