Three. js Shader для изменения TextGeometry - PullRequest
Новая
       101

Three. js Shader для изменения TextGeometry

0 голосов
/ 28 апреля 2020

Я совершенно новичок в трех, поэтому этот вопрос может быть очевиден для других.

Итак, я смог загрузить свой шрифт и построить TextGeometry соответственно. Кроме того, я создал вид границы с помощью EdgesGeometry. Это отлично работает.

Но как мне добиться геометрии / меня sh ', чтобы вести себя так: https://edoardosmerilli.com/overview/ - На словах: он как бы изгибается слева направо и наоборот (просто как экран старого тюбика) в соответствии с позицией прокрутки. Как мне добиться этого и добиться такого эффекта? Это вершинный шейдер? Это три вектора, которые создают этот эффект?

Я благодарен за каждый намек! 

export default class Title {
    constructor($el, $scene) {
        this.scene = $scene;
        this.title = $el.firstElementChild;

        this.offset = new THREE.Vector2(0, 0);

        const loader = new THREE.FontLoader();
        loader.load('/RL-Unno.json', (font) => {

            const geometry = new THREE.TextGeometry(this.title.innerHTML, {
                font: font,
                size: 120,
                height: 1
            });
            geometry.center();
            this.init(geometry);
        })
    }

    init = (geometry) => {
        const material = new THREE.MeshBasicMaterial({opacity: 0});
        this.mesh = new THREE.Mesh(geometry, material);

        this.getPosition();
        this.mesh.position.set(this.offset.x, this.offset.y, 0);
        this.scene.add(this.mesh);

        const geo = new THREE.EdgesGeometry(geometry);
        const outline = new THREE.LineBasicMaterial({
            linewidth: 4
        });
        this.border = new THREE.LineSegments(geo, outline);
        this.border.position.set(this.mesh.position.x, this.mesh.position.y, 0);
        this.scene.add(this.border);

        this.createListeners();
    };

    getPosition = () => {
        const {width, height, top, left} = this.title.getBoundingClientRect();

        this.offset.set(left - window.innerWidth / 2 + width / 2, -top + window.innerHeight / 2 - height / 2);
    };

    createListeners = () => {
        this.title.addEventListener('mouseenter', () => {
            gsap.timeline().set(this.mesh.material, {
                opacity: 1
            })
        });

        this.title.addEventListener('mouseleave', () => {
            gsap.timeline().set(this.mesh.material, {
                opacity: 0
            })
        });
    };

    update = () => {
        if (!this.mesh) return;
        this.getPosition();

        gsap.timeline().set([this.mesh.position, this.border.position], {
            x: this.offset.x,
            y: this.offset.y,
        });
    }
}
...