Javascript 用于修改TextGeometry的Three.js着色器
我对三个完全陌生,因此这个问题对其他人来说可能是显而易见的 因此,我实现了加载字体并相应地构建文本几何体。此外,我还使用EdgesGeometry创建了一种边界。这个很好用 但是我如何实现这样的几何/网格:-换句话说:它根据滚动位置从左到中弯曲,反之亦然(就像旧电视的屏幕一样)。我怎样才能达到这样的效果?它是顶点着色器吗?是三个向量造成了这种效果吗 我感谢你给我的每一个提示强>Javascript 用于修改TextGeometry的Three.js着色器,javascript,three.js,fragment-shader,vertex-shader,Javascript,Three.js,Fragment Shader,Vertex Shader,我对三个完全陌生,因此这个问题对其他人来说可能是显而易见的 因此,我实现了加载字体并相应地构建文本几何体。此外,我还使用EdgesGeometry创建了一种边界。这个很好用 但是我如何实现这样的几何/网格:-换句话说:它根据滚动位置从左到中弯曲,反之亦然(就像旧电视的屏幕一样)。我怎样才能达到这样的效果?它是顶点着色器吗?是三个向量造成了这种效果吗 我感谢你给我的每一个提示 export default class Title { constructor($el, $scene) {
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,
});
}
}
在
three.js
论坛上也被问到:@Mugen87不知道哪个论坛更适合解决这个问题;)在three.js
论坛上也被问到:@Mugen87不知道哪个论坛更适合解决这个问题;)