如何将wave-component的波浪运动从水平改为垂直？

核心修改思路 #

原组件通过修改顶点的Z轴位置实现水平波浪，要改成垂直波浪，关键是让顶点在Y轴方向做上下位移，同时调整波浪计算逻辑，让波动沿着水平方向（X轴）传播，呈现垂直起伏的效果。

修改后的完整代码 #

<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);

        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);
        // 可选：取消原X轴倾斜，让垂直波浪视觉更直观，可根据场景需求调整旋转角度
        wave.rotation.set(0, 0, 0);
        const clock = new THREE.Clock();
        let v = new THREE.Vector3();
        let pos = wave.geometry.attributes.position;
        el.setObject3D('WaveMesh', wave);

        function animate() {
            const t = clock.getElapsedTime();
            for (let i = 0; i < pos.count; i++){
                v.fromBufferAttribute(pos, i);
                // 基于X轴位置生成垂直波动，叠加到顶点初始Y值上
                const waveY1 = 0.08 * Math.sin(v.x * 2 + t * 3);
                const waveY2 = 0.05 * Math.sin(v.x * 5 + t * 2);
                pos.setY(i, v.y + waveY1 + waveY2);
            }
            pos.needsUpdate = true;
            requestAnimationFrame(animate);
        }
        animate();
    }
});
</script>

关键修改点说明 #

• 切换顶点位移轴：将原代码修改Z轴的pos.setZ(i, ...)改为修改Y轴的pos.setY(i, v.y + ...)，让顶点在垂直方向产生位移，同时保留顶点初始Y值，避免平面整体偏移。
• 调整波浪触发逻辑：所有波浪的正弦计算都基于v.x（水平位置），让波动沿着X轴方向传播，形成垂直起伏的波浪效果；移除了原基于v.y的高频扰动，若需要更复杂的波纹可按需保留或调整参数。
• 优化视觉角度：取消原代码中wave.rotation.set(-0.3, 0, 0)的平面倾斜设置，让垂直波浪的上下运动更直观，可根据场景布局自行调整旋转角度。

内容的提问来源于stack exchange，提问作者Rodrigo Olmedo