如何利用波分量将波的运动从水平方向改变为垂直方向?

Question

当前波浪分量生成一个水平移动。我的兴趣是将运动从水平变为垂直。当前脚本为:

<script>
AFRAME.registerComponent('wave-component', {
schema: {
texturepath: {type: 'asset'},
color: {type: 'string', default: '#FFF'}
},
init: function () {
var el = this.el;
const loader = new THREE.TextureLoader();
var geometry = new THREE.PlaneGeometry(10, 3, 60, 100);
// Creating a material with the texture path provided
var material = new THREE.MeshBasicMaterial({
map: loader.load(this.data.texturepath.src),
transparent: true,
color: this.data.color,
alphaTest: 0.01
});
var wave = new THREE.Mesh(geometry, material);
wave.rotation.set(-0.3, 0.0, -0.0);
const clock = new THREE.Clock();
let v = new THREE.Vector3();
let pos = wave.geometry.attributes.position;
el.setObject3D('WaveMesh', wave);
// Function to animate each vertex of the texture to simulate a wave effect
function animate() {
const t = clock.getElapsedTime();
for (let i = 0; i < pos.count; i++){
v.fromBufferAttribute(pos, i);
const wavex1 = 0.05 * Math.sin(v.x * 2 + t * 3);
const wavex2 = 0.05 * Math.sin(v.x * 5 + t * 2);
const wavex3 = 0.1 * Math.sin(v.y * 10 + t * 0.5);
pos.setZ(i, wavex1 + wavex2 + wavex3)
}
pos.needsUpdate = true;
requestAnimationFrame(animate);
}
animate();
}
});
</script>

我正在寻找一个垂直运动而不是水平运动。

Answer 1

将三个正弦因子组合成最终位置:

const wavex1 = 0.05 * Math.sin(v.x * 2 + t * 3);             
const wavex2 = 0.05 * Math.sin(v.x * 5 + t * 2);
const wavex3 = 0.1 * Math.sin(v.y * 10 + t * 0.5);

如果你想让波在二维中以同样的速度移动，那么只要根据v.y的位置加快因子(因为它比其他位置慢4倍):

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('wave-component', {
schema: {
color: {
type: 'string',
default: '#FAA'
}
},
init: function() {
var el = this.el;
var geometry = new THREE.PlaneGeometry(6, 6, 100, 100);
// Creating a material with the texture path provided
var material = new THREE.MeshBasicMaterial({
color: this.data.color,
side: THREE.DoubleSide
});
var wave = new THREE.Mesh(geometry, material);
wave.rotation.set(-Math.PI/2, 0.0, -0.0);
const clock = new THREE.Clock();
let v = new THREE.Vector3();
let pos = wave.geometry.attributes.position;
el.setObject3D('WaveMesh', wave);
// Function to animate each vertex of the texture to simulate a wave effect
function animate() {
const t = clock.getElapsedTime();
for (let i = 0; i < pos.count; i++) {
v.fromBufferAttribute(pos, i);
const wavex1 = 0.05 * Math.sin(v.x * 2 + t * 3);
const wavex2 = 0.05 * Math.sin(v.x * 5 + t * 2);
const wavex3 = 0.1 * Math.sin(v.y * 5 + t * 3);
pos.setZ(i, wavex1 + wavex2 + wavex3)

}
pos.needsUpdate = true;
requestAnimationFrame(animate);
}
animate();
}
});
</script>
<a-scene>
<a-entity position="0 1 -6" rotation="0 45 0 " wave-component></a-entity>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

如果你想让它在另一个方向上波动，交换因子或只是旋转平面。