Анимация CanvasTexture в THREE.js - PullRequest
Новая
       4

Анимация CanvasTexture в THREE.js

0 голосов
/ 07 сентября 2018

В моем коде я создал плоскость, состоящую из фона фотографии и наложения текста, используя THREE.js

Я сделал это, используя объект Plane, используя ShaderMaterial, состоящий из 2 текстурных униформ: фотография и холст. Объект canvas содержит только штриховой текст, и я использую CanvasTexture, чтобы преобразовать его в текстуру следующим образом: 

let canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
ctx.font = `Normal 160px Helvetica Neue`;
ctx.strokeStyle = "rgba(255,255,255,1.0)";
ctx.textAlign = "center";
ctx.lineWidth = 8;
ctx.strokeText(text, canvas.width / 4, canvas.height / 4);

let textTexture = new THREE.CanvasTexture(canvas);

Затем в коде фрагмента шейдера я устанавливаю gl_FragColor на текстуру холста текста, если текущая координата пересекается с текстом, и в противном случае возвращается к фону фотографии. Конечный результат - фотография с наложенным штрихованным текстом.

Моя проблема в том, что я хочу оживить этот текст. Например, если я наведу курсор на плоскость, я хочу, чтобы заштрихованный текст заливался сплошным цветом.

Насколько я понимаю, я не могу получить доступ к ctx холста после преобразования его в текстуру. Мои два текущих решения:

  1. Через шейдер при наведении курсора установите униформу, а затем заштрихуйте координаты, которые находятся внутри штриховых линий. Это звучит довольно сложно и утомительно.

  2. Создание новой текстуры с заполненным текстом и замена формы материала для этого при каждом наведении. Это кажется дорогим, и я не вижу способа добавить ослабление к этому.

Есть ли лучший способ сделать это?

...