Question

在我的代码中，我使用THREE.js创建了一个由照片背景和文字覆盖层组成的平面

我通过让Plane对象使用由2种纹理均匀组成的ShaderMaterial来实现的：照片和画布对象。 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。我目前的两个解决方案是：

通过着色器将鼠标悬停时，设置一个统一的颜色，然后对位于描边线内的坐标进行着色。这听起来非常困难且乏味。
使用填充的文本创建新纹理，并在每次悬停时为此换出统一的材质。这似乎很昂贵，而且我看不出有什么办法可以增加宽松程度。

有更好的方法吗？

在THREE.js中对CanvasTexture进行动画处理

0 个答案: