英文:
Control degree of mesh tessellation via scroll input
问题
在这个页面中展示了这个效果（演示结果在此处 https://threejs.org/examples/webgl_modifier_tessellation.html，源代码在此处 https://github.com/mrdoob/three.js/blob/dev/examples/webgl_modifier_tessellation.html），构成文本的网格不断聚集然后在一个循环中分离。
我想要做的是通过滚轮来控制完全相同的效果。也就是说，当我向一个方向滚动滚轮时，网格应该聚集并形成可读文本。当我向相反的方向滚动滚轮时，它们应该分离。
抱歉，我对JavaScript和three.js非常陌生，不确定这个问题是否太基础。有人可以给我一些建议，指导应该删除哪些函数以及为此目的应该添加什么内容，谢谢！
英文:
As showed in this page(result demostrated here https://threejs.org/examples/webgl_modifier_tessellation.html and source code here https://github.com/mrdoob/three.js/blob/dev/examples/webgl_modifier_tessellation.html), the meshes constituting the text are continuously gathering and then seperating in a loop.
What I want to do is to control the exact same effect, but through the scroll wheel. That is, the meshes should gather and form readable text when I scroll the wheel to one direction. And they should separate when I scroll the wheel to the opposite direction.
Sorry I'm extremely new to javascript and three.js, not sure if this question is too basic. Can anyone give me some suggestion about what function should be removed and what should be added for this purpose, thanks!
答案1
得分: 1
The total displacement of each face of the mesh is determined by the product of a random displacement per face and an amplitude as seen in the vertex shader:
void main() {
...
vec3 newPosition = position + normal * amplitude * displacement;
...
}
The amplitude is determined by a sine function as seen in the render function:
function render() {
...
uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );
...
}
To adjust the displacement of the faces by scroll input, we'll need to replace the sine function with input from the scroll wheel. It'd be something similar to this:
let scrollAmplitude = 0;
let factor = 1;
function init() {
...
window.addEventListener('wheel', onWindowScroll);
}
function onWindowScroll() {
const lastScrollPos = window.scrollY;
scrollAmplitude = (window.height - window.scrollY) * factor;
}
function render() {
...
uniforms.amplitude.value = 1.0 + scrollAmplitude;
...
}
英文:
The total displacement of each face of the mesh is determined by the product of a random displacement per face and an amplitude as seen in the vertex shader:
void main() {
...
vec3 newPosition = position + normal * amplitude * displacement;
...
}
The amplitude is determined by a sine function as seen in the render function:
function render() {
...
uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );
...
}
To adjust the displacement of the faces by scroll input, we'll need to replace the sine function with input from the scroll wheel. It'd be something similar to this:
let scrollAmplitude = 0;
let factor = 1;
function init() {
...
window.addEventListener( 'wheel', onWindowScroll );
}
function onWindowScroll() {
const lastScrollPos = window.scrollY;
scrollAmplitude = (window.height - window.scrollY) * factor;
}
function render() {
...
uniforms.amplitude.value = 1.0 + scrollAmplitude;
...
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论