ТРИ SVG в MeshLine - Заполнение форм - PullRequest
Новая
       36

ТРИ SVG в MeshLine - Заполнение форм

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

Я пытаюсь загрузить SVG, которые уже находятся в DOM, в ТРИ. js сцена

Это пример SVG, который у меня есть

original

А вот как это выглядит на сцене

how it shows

Я пытаюсь использовать THREE.SVGLoader и THREE.MeshLine для отображения значков.

Вот HTML для этого SVG 

<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="FiDownload" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>

И вот как я это делаю 

    const loader = new THREE.SVGLoader()
    const svg = loader.parse(el.outerHTML)

    const material = new THREE.MeshLineMaterial({
        color: new AFRAME.THREE.Color(this.data.color),
        resolution: new AFRAME.THREE.Vector2 ( window.innerWidth, window.innerHeight ),
        sizeAttenuation: 0,
        lineWidth: 2,//this.data.lineWidth,
        opacity: 1,//this.data.opacity,
        transparent: true,
        //near: 0.1,
        //far: 1000
      });

    svg.paths.forEach((path, i) => {
        const shapes = path.toShapes(true);
        shapes.forEach((shape, j) => {
        const geometry = new AFRAME.THREE.ShapeGeometry(shape);
        const mesh = new AFRAME.THREE.Mesh(geometry, material);
        this.el.object3D.add(mesh)
        });
    });

Я получаю ошибку:

THREE.DirectGeometry: Безликие геометрии не поддерживаются.

Кто-нибудь может предложить способ заставить иконки SVG правильно отображаться в THREE?

1 Ответ

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

Я использовал LineGeometry 

    svg.paths.forEach((path, i) => {
        const shapes = path.toShapes(true);
        shapes.forEach((shape, j) => {

        //@ts-ignore
        const line = new AFRAME.THREE.MeshLine();
        const geometry = new AFRAME.THREE.Geometry();
        shape.extractPoints().shape.forEach(vec2 => {
            geometry.vertices.push(new AFRAME.THREE.Vector3(vec2.x, vec2.y, 0))
        })  
        line.setGeometry( geometry )
        const mesh = new AFRAME.THREE.Mesh(line.geometry, this.material)
        this._shapes.push(mesh)
        this.el.object3D.add(mesh)
        });
    });
...